The Divi Theme has a flexible sidebar which can be positioned on either the left or right of the page (or hidden altogether). Unfortunately, the way that the sidebar is structured actually makes it very difficult to set the background color with margins, etc, that actually look good. Here, then, is how to change its background color by adding some CSS to the theme.
Updated: I've recently revisited this and come up with a new method which works much more cleanly with Divi's natural flow. It can also be applied with out affecting the existing layout at all. I've included both methods here.
Method 1: The Old Way
We can start by setting our desired background color on the "sidebar" element, like so:
#sidebar { background-color: #fafafa; }#sidebar { background-color: rgba(0,0,0,0.5); }You'll notice however, if you do this, that it doesn't look particularly good. The sidebar element tightly surrounds the content meaning that the contents of the sidebar are right up against the edge of the sidebar.
To fix this we can adjust the padding and margins. We need to specify several sets of padding and margins to handle the various screen sizes supported by Divi. Here is an example set of padding and margin rules which I think gives a nicer result:
@media only screen and (min-width: 1100px) { /* full-size screens */
.et_left_sidebar #sidebar { /*left*/
padding:70px 0 200px 30px;
margin:-70px 0 0 -30px;
}
.et_right_sidebar #sidebar { /*right*/
padding:70px 30px 200px 0px;
margin:-70px -30px 0 0;
}
}
@media only screen and (min-width: 981px) { /* medium-size displays */
#sidebar {
padding:70px 30px 200px 30px;
margin:-70px -30px 0 -30px;
}
}
@media only screen and (max-width: 981px) { /* mobiles, etc */
#sidebar {
padding:30px
}
}This code works for both left and right sidebars.
Method 2: The New, Better (But Longer) Way
Here's my preferred method of setting the Divi Theme's background color as it provides a much neater and more natural integration with Divi.
#sidebar { background-color: #fafafa; }
/* Increase the container width by 60px to provide space for outer margins */
@media only screen and (min-width: 1100px) {
.et_right_sidebar #main-content .container,
.et_left_sidebar #main-content .container {
width:1140px;
}
}
@media only screen and (min-width: 981px) and (max-width:1099px) {
.et_right_sidebar #main-content .container,
.et_left_sidebar #main-content .container {
width:1020px;
}
}
/* Add outer padding */
@media only screen and (min-width: 981px) {
/* Add 30px margin to outside edge of sidebar */
.et_right_sidebar #sidebar .et_pb_widget { margin-right:30px }
.et_left_sidebar #sidebar .et_pb_widget { margin-left:30px }
/* Add 30px margin to outside edge of main area (for balance) */
.et_right_sidebar #left-area { margin-left:30px }
.et_left_sidebar #left-area { margin-right:30px }
}
/* Declare the sidebar width */
@media only screen and ( min-width: 1100px ) {
.et_left_sidebar #sidebar,
.et_right_sidebar #sidebar {
width:254px;
}
}
@media only screen and (min-width: 981px) and (max-width:1099px) {
.et_left_sidebar #sidebar,
.et_right_sidebar #sidebar {
width:224px;
}
}
/* Fix the inside padding / margin on medium screens */
@media only screen and (min-width: 981px) and (max-width:1099px) {
/* Reduce inside margin on main content */
.et_right_sidebar #left-area {
margin-right:30px
}
.et_left_sidebar #left-area {
margin-left:30px
}
/* Add as inside padding to sidebar instead */
.et_right_sidebar #sidebar {
padding-left:30px
}
.et_left_sidebar #sidebar {
padding-right:30px
}
}
/* Fix the dividing line position */
@media only screen and (min-width: 981px) {
.et_right_sidebar #main-content .container:before {
right:254px;
}
.et_left_sidebar #main-content .container:before {
left:254px;
}
}
/* Extend sidebar vertically */
@media only screen and (min-width: 981px) {
.et_right_sidebar #sidebar,
.et_left_sidebar #sidebar {
margin-top:-100px;
padding-top:100px;
padding-bottom:10px;
}
}
/* Add padding on small screens (mobiles, etc) */
@media only screen and (max-width: 981px) {
#sidebar { padding:30px !important;margin:0 0 30px 0 !important; }
}Again it works on both left and right sidebars.
Another thing you may consider doing to enhance the look of the sidebar is removing the dividing line.
Hi Dan,
Where would I add the code in method 2? I have followed your tutorial on copying code into Divi them but can't seem to see any changes. I am using a child theme and have tried placing the css code in different parts and nothing seems to change the sidebar.
Hope you are able to assist.
Hi Mike, the CSS can be added either into the Custom CSS box found at "Divi > Theme Options > General > Custom CSS", or into the "style.css" file within your child theme. Assuming neither of these is working, are you able to send me a link to the site you are working on so that I can take a look at what's going wrong? Thanks!