Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #9186

    Hi,

    Is there a way to change the background and font color of the sidebar/widget area?

    Thanks!

    #63776

    Hey,

    yes – open up css/custom.css and insert following code:

    .sidebar .widget {
    background-color: #333 !important;
    color: #fff;
    }

    Obviously you can use any other color values :)

    #63777

    I need to do something similar – essentially, I changed the background of the footer, but the widget backgrounds are solid. Is there a way to make the widget backgrounds transparent with different text color?

    Thanks!

    #63778

    Hi!

    Hello acornfactory

    Maybe you can use rgba values for your widget background.

    #footer .widget{

    background: rgba(255, 0, 0, 0.5);

    }

    This will render the footer widget in red background with 50% opacity.

    Best regards,

    Ismael

    #63779

    Thanks for the quick response.

    I dropped the code into the custom.css, but it doesn’t seem to change anything. The widget background is still a solid green so it doesn’t seem to be taking any of the arguments.

    Alternatively, is there a way to just change the background of the widget? I’m currently using the text widget just to test things.

    Thanks!

    #63780

    Hey,

    The code Ismael provided should work, have you tried adding !important? Like this:

    #footer .widget{
    background: rgba(255, 0, 0, 0.5) !important;
    }

    This will apply to every widget in your footer. It works fine for me.

    Cheers,

    Chris

    #63781

    Chris/Ismael,

    The !important actually makes it work, but I was wondering if there is any way to change the background of the widget to be transparent. I changed the footer background to be a unique wood grain and would like it to show through.

    http://www.kriesi.at/support/topic/make-the-footer-widget-transparent-edit-sub-menu-colors-reduce-thumb-height

    The person in this post asked the same thing, but he seems to have resolved it himself so it seems it can be done. Unfortunately, the solution was never posted in the thread.

    Thanks again guys!

    #63782

    Hi acornfactory,

    Just for clarification, you want the footer widget to be completely transparent – no background color whatsoever?

    In that case, you would use this:

    #footer .widget{
    background: transparent !important;
    color: #ffffff !important;
    }

    Note: I added the color setting in there as well in case you need to change that.

    You’ll also need to set the background color for each link transparent as well so add this to your custom CSS too:

    #top #footer, #top #footer span, #top #footer div, #top #footer p, #top #footer a {
    background-color: transparent !important;
    }

    Hope that helps!

    Regards,

    Mya

    #63783

    Hey!

    The code added should actually make the background transparent. The .5 at the end of the rbga color code is actually for transparency. I believe its supported now for all but IE8 and below.

    Do you have a link to the site that we can take a look at?

    Regards,

    Devin

    #63784

    Mya,

    The code that you posted worked perfectly.

    Devin, I’m currently in the process of transferring over the domain, so I don’t have a site up yet, but I’ve been playing with WP on my own computer.

    #63785

    Hi,

    Great!

    Regards,

    Mya

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Widget background and font colors’ is closed to new replies.