If you want to color your sidebar or add any background, or if you want to set the width, you will not find an option in the DIVI 2.5 theme options, and also via CSS it is a bit tricky, because the distances structure of the sidebar and content area is complicated. I found some solutions in the net that didn’t work, and I guess they were written for version 2.3 when the theme had a different structure. Starting from an answer in the Elegant Themes forum, I investigated and tweaked around to make it work in DIVI 2.5. Here is my solution so far, working up to 2.7 as I’ve tested now and extended the code to also look nice below 980px.
NOTE: This code was created for standards posts with a standard right sidebar. When I find more time I want to adapt it to work with left and right sidebars in all scenarios. If you adapt it before me and want to share, let us know your solution in the comments.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@media all and (min-width: 981px) { /* at max-width:980px DIVI is putting the sidebar below the content */ #page-container #main-content .container { width: 100%; /* instead of the default 80% so the sidebar color goes to the edge */ padding-top: 58px; /* needed to be reset */ padding-left: 5.5%; /* needed to be reset */ padding-bottom: 58px; /* needed to be reset and I increased the too little default 23px */ } #main-content .container #sidebar { position: absolute; top: 0; right: 0; height: 100%; padding: 58px 30px 58px 30px; /* needed to be reset */ background: #eee; /* change to your color or even add a background image */ width: 28% /* set the prefered width of your sidebar, but also take care for the next CSS order */ } .et_right_sidebar #left-area { width: 72% /* Put here 100 minus the width you have set above */ } .et_right_sidebar #main-content .container::before { right: 28% !important; /* also here the value above has to be used for the sidebar separator line to be in correct place */ background-color: #bbb; /* Change the color of the sidebar separator line */ /* display: none; /* or remove it completely */ } } @media all and (max-width: 980px) { /* And some optimization for the mobile version */ .et_right_sidebar #sidebar { clear: both; /* needed in case of side-aligned images longer than the text next to them */ padding: 30px; /* needed distance to the borders because now we have color */ margin-top: 30px; /* and a bit more space to the content area above */ } #sidebar { background: #eee; /* use the same color as above */ border-top: 1px solid #bbb; /* also our border should move, now to the top, use same color */ } } |
Update 2015-Nov-22: Adapting the DIVI Page Builder Sidebar to the Standard Page Sidebar
I also needed the Standard Page Sidebar to display on Page Builder Pages, where the sidebar of the standard pages can not be activated, but with the following CSS Tweaks I managed to give standard pages and builder pages the same look by using a speciality section. The downside is that the DIVI Page Builder can not be fully used as normal and I would still prefer a solution in which the standard sidebar is integrated via a Child-Theme, so the full Page Builder will be accessible but just displaying in the content area, as it would be integrated as a plugin. I keep on tweaking.
Here’s the code to achieve it, which needs to sit as well inside the @media (min-width: 981px) media-query.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.et_section_specialty {padding: 0px 0px!important;} /* Removing the top and bottom padding from the section so the sidebar reaches header and footer */ .et_section_specialty .et_pb_column_3_4 {width: 72%; padding-right: 5.5%; padding-left: 5.5%; padding-top: 35px;} /* Adjusting distances */ .et_section_specialty .et_pb_widget_area_right {border-left: 1px solid #640049;} /* Using the same color as on standard posts sidebar */ .et_section_specialty .et_pb_row {width: 100%;} .et_pb_section .et_pb_row .et_pb_column .et_pb_sidebar_0 /* This is the same code as applied on the #main-content .container #sidebar above, they can be merged */ { position: absolute; top: 0; right: 0; height: 100%; padding: 58px 40px 58px 40px; /* needed to be reset */ background: rgba(65, 0, 102, 0.2); /* change to your color or even add a background image */ width: 28% /* set the prefered width of your sidebar, but also take care for the next CSS order */ } |
Thanks you for this.
Very useful code and still accurate with DIVI version 3.0.97.