The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

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; }

For a light-grey background. Or for a semi-opaque black background:

#sidebar { background-color: rgb(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.