[stephenwiggs]

stephenwiggs

#1595

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.

Thanks,

Ken