Sidebar Background Colour Renew Theme

Support
#1

Hi,

I have a few pages with a sidebar layout and i was wondering if its possible like on the posts page on the ethos theme that i could add a background colour to the sidebar. I am using the Renew theme. I would like it to look pretty much the same, so a light grey background and obviously padding around it.

This is basically what i would like to achieve:

The sidebar and right side of the page is light grey.

Thanks,

Chris

#2

Hello Chris,

Thanks for asking. :slight_smile:

You can add following CSS under X/Pro > Theme Options > CSS:

.x-sidebar.right {
    background-color: #ddd;
    padding: 5px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Hi @Prasant,

I have done that but this is what it gives me:

this is what I am trying to achieve:

Any ideas?

thanks,

Chris

#4

Hi Chris,

Would you mind providing the URL of the site in question? I tried going to the URL which is in the screenshot you provided but it goes to a different site.

Thank you.

#5

Hi Jade - i have added a private note to this. Thanks.

#6

Hello Chris,

Thanks for updating the thread.

Alog with previous CSS code, please add following CSS under Pro > Theme Options > CSS:

.x-sidebar.right .widget ul li, .x-sidebar.right .widget ol li{
    background-color: #ddd;
    padding: 5px;
}

Thanks.

#7

Thanks @Prasant, that is just colouring the sidebar itself. See here:
}

Is it possible to get the page looking like the picture above where its the right hand side of the page that is grey?

thanks,

Chris

#8

Hello Chris,

Do you want something like this?

If that is the case, please make use of this code instead:

.x-container.max.width.offset:before {
    content: "";
    display: block;
    position: absolute;
    top: -35px;
    bottom: -10000em;
    bottom: 0;
    width: 10000em;
    background-color: #e5e5e5;
    z-index: 0;
}

.x-content-sidebar-active .x-container.max.width.offset:before {
    left: 66%;
}

.x-sidebar {
    position: relative;
    z-index: 9999;
}

.x-sidebar .widget ul li, 
.x-sidebar .widget ol li {
    background-color: transparent;
}

You must remove the other codes given in the previous replies or else it will create some issues.

Please let us know how it goes.

#9

Thanks @RueNel, i had to change the z index on my footer as the grey car was above that and also change the z index of the slider below masthead as well as the sidebar itself and its all displaying ok until you resize the browser, then it all goes out of alignment. Here is the code i have used and a screenshot of what happens on a resize:

.x-container.max.width.offset:before {
content: “”;
display: block;
position: absolute;
top: -35px;
bottom: -10000em;
bottom: 0;
width: 10000em;
background-color: #e5e5e5;
z-index: 8000;
}

.x-content-sidebar-active .x-container.max.width.offset:before {
left: 66%;
}

.x-sidebar {
position: relative;
z-index: 8000;
padding-left: 50px;
}

.x-sidebar .widget ul li,
.x-sidebar .widget ol li {
background-color: transparent;
}

.x-slider-container {
z-index: 9001;
}

Getting there!

#10

Hello Chris,

Please update the code and use this:

@memdia(min-width: 980px){
    .x-container.max.width.offset:before {
      content: "";
      display: block;
      position: absolute;
      top: -35px;
      bottom: -10000em;
      bottom: 0;
      width: 10000em;
      background-color: #e5e5e5;
      z-index: 8000;
    }

    .x-content-sidebar-active .x-container.max.width.offset:before {
      left: 66%;
    }

    .x-sidebar {
      position: relative;
      z-index: 8000;
      padding-left: 50px;
    }

    .x-sidebar .widget ul li, 
    .x-sidebar .widget ol li {
      background-color: transparent;
    }

    .x-slider-container {
      z-index: 9001;
    }
}

@media(max-width: 979px){
    .x-content-sidebar-active .x-container.max.width.offset {
        margin-bottom: 0;
    }
    
    .x-sidebar {
        background-color: #e5e5e5;
        margin-left: -12%;
        margin-right: -12%;
        padding: 12%;
    } 

    .x-sidebar .widget ul li, 
    .x-sidebar .widget ol li {
    background-color: transparent;
    }
}

Hope this helps.

#11

Thanks @RueNel,

I tried the updated code but it loses the grey colour on full width but then wraps and fixes the issue on a tablet mobile. See here:

Also is there a way to remove the white lines between the menu items. Thanks guys, i really appreciate your help.

Chris

#12

Hi There,

Please also add this custom CSS:

.widget_categories ul>li, .widget_product_categories ul>li, .widget_nav_menu ul>li, .widget_pages ul>li {
    border: none;
}
@media (max-width: 979px){
    .x-content-sidebar-active .x-container.max.width.offset:before {
        left: 100%;
    }
}

Hope it helps :slight_smile:

#13

Thanks @thai, that has removed the lines, all except the one at the bottom of the widget, see here:

#14

Hi Chris,

Please add this CSS as well to remove that last line

.widget_categories ul, .widget_product_categories ul, .widget_nav_menu ul, .widget_pages ul {
    border-bottom: 0px;
}

Thanks!

#15

Nice one, thanks @Rad, that did the trick. You guys are legends! You dont fancy just doing my site for me do you? haha :smile:

#16

Hey Chris,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.