Tips when Customizing CSS in WordPress

This post contains affiliate links.

I have spent the last week working many late nights on the redesign of DragonBlogger.com and one of the most frustrating issues of tweaking a blog theme can be tuning the Stylesheets (CSS) of your blog so that the formatting of everything looks good.  The most frustrating thing was trying to fix the background color of threaded or nested comments in WordPress which I couldn’t resolve easily.  Wordpress 2.7 and later allow for comment threading / nesting where comment replies can nest within the original comment.

Themes can take advantage of this by using several ways to highlight comment backgrounds using things like ‘alt’, ‘even’ and ‘odd’ to try and alter the background color in CSS for every other comment or nested comment.  In struggling to find where the comment background was being picked up from I did a ton of digging on WordPress Codex about nested comments.

Everything you want to know about how the WordPress threaded comment works is in the WP_List_Comments hook on WordPress.org and is a worthwhile read.

I just couldn’t find what was causing my comment backgrounds to be shaded, and Firebug showed that the CSS class to set my comment background was from my post itself and not being called from my typical style.css or any other stylesheet.  I went through every .css file in my blog theme line by line and couldn’t find the offending style, it was after sheer desperation that I decided to check my plugins and saw that I had an old WP Nested Thread plugin from about a year ago installed.

I completely forgot that plugins themselves can apply CSS styles to your blog and to the browser these appear to be “set in the blog” when they actually are set by the WordPress plugin.  As a standard practice now I highly recommend doing the following if you run into a style issue with your blog.

1)  Change your blog theme back to the default WordPress Twenty Ten theme.  If your issue or troubling code still exists then you know it is most likely coming from a plugin.

2) Disable all plugins until you find the culprit

If all else fails chances are something you are trying to find may be inside the WordPress core itself.

-Justin Germino

Updated: October 16, 2010 — 7:40 pm