Support » Themes and Templates » Need help changing some colors

  • Hello all.

    I am totally new to CSS and (almost) new to WordPress.

    For the past 2 weeks I have been experimenting with WordPress, doing a lot of reading here in this forum, learning a lot of new stuff, and making changes along the way.

    My blog has a black background, to match the (mostly) black image in the blog title. As a result I need almost white text for the posts, replies, etc.

    While I got most of it figured out (body text in grey, and the default color for the post date works great) I do have a couple of things that I just cannot find.

    For starters: my post titles are too dark, not enough contrast with the black background. I’ve read the documentation; but I’m a little confused: some of it doesn’t seem to apply to the WordPress version I’m using – 2.7.1. Can someone tell me where and how to change that post title color to bright white?

    Down that same road I’d like to change the color of the “category/edit/comments”. Again, I can’t find where/how to change that. Currently they’re at the default light blue; but I’d like to change that.

    Thanks for reading, and I would really appreciate your help.


Viewing 7 replies - 1 through 7 (of 7 total)
  • A few easy ways to go about it:
    – View source and find a sample of the text you want to change. It probably has a class (or at least an element) assigned to it. Find the corresponding class/element in the css. It probably has a color assigned, and you’d just edit it.

    – If you know what color the elements are (using a color picker tool like in photoshop, for example) you can go through the css and find instances of the color to change.

    Also, use a web developer’s toolbar if you can.. makes life easier when you’re testing things out 🙂


    Hi I find the easiest way by far to debug CSS issues is to install the Firebug Firefox extension, and learn how to use it. It saves literally days of time.

    Your best bet in asking on the forum is to post the URL of the page you are having trouble with. Then someone can look at the page (usually with Firebug) and see where your problems are.

    Jeremy Clark



    Another good thing to have is the IE developer toolbar so you can debug your IE only issues. It’s similar to Firebug but not nearly as powerful. But still good to have.

    Thanks for all your answers so far.

    But I need more help. I’ve downloaded Firebug and have stared myself blind at the source code. I just can’t find it.

    I was reading in the documentation a few days ago that I need to edit the h2 properties. But when I do that nothing changes. Maybe I’m still not looking in the right place?

    If someone wants to have a look the blog is at . What I still need to change (but can’t find where) are: the post’s titles (now dark grey), the color of the links under the posts (category/edit/comments) and the links at the bottom or the blog (proudly sponsored by… line), and the links in the calendar. These last three are all some blue now; but I’d like to change them into some color that “bites” a little less, on the black background.

    There are some other colors that I’d like to change but I’m hoping someone will point out what I’ve been doing wrong, and I’ll be put in the right direction so I can continue on my own.

    Thanks in advance!


    To change the post title to white

    h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    	color: #fff;

    all links are in this (change to desired color)

    a, h2 a:hover, h3 a:hover {
    	color: #06c;
    	text-decoration: none;

    To use Firebug, you can select Outline –> Outline current element, and when you move across the page, it will tell you where you are in the toolbar.


    Firebug has a lot in it. My most frequent working style is to click “Inspect” on the toolbar and then point at something on the browser screen. In the left panel the HTML code is displayed and on the right is the CSS that’s being applied to the element I am pointing at.

    If you click once on the object you want to examine in more detail the inspecting process turns off, and the left and right panels are left displaying the settings for the element you just clicked. You can even edit the CSS (and HTML) settings in those panels, to see instantly what happens when you change the top margin from 5px to 15px, or whatever. (It only changes in the browser, not in the stylesheet file. After you determine the settings you want using Firebug, add them into your stylesheet, upload, and your changes are live on the web.

    One more thing – the HTML you see in the left panel is what is generated after the PHP code has been translated into HTML – database queries have been run, etc. You will not see PHP code in the left panel, only HTML.

    To find the location in your PHP file that generates a section of code you have to extrapolate back to the PHP file. Most PHP files have enough static HTML in them that you can look for specific HTML phrases and tags in the left column, to find your place. But it won’t follow line by line what you see in your PHP file. For example, if there is a call to the PHP function wp_list_pages() in the PHP file, that is one line in the PHP file yet could generate 100+ lines of HTML, if you have a lot of pages.

    Oh my!

    I started that Firebug debugging process again tonight – with a fresh mind. It turns out I was looking at the wrong things the first time…

    Anyway, I was able to change the post title color, and some other things. More to be done, but now I know how 🙂

    Thanks for the great tip – it’s a steep lurning curve!


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Need help changing some colors’ is closed to new replies.