change widget background color

[aretzer]

How can I change the background color of all the widgets? (not just the text widget)

[Colin]

Identify the widget element name and then set the background colour in Custom CSS.

[monico]

How can I identify the widget name? Where would I find that info?

[Colin]

Look at this post in the How to section of this board or search on Sayontan's blog for Firebug.

viewtopic.php?f=8&t=394

[drake]

For changing background for all widgets content you can add at Suffusion Options -> Back-end -> Custom Includes -> Custom Styles:

Code: Select all

.dbx-content {background:#0052A4;color:#fff;}
.dbx-content label {color:#fff;}


I used above the final blue from widgets headers. You can go at http://www.december.com/html/spec/color3.html and choose the blue which you like.

[pontyhall]

trying to do the same think with no luck... want transparent background for widgets

http://darkbluedesign.com/

any ideas?
thanks
mike

[Colin]

Mike your dbx-content background is set to none rather than transparent. Just set it to transparent in your custom styles. Be aware though that if you do this the underlying colour is white.

[drake]

Now you have .dbx-content {background:#B38956;}

Add at Custom Styles

Code: Select all

.dbx-content {background:none;}

("none" as value for background property means "no image". Because the definition isn't completed with a color, CSS don't render also any color and let the background transparent. This construction will work also in old versions of IE which don't understand "transparent" property).

[pontyhall]

used .dbx-content {background:#B38956;} to match wrapper.
still looking to change widget title and background of widget under header

thanks for the quick response,
mike

[drake]

For widget titles you need to address h3.dbx-handle at Custom Styles:

Code: Select all

h3.dbx-handle {background:#B38956;color:#fff;}

For widget area below header:

Code: Select all

#horizontal-outer-widget-1 {background:none;border:none;}