Fullwidth left side bar background color

Hi,
In the css above the ID of “#after_layer_slider_1” in the inspector looks like this:

but this ID is on every page that has a layerslider, the only reason this css is not working on other pages is due to the page id class which is right after the body ID #top:

so if you remove the #top.page-id-3366 from the css it will work on every page and post, but I recommend first testing with #top.page to target all pages and no posts, to reduce possible future conflicts.

#top.page #main #after_layer_slider_1 {
    background: #009aff;
    background: -moz-linear-gradient(left, #009aff 0%, #009aff 49%, #ffffff 49%, #ffffff 100%);
    background: -webkit-linear-gradient(left, #009aff 0%,#009aff 49%,#ffffff 49%,#ffffff 100%);
    background: linear-gradient(to right, #009aff 0%,#009aff 49%,#ffffff 49%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009aff', endColorstr='#ffffff',GradientType=1 );
}

#top.page #main #after_layer_slider_1 .template-page.content {
    background-color: white;
}

#top.page #main .sidebar_left .sidebar {
    background-color: #009aff;
}

#top.page #main .sidebar_left .sidebar h3, 
#top.page #main .sidebar_left .sidebar a {
    color: white !important;
}

Best regards,
Mike

Hi,
Thanks for the link, I’m not sure which background your trying to change, based on the color above it looks like the sidebar, is this correct?
If you don’t have a layerslider try to not add the class “#after_layer_slider_1” in your css.

Best regards,
Mike

Hi,
Thank you for the feedback, when I look at your sidebar I do see the background-image covering the whole area, but as I understand we are not seeing the whole width of the image, see screenshot 1 below, but because of the size of the image if we force the full width it is no longer full height, see second screenshot below.
This is the css I used to force full width:

@media only screen and (min-width: 1024px) {
#top #main .sidebar { 
	background: #717377; 
	background-image: url(/wp-content/uploads/2019/11/menu-bg.png)!important;  
	min-height: 100%!important;
	background-repeat: no-repeat!important; 
    background-size: contain!important; 
}
}

You could change your image to 240×830, image linked below.

Best regards,
Mike

Hi,
Oh, try adding this css and clear your browser cache:

#main > div > div {
	    padding-left: 0 !important; 
}
#main > div > div > main {
	    padding-left: 15px !important; 
}

Since you are adding your css to your child theme styles.css, after you add the go to your Quick CSS and add a blank space and save, this will force your css to be rebuilt, then clear your browser cache.

Best regards,
Mike

Hi,
Ok, I added this css:

#main > div > div {
    background-color: #717377 !important; 
}
#main > div > div > main {
    background: #ffffff url(/wp-content/uploads/2019/11/main-content-bg.png) top right no-repeat scroll !important; 
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the update and feedback, just let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi,
This has been adjusted so it will also work on your homepage:

#top.page-parent #main > div.sidebar_left > div,#top.page-child #main > div.sidebar_left > div {
    background-color: #717377 !important; 
}
#top.page-parent #main > div.sidebar_left > div > main,#top.page-child #main > div.sidebar_left > div > main {
    background: #ffffff url(/wp-content/uploads/2019/11/main-content-bg.png) top right no-repeat scroll !important; 
}
#main #after_section_1 > div {
	    padding-left: 0 !important; 
}
#after_section_1 > div > div {
	    padding-left: 15px !important; 
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike