Hi grayhat. The easiest way to chamge the sidebar colors is to use CSS. If you’re using a child theme you would place the css code in your child theme style.css file. Or, you could install a plugin like Simple Custom CSS and enter the code there.
The following code will change the sidebar heading and content area colors, and the mobile sidebar toggle icons, to light green. You can change the color attribute to whatever you choose.
@media only screen {
.s1,
.s1 .sidebar-top,
.s1 .sidebar-content,
.s1 .sidebar-toggle,
.s2,
.s2 .sidebar-top,
.s2 .sidebar-content,
.s2 .sidebar-toggle{
background: #b9ffa5;
}
}
The unused sidebar areas below the sidebar content will still be the default beige (color of the sidebar background image files). You can override that by using the “!important” declaration. To make the remainder of the sidebar areas and the main content area the same color as the default theme site backgroud:
.main-inner,
.s1-expand .s1,
.s2-expand .s2 {
background: #eaeaea !important;
}
Or you can make it all white:
.main-inner,
.s1-expand .s1,
.s2-expand .s2 {
background: #fff !important;
}
The downside of using css to extend the sidebar color the entire length of the content area is that, as the screen shrinks in responsive mode, the content area also shrinks, allowing the main-inner container background color to be displayed below the content area. Fixing this is more complicated because the theme uses image files for the sidebar backgrounds. If you want to make the full length of the sidebar the same color, without affecting other parts of the theme, the best way to do it is to use an image editor and change the color of all the sidebar image files in the theme /img/sidebar folder.
