A hint on using Firebug or Chrome's "inspect element"

  • stephenwiggs


    I keep a copy of the Graphene theme on my desktop just for moments like these:

    I recently changed the background on my personal blog to a brushed metallic background. It looked great, but then the part of the comment panel that said “Leave a Reply” was a little too light against the new background.

    Both Firebug and the element inspector told me that the element I was dealing with was <h3 id="reply-title">. So I added this to my custom CSS:

    #reply-title {color:#000;}

    Nothing changed. Bummer.

    But then I went to the copy of Graphene that I keep on my desktop and opened the “styles.css” file, and searched for “reply-title”. I found this line:

    #respond h3#reply-title {
    background-position: -880px -17px;

    So I copied and pasted this into my custom CSS and changed it to read:

    #respond h3#reply-title {color:#222;}

    and that worked. (I also added some text-shadow elements as well, but these need a bit of tweaking).

    But then I started wondering if that was how the code was supposed to work. So I searched the stylesheet again, this time looking for #respond, and I found this bit of code:

    #respond > h3,
    h3.author-post-list {
    background: url(images/sprite_master.png) -880px 6px no-repeat;
    clear: both;
    color: #929292;
    font: normal 20px arial;
    margin: 20px 0 5px 24px;
    padding-left: 25px;

    That clearly contains coding that looks like what my original “Leave a Response” text looked like (that is, it includes size, font, and color information), so thinking that this was the way to go, I replaced what I had originally with this:

    #respond > h3 {color:#222;}

    and that worked beautifully. The point is that I want to use the code that changes as few elements as possible: to wit, just the one I’m interested in, which means using the bit of CSS coding that actually styles the element I’m trying to style. That way I don’t have other changes going on that I can’t figure out.

    If this seems like a long and complicated process, it is, if you aren’t that familiar with CSS, HTML, and coding in general. But this is how you learn. At least, it’s how I learned. The entire process took about five minutes of my time. For some of you, it may take less time, and for others, it may take more.

    I hope this gives you an insight into how Firebug and Chrome’s “Inspect Element” work, as well as giving you an example of one problem-solving approach to any theme issues you may have. If any of you have a quicker, shorter method, or another workaround altogether, please teach us.



Viewing 1 post (of 1 total)

  • You must be logged in to reply to this topic.