Sidebar widget background

Support
#1

Hi guys,

I have been scroling through numerous of topics already about sidebar widget background changing… but none of them actually help me with what i tried to accomplish…

I think its not possible because of the way the x pro page layout is set up… but pls check and try to help me out with this if its possible.

So i want the sidebar to be with content to be a diffrent color. See examples.

#2

Hello JayL,

Thanks for writing in!

Do you want the sidebar to be like this (see secure note)?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-sidebar .widget {
    padding: 20px;
    background-color: #e5e5e5;
    border-radius: 4px;
}

Feel free to change the padding, background color and border radius values.

#3

Hi Rue, could u make that screenshot private? Since its still in dev, Thanks.

And no, thats not what i tried to do, because those snippets i did find in the topics but is not what im after.

If u looked at the example url, ull see the whole sidebar is a diffrent color, not just the widgets.

#4

Hey JayL,

Thank you for the screenshot, I’ve also made your site’s screenshot private. The layout you’re trying to have is available in Ethos stack by default, see the demo here http://demo.theme.co/ethos-1/

You can switch to Ethos stack and then to set the grayish background color, navigate to Theme Options > Layout and Design > Background Options > Background Color and set the color as your need.

Hope this helps!

#5

Hi Nabeel,

Im currently on the Renew stack, so its not possible on the layout here? I just want the sidebar seperated with an diffrent color form the left content, thats all, or 1 border line, thats responsive with mobile, would do to… just to make a seperation…

Thanks again mate!!

#6

Hi JayL,

This would require custom CSS as this is not a renew’s stack feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. You can try adding the following code in the Theme Options > CSS:

.x-site > .x-container {
    position: relative;
}

.x-site > .x-container:before {
    content: "";
    display: block;
    position: absolute;
    top: -35px;
    bottom: -10000em;
    bottom: 0;
    width: 10000em;
    background-color: #fff;
}

.x-content-sidebar-active .x-site > .x-container:before {
    right: 28%;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code.Hope this helps!

#7

implementing is not an issue! Thanks in advance!

I’ve implemented as we speak, but nothing changed tho…

#8

Hey JayL,

I checked your site and the code is working as expected (see secure note). You need to set the grayish back color via Theme Options > Layout and Design > Background Options > Background Color. To make the background color visible, you also need to add the following code in the Theme Options > CSS:

.site, .x-site {
    background-color: transparent;
}

Hope this helps!

#9

Hi buddy,

I tried all the diffrent option, but it doesnt look good…

Perhaps an border in the middle is an option? I just need a little seperation from the content and the sidebar.
I’ve found an post that has an snippet in it but its not responsive, as soon as the screen is smaller it keeps the line and width, maybe with queries i can fix it.

#10

Hi JayL,

Yes you can wrap your code in a media query to fix the issue, for example replace your code with following code:

@media screen and (min-width: 980px) {
    .x-sidebar {
        border-left: 2px solid rgb(108,106,106);
        padding: 0 0 0 30px;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#11

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