Change the color of the Sidebar background

Last Reviewed: 3-Apr-15 (3.3.13) 3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Using the rgba property enables us to set the opacity of the background (0, 0.1…0.9, 1). Use Google to translate a hex #nnnnnn code to rgba.

/* START OF Change the color of the Sidebar background */
/* 1. Both sidebars */
.tc-sidebar {
  background-color: rgba(51, 153, 255, 0.1);
}
/* 2. Left sidebar */
.left .tc-sidebar {
  background-color: rgba(51, 153, 255, 0.1);
}
/* 3. Right sidebar */
.right .tc-sidebar {
  background-color: rgba(51, 153, 255, 0.1);
}
/* END OF Change the color of the Sidebar background */

Choose Option 1 OR Option 2 OR Option 3 OR Option 2/3 with different rgba values for left/right.

20 thoughts on “Change the color of the Sidebar background”

Comments are closed.