How do I change Link Color on Sidebar

Hey everyone I was wondering how to change the link color on the right sidebar to the orange color of the RSS feed in the top right of the page. I am kind of a newbie so some detailed steps would be helpful. Thank you ahead of time!

 

look into the CSS file of your template. If it's a wordpress look for wp-content/themes/yourtheme/style.css

 

and where do i change to change the color...

 

It depends what theme you're using - maybe give a link to your site?

If for example your sidebar was contained within a div with the id 'sidebar', you would need to look for the following line of code within the stylesheet:

#sidebar a {}

Code (markup):

The bit between the brackets styles all of the links in the sidebar div - just add your colour info as per this example:

#sidebar a{
color="#CCC";
}

Code (markup):

If the sidebar links are not styled separately from the rest of the site then you may need to add this entire code section to the stylesheet.

I hope this makes sense - If you're still stumped just post a link to your site and I'll tell you what to change/add.

 

here is a link to my site sorry im kind of out of it today just had surgery yesterday.

 

Add the following to your CSS:

.content-sidebar a {
color:#000;}

Code (markup):

Just change the #000 code to whatever colour code you want to use.

 

sorry, a bit better instruction...

open the style.css file within your theme folder.

Find this section:

/* SIDEBAR */
.content-sidebar{width:191px;display:inline-block;overflow:hidden;vertical-align:top;}
.content-sidebar input{padding:3px;border:1px solid #E5E2E0;margin-bottom:2px;}
.content-sidebar h3{margin:8px 0 0 0 !important;display:block;background:#FFF url(images/sidebar_h3.png) no-repeat;height:22px;width:181px;font-weight:700;font-size:11px;padding:9px 0 0 10px;}
.content-sidebar h3 a{text-decoration:none;color:#2C2C29;line-height:13px;}
.content-sidebar ul{list-style:none;width:191px;padding:2px;}
.content-sidebar li{list-style:none;}
* html .content-sidebar ul{width:160px;}
.content-sidebar ul li,.content-sidebar-2 ul li{display:block;color:#9D9793;line-height:16px;padding:4px 0 4px;border-bottom:1px solid #EEE;width:185px;}
.content-sidebar ul ul li,.content-sidebar-2 ul ul li{border:0px;padding-bottom:0;width:140px;}
.content-sidebar ul li.page_item ul li.page_item , .content-sidebar ul li.cat-item ul.children li.cat-item{background:url(images/arrow.gif) 0 11px no-repeat;padding-left:11px;margin-top:-3px;}
.content-sidebar ul li.page_item ul li.page_item ul li.page_item, .content-sidebar ul li.cat-item ul.children li.cat-item ul.children li.cat-item{background:url(images/arrow.gif) 0 11px no-repeat;padding-left:12px;}
.content-sidebar ul li a:hover,.content-sidebar .recentcomments a:hover{color:#AAA;}
.content-sidebar .textwidget, .content-sidebar select{padding:3px;margin:10px 2px 10px 2px;width:188px;}
.content-sidebar .recentcomments{display:block;border-bottom:1px solid #EEE;color:#9D9793;padding:4px 0px;line-height:16px;}
.content-sidebar .right {float:right; width:91px;overflow:hidden;}
.content-sidebar .left {float:left; width:91px;overflow:hidden;}

Code (markup):

No add the new bit to the bottom of this. It'll now look like:

/* SIDEBAR */
.content-sidebar{width:191px;display:inline-block;overflow:hidden;vertical-align:top;}
.content-sidebar input{padding:3px;border:1px solid #E5E2E0;margin-bottom:2px;}
.content-sidebar h3{margin:8px 0 0 0 !important;display:block;background:#FFF url(images/sidebar_h3.png) no-repeat;height:22px;width:181px;font-weight:700;font-size:11px;padding:9px 0 0 10px;}
.content-sidebar h3 a{text-decoration:none;color:#2C2C29;line-height:13px;}
.content-sidebar ul{list-style:none;width:191px;padding:2px;}
.content-sidebar li{list-style:none;}
* html .content-sidebar ul{width:160px;}
.content-sidebar ul li,.content-sidebar-2 ul li{display:block;color:#9D9793;line-height:16px;padding:4px 0 4px;border-bottom:1px solid #EEE;width:185px;}
.content-sidebar ul ul li,.content-sidebar-2 ul ul li{border:0px;padding-bottom:0;width:140px;}
.content-sidebar ul li.page_item ul li.page_item , .content-sidebar ul li.cat-item ul.children li.cat-item{background:url(images/arrow.gif) 0 11px no-repeat;padding-left:11px;margin-top:-3px;}
.content-sidebar ul li.page_item ul li.page_item ul li.page_item, .content-sidebar ul li.cat-item ul.children li.cat-item ul.children li.cat-item{background:url(images/arrow.gif) 0 11px no-repeat;padding-left:12px;}
.content-sidebar ul li a:hover,.content-sidebar .recentcomments a:hover{color:#AAA;}
.content-sidebar .textwidget, .content-sidebar select{padding:3px;margin:10px 2px 10px 2px;width:188px;}
.content-sidebar .recentcomments{display:block;border-bottom:1px solid #EEE;color:#9D9793;padding:4px 0px;line-height:16px;}
.content-sidebar .right {float:right; width:91px;overflow:hidden;}
.content-sidebar .left {float:left; width:91px;overflow:hidden;}
.content-sidebar a { color:#000; }

Code (markup):

That should sort it.

 

I copy and pasted that into the code and it did nothing to change anything. I even tried putting css #FF7F00 at the bottum after the color#000. what am I doing wrong?

 

Just looked at your new stylesheet - you've added too many # tags:

.content-sidebar a { color:##FF7F00; }

Code (markup):

Try this, I can't see why it wouldn't work:

.content-sidebar a { color:#FF7F00; }

Code (markup):

 

Boooyah thanks buddy you got it working!

 

Go to your Dashboard then under the Appearance tab go to EDITOR. There search the Style.css file and edit the Css code.