Sunday, April 20, 2008

Some CSS Success

If you actually visit this blog page, instead of just reading along via rss or whatever, you might have noticed that the link colors in the "Reader Shared Items" block didn't match the link colors for the rest of the page. I finally decided to fix that today. It took a little digging around with Firebug, but it was worth it. I found that the reader widget makes its "a" HTML elements with class "i", so I put in a line "a.i { color: \$linkcolor; }" in the "Edit HTML" bit under "Layout" for blogger. That didn't work. But by an odd coincidence, just this morning I read about the "!important" bit of css, so I tried that (it makes the property that it is associated to harder to ignore), and it worked. And then I realized that there was no point in including an extra bit of css for just the "a.i" class, I might as well just tack "!important" to the color line in the existing "a:link" css (in my template, it's the first thing after the css for "body"). And that seems to have worked, which is nice.

[Update (~10 minutes later): I just realized that, of course, this changes all of my link colors. That only seems to have affected my post titles colors. But that's in the "Posts" section of my HTML template, under ".post h3 a", with "color:\$titlecolor". Tack an "!important" there, and it all works out. For good measure, I also put some more "!important"s on the css lines for "a" toward the top of my template (under "Body"). The Reader Shared Links were still underlined, while none of my other links where (unless you hover over them), so I put a "border-bottom: none !important;" in the css for "a" toward the top (there under "body" again), and it seems to have worked out.]

Anyway, I've found the firebug firefox extension to be an awesome tool for messing with webpages. You can click around and look at all the code for everything everywhere. And you can modify the source and watch it affect the page right away. Totally sweet. If you play with webpages and haven't used it, you should check it out.

(Sorry if any of the terminology above is wrong, "elements" or "properties" or whatever. Feel free to let me know if I mis-spoke, I'd like to get it right someday)

No comments: