How do I change the sidebar and tabs color?

pruncuu · Member · Oct 26, 2014 at 6:49 am
Copy link

Add topic to favorites
Hello

I want to change the color of the sidebar and tabs, but at Custom Design it says that “Your current theme does not support Custom Colors yet. We are working to add support to most of our themes, including this one.“

So I guess that the only method of changing the color is by modifying CSS somehow, but I really really don’t know how to do that.

Any ideas?

Thanks in advance

The blog I need help with is: (visible only to logged in users)
supportmyoffice · Member · Oct 26, 2014 at 2:44 pm
Copy link
These three things will change the color of the base of the nav bar, the color when you hover and the color of the individual tabs of the nav bar.
```
#access {
	background: blue;
}
#access a{
	background-color: green;
}
#access a:hover  {
	background: red;
}
```
I put in random colors but you can choose whatever colors you want. This site has an excellent list of hex codes for many colors.
supportmyoffice · Member · Oct 26, 2014 at 2:48 pm
Copy link
For the side bar title tabs you’d need to add

`.widget-title {
background: blue;
color: red;
border-bottom: 1px solid green;
}

“Color” changes the color of the text.

If this doesn’t do what you’re looking for, please feel free to post again.
pruncuu · Member · Oct 26, 2014 at 9:08 pm
Copy link
I don’t really know where to put the code. The CSS section doesn’t have a place to put code. When I go to CSS it takes me to this page http://postimg.org/image/ynfi4pw0p/
supportmyoffice · Member · Oct 26, 2014 at 9:13 pm
Copy link
Do you have the Custom Design upgrade? If so, you would go to Dashboard>Appearance>Custom Design> CSS
supportmyoffice · Member · Oct 26, 2014 at 9:14 pm
Copy link
If you don’t have this upgrade then you can’t change the CSS and would need to find a theme that had the layout and colors your prefer.

You may also be able to find a theme that offers color customizations as a part of the theme. Twenty Fourteen offers some but not for the the Nav Bar.
pruncuu · Member · Oct 26, 2014 at 10:11 pm
Copy link
Nope, I don’t have the upgrade.

C`est la vie!

Thanks anyway. :)
thesacredpath · Member · Oct 26, 2014 at 10:25 pm
Copy link
CSS code, such as what @supportmyoffice gave you above is inserted at Appearance > Customize > CSS.

Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS she gave and edit the colors as you desire.
pruncuu · Member · Oct 27, 2014 at 4:30 am
Copy link
When I go to Appearance > Customize, it gets me to that page. I know it should’ve been an area to insert code, but there isn’t.
supportmyoffice · Member · Oct 27, 2014 at 12:16 pm
Copy link
Did you click on CSS? If you have the upgrade, which it sounds like you don’t, then you have to click on the CSS tab to get the CSS window to open where you can add your code.

If you have the upgrade, the customize screen shows CSS like this

https://cloudup.com/c2egjFCiIyg

If you don’t, CSS just isn’t there, like this

https://cloudup.com/c2egjFCiIyg
supportmyoffice · Member · Oct 27, 2014 at 12:17 pm
Copy link
Sorry, the sidebar closed on that second screen shot. Here is the customize without the upgrade for CSS

https://cloudup.com/cbeSePonpi3
thesacredpath · Member · Oct 27, 2014 at 4:09 pm
Copy link
Since your account was created before September, 2014, you can try out and preview custom CSS before you buy as explained here.

For those that create their user accounts after September, 2014, the Custom Design has become a feature of the WordPress.com Premium and WordPress.com Business plans. In these instances, users can get a 30 day trial of the Premium plan and then try out the CSS before purchase.
pruncuu · Member · Oct 28, 2014 at 5:08 pm
Copy link
Yes, supportmyoffice is right. And I wouldn’t buy anything just to change a color.

Thanks though :)
thesacredpath · Member · Oct 28, 2014 at 7:46 pm
Copy link
You are welcome.

No items found.