How to change the sidebar width or color

Question:

How can I change the width or color of the sidebar?

 

Answer – Changing the Sidebar Background Color:

1) Log into WordPress
2) Click on “Appearance” -> “Editor”
3) A file called style.css should load by default – if not select it from the file list on the right.
4) Type or copy/paste the following -replace the hex color number with your own:
#sidebar{background-color:#cccccc;}

 

Answer – Changing the Sidebar Widget Title (h3 tag) color:

The Sidebar title font color is inherited from the menu color.
Follow these steps to overwrite the color:

1) Log into WordPress
2) Click on “Appearance” -> “Editor”
3) A file called style.css should load by default – if not select it from the file list on the right.
4) Type or copy/paste the following -replace the hex color number with your own:
#sidebar h3{color:#6F4242;}

 

Answer – Changing the Width:

Note: this is an advanced customization topic and should only be attempted if you have a basic understanding of html and css

1) Log into WordPress
2) Click on “Appearance” -> “Editor”
3) A file called style.css should load by default – if not select it from the file list on the right.
4) Type the following to change the width of the sidebar from 260px to your desired value – for Example: 360px.
#sidebar{width:360px;}
5) Subtract the width that you added (100px in the example) from 655px which is the default content width. And type the result.
#content{width:555px;}

back to topics list