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


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




    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 :)


    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?




    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,



    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.




    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.





    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.

    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!


    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!





    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?





    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.






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

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