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?
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?
Best answer: 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
<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
Response by poster: #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
color: #FFF;
}
I tried this -- doesn't seem to change anything.
posted by Jaltcoh at 7:13 PM on April 20, 2009
Response by poster: clearly: I don't seem to have that "style" tag in my template.
posted by Jaltcoh at 7:14 PM on April 20, 2009
posted by Jaltcoh at 7:14 PM on April 20, 2009
Best answer: 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
<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
Response by poster: Aha! Got it! Thanks so much, everyone.
posted by Jaltcoh at 7:33 PM on April 20, 2009
posted by Jaltcoh at 7:33 PM on April 20, 2009
Best answer: 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
#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
This thread is closed to new comments.
#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