How change link color in sidebar?
 

Hi,

I have a 2-column theme with the right sidebar containing the links to my categories, tags, etc. How can I change the link color on the right sidebar? Right now, it's the same color as the entire site and I'd like it to be different.

Thanks!

Here is what I used on my site for the left and right columns. You can change the hex codes, etc., to fit your website.

Put it in the "Add HTML/CSS Inserts" section of the theme options page.

Note -- this is not PHP code.

Thanks for that. It does seem to change the font/color when hovering, but that's it.

The site in question is http://www.mommarkettrends.com

Is there a mistake in that above code or do I need to add something else in order to get my specific site to change?

Thanks! :)

Looks like you have some other CSS configuring your links such as font size, etc.

Copy and paste the code you used so I can look at it. Also, send me the link font size and hex code for the colors you want to use for link and hover.

The only code I have pasted there for now is this:

I am not sure what colors I want to use yet, I want to play around until I find one that I like, but I'm leaning towards a pink/roseish color.

I haven't put anything else other than that code above into that custom CSS Inserts section. The color and style of those links seems to be set from the default settings for the posts that I set in the theme.

Add !important after a rule to ensure it can overwrite any existing rule, such as

td#right a:link,
td#right a:active,
td#right a:visited {
color: #7B5B42 !important;
font-weight: bold !important;
font-size: 0.8em !important;
}

This is a quick and dirty way without having to figure out which higher priority CSS rule is preventing your rule from being applied. Higher priority would mean the existing rule also uses an ID in the selector but additionally it is also more specific (selector is closer to the link)

Wow. That is a great tip. It will save so much time combing through css. Thank you.

This is exactly what I have posted in the CSS Inserts section, and still it only works with the hover links:

Any ideas?

Then the existing rule may also have important and is more specific too. Try making your CSS more targeted as well

td#right div.widget ul li a:hover {
...
}

or even

td#right div#id-of-widget1 ul li a:hover,
td#right div#id-of-widget2 ul li a:hover,
td#right div#id-of-widget3 ul li a:hover {
...
}

or post a URL

Thanks :). And I suggest to use all of styles from a css file. For example, if you use <div style="color: #efefef; font-size: 12px;">Bla bla</div>, that uses much more bandwith. Regards.