Sidebar Background Colour and Line Removal [widget:after]

kathrynmichaud · July 2014

Hi, could you tell me how I can change the background colour of the sidebar please? Also, if you view my website here: http://www.littlefoxwebdesign.co.uk/lumbandmacgill you can see on the sidebar that a couple of the divider lines seem to carry on past the sidebar into the background - how can I stop them doing this?

Thank you!

Albert · July 2014

Hi,

to change sidebar background color, please use below custom css:

.widget-area:before { background: #000; }
#Wrapper { overflow: hidden; }

Above css will also help you with lines under widgets that goes out of boxed layout. But if you prefer to remove those divider lines between widgets, please use below css also:

.widget:after { border: none; }

kathrynmichaud · July 2014

Hi - that's worked great thank you. Could you help me with more thing? I have a Revolution Slider here: http://www.littlefoxwebdesign.co.uk/lumbandmacgill but when I view it on my IPad the slider is not responsive - I have chosen the responsive settings in the slider settings - what else do I need to do?

Thanks for your help.

Albert · July 2014

Please send us access to your wp dashboard on pm so we can have a look on what you did wrong.

kathrynmichaud · July 2014

Hi - I've just sent you log in details for the wp dashboard via PM.

Thank you!

Albert · July 2014

We did not received any pm from you. We have no idea how you did it, but to send us message, please click on our avatar/nickname above.

erkintazh · December 2014

thanks! works!

Cubs108 · February 2017

Hey!

An additional question to the one at the very top:

Is it possible to use different colours in a sidebar?

What I mean:

I created a sidebar called "Used Vehicles", I want to give the title a dark background colour, the rest of the bar a light one.

And a very basic question on top the have it all together: what's the code to change text colour (I don't want to use h1,h2,h3,...).

Thank you guys, great work!

Albert · February 2017

@Cubs108 Please send us link to page where you would like do this first.

Harfenduo · April 2017

I have an additional question:
I have a sidebar on the right and changed its background color to white like described. In a small browser window the sidebar moves to the bottom, which is alright, but then its backgroud color disappears. How can I change this?

Bryan · April 2017

@Harfenduo Please send a link to your page

Harfenduo · April 2017

Thanks for your answer. I solved this problem by unchecking "Transparent Content" in the betheme options. I had to, because for some reason, I also couldn't change the shop background via customizer with this option.

canalengrenagem · July 2017

Guys, where i have to put the code?
in a text box in the sidebar or in the css on betheme options?

the name of my sidebar is contato, may i change the code?

thanks for the attention

.widget-area:before { background: #000; }
#Wrapper { overflow: hidden; }

Bryan · July 2017

You can put the custom css in theme options>custom css&js>css

n_hoangkien · June 2018

Hi Betheme,

I have met same problems, I have tried the below CSS code

.widget-area:before { background: #000; }
#Wrapper { overflow: hidden; }

But it doesn't work, please advise me accordingly. This is my website: http://oodecor.com/dich-vu-noi-that/

One more thing, Content WP area next to the sidebar widget (stated in yellow in the attached image) is Content WP item which I use Muffin Builder to build, and I want set it background like sidebar widget background (but separated from sidebar widget background)

And attached image is for your reference.

Many thanks,

H.K

Pablo · June 2018

Hi,

Sidebar lines can be disabled in BeTheme > Theme Options > Sidebars > Layout

http://prntscr.com/jtm65o

To delete this background for <li> elements, you have to paste this CSS code:

.sub-menu{
  background:transparent !important;
}

If you want to have this same color in Content Item, you have to setup it in Muffin Builder, and give it a color: rgba(0,0,0,.03)

Thanks.

n_hoangkien · June 2018

Hi Betheme,

I can delete the sidebar background.

For the lines, I set "hide lines" as per your guide but the lines are still there, pls advise!

BTW, pls show me more details for setup content item color as I cannot find where is it in Muffin builder.

Thanks,
HK

Pablo · June 2018

Here's your code to make your lines disappear:

body.page-id-1391 .widget_archive ul li::after, .widget_nav_menu ul li::after {
 width:0px !important; 
}

If you want to setup background color for it, you have to change it for whole wrap and items.

http://prntscr.com/jutttl

http://prntscr.com/juttzf

And paste color of it into background color.

Thanks.

n_hoangkien · June 2018

Hi Betheme,

The lines disappear already, thanks.

But for the background, I knew your guide, but my question is for "Content WP" item, when I choose it, there's no option for background. Just to check, if there's no option for the item, can I use CSS code, if that is the case, pls guide me how is the code!

Many thanks for your support.

HK

Pablo · June 2018

Hi,

Please add to Contect WP class with your name

http://prntscr.com/juw6gi

Then, add to your Custom CSS code:

.myclass{
background:rgba(0,0,0,0.3) !important;
}

Thanks.

n_hoangkien · July 2018

Many thanks,

It works well.

a40maV1ta · June 19

Hello,

I tried with the code

.widget-area:before { background: #A2C329; }

#Wrapper { overflow: hidden; }

in Theme options - custom CSS and it doesn't working.

Here is link to my page:

https://integrativna-aromaterapija.eu/home-clone-aia/

Phil · June 20

Hi @a40maV1ta,

It is an old topic. Please note that it is better to create new topics instead of writing in such old ones.

Please also explain in detail what your goal is.

Best regards

a40maV1ta · June 20

Hi, I thought I explained. I want to change my right sidebars background color into #A2C329. How do I do that?

Phil · June 21

You are using the header builder.

Sidebar background color can be changed in the Menu Burger element under the Style tab.

Best regards

a40maV1ta · June 22

Hello, this is what I want to change. How do I change a background color?

Phil · June 23

@a40maV1ta,

Try the following CSS code:

.mcb-sidebar:before{
 background-color: #0f0;
}

Please put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

Sidebar Background Colour and Line Removal [widget:after]

Comments