Widget background and font colors « Support Forum | Kriesi.at

Support Forum » Abundance

Widget background and font colors

11 posts from 7 voices

Started 1 year ago by lackcy
Latest reply from Mya
This topic is resolved

Tags:

lackcy
Member

Hi,

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

Thanks!

Posted 1 year ago #
Dude
Dude
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 :)
Posted 1 year ago #
acornfactorynonprofit
Member

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!

Posted 1 year ago #
Ismael
Moderator

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

Posted 1 year ago #
acornfactorynonprofit
Member

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!

Posted 1 year ago #
Chris Beard
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
Posted 1 year ago #
acornfactorynonprofit
Member

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!

Posted 1 year ago #
Mya
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
Posted 1 year ago #
Devin
Moderator

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

Posted 1 year ago #
acornfactorynonprofit
Member

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.

Posted 1 year ago #
Mya

Hi,

Great!

Regards,
Mya

Posted 1 year ago #