Picky CSS edit

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?
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.)

Jaltcoh at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

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?

bcwinters

#header a:link { color: #FFF; } I tried this -- doesn't seem to change anything.

Jaltcoh

clearly: I don't seem to have that "style" tag in my template.

Jaltcoh

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".

clearly

Aha! Got it! Thanks so much, everyone.

Jaltcoh

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.

Jaltcoh

Related Q & A:

How do you search DOM elements using CSS selectors in Chrome?Best solution by Stack Overflow
How to apply custom css to CKEditor?Best solution by stackoverflow.com
Why would Arial be placed before Helvetica when using font-family in CSS?Best solution by Quora
How to save ONLY the CSS changes of Styles panel of Chrome Developer Tools?Best solution by Stack Overflow
Is it possible to use SVG images as CSS background?Best solution by helephant.com

Just Added Q & A:

How many active mobile subscribers are there in China?Best solution by Quora
How to find the right vacation?Best solution by bookit.com
How To Make Your Own Primer?Best solution by thekrazycouponlady.com
How do you get the domain & range?Best solution by ChaCha
How do you open pop up blockers?Best solution by Yahoo! Answers

For every problem there is a solution! Proved by Solucija.

Got an issue and looking for advice?
Ask Solucija to search every corner of the Web for help.
Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.