Sidebar Background Colour and Line Removal [widget:after]

edited July 2014 in Other
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!

Comments

  • 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; }
  • 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.
  • Please send us access to your wp dashboard on pm so we can have a look on what you did wrong.
  • Hi - I've just sent you log in details for the wp dashboard via PM.

    Thank you!
  • 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.
  • thanks! works!
  • 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!
  • @Cubs108 Please send us link to page where you would like do this first.
  • 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?

  • @Harfenduo Please send a link to your page
  • 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.
  • 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; }
  • You can put the custom css in theme options>custom css&js>css

  • 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.
    image

    Many thanks,
    H.K
  • Hi,
    Sidebar lines can be disabled in BeTheme > Theme Options > Sidebars > Layout

    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.


  • 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
  • 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.
    And paste color of it into background color.
    Thanks.

  • 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

    image
  • Hi,
    Please add to Contect WP class with your name

    Then, add to your Custom CSS code:

    .myclass{
    background:rgba(0,0,0,0.3) !important;
    }
    Thanks.
  • Many thanks,

    It works well.
Sign In or Register to comment.