Picky CSS edit
April 20, 2009 6:52 PM   Subscribe

I have a Blogger blog, and I have a CSS theme that I customize. How can I change the color of links only in the blog banner ("header"), without changing the color of links in the rest of the blog?

I'm not an expert at CSS editing, but I know enough that I can go to "Variable definitions" in my template and change the color for "linkColor." (I can't paste the relevant code here or it'll get automatically altered.)

But "linkColor" isn't the variable I want to change. That affects the color of links in my actual posts. I don't want to do that. Right now the links throughout my blog are dark purple (on a white background), and I want to keep them that way. But I have a dark background in the banner, so the text in the banner can't be dark purple or it'll be barely visible.

I've tried simply entering the appropriate HTML directly in the banner text, but Blogger rejects this for some reason.

I've tried googling for the answer, but this seems pretty obscure. Anyone know how to do this?
posted by Jaltcoh to Computers & Internet (7 answers total) 3 users marked this as a favorite
 
If your header is a DIV with the id "header" you would add this to your CSS file to make links within that DIV white:

#header a:link {
color: #FFF;
}

When I used Blogger I could edit the CSS file just like any other text file; is that not the case anymore?
posted by bcwinters at 7:02 PM on April 20, 2009


I'm kinda unfamiliar with Blogger templates, but in your template you probably have something like this style tag:

<style type='text/css'>
</style>


Insert this inside that style tag:

#banner-inner a {color: #FFFFFF;}

(#FFFFFF is for white links, change as necessary.)
posted by clearly at 7:08 PM on April 20, 2009


#header a:link {
color: #FFF;
}


I tried this -- doesn't seem to change anything.
posted by Jaltcoh at 7:13 PM on April 20, 2009


clearly: I don't seem to have that "style" tag in my template.
posted by Jaltcoh at 7:14 PM on April 20, 2009


Add it between the <head> </head> tags like this:

<style type="text/css">

#banner-inner a {
color: #FFFFFF;
}

</style>

Curious to test it out, I just tried it in my old blogger template and got it to work.

In my template, the header was defined as "banner-inner", yours may be different, but should be fairly easy to track down. It will probably be something along the lines of "header" or "banner-inner".
posted by clearly at 7:24 PM on April 20, 2009


Aha! Got it! Thanks so much, everyone.
posted by Jaltcoh at 7:33 PM on April 20, 2009


For posterity's sake, I'll say what I did. I took this suggestion:

#banner-inner a {
color: #FFFFFF;
}

But I changed "banner" to "header" (since that's the word that's used in my template). I went to the header section of the template, and inserted the above code right after the "#header-wrapper" section.
posted by Jaltcoh at 7:40 PM on April 20, 2009


« Older Take me back in time   |   Help get us outta here! Newer »
This thread is closed to new comments.