Widget area needs transparent background

[Eduardo]

I'm currently working with the Genesis Agency Pro theme and I've inserted a text widget in the Home Middle widget area, but I need it to have a completely transparent background.

The widget seems to be inheriting an opaque background when I try and use the background-color: transparent; property-value. I've written the following code to figure out what's going on. The property works with other color values.

.home-middle {
	background-color: blue;
}

Everything in blue, including the text background, needs to be transparent.

I'm not sure if this is relevant, but it is somewhat puzzling; even the widget-title is inheriting it's color from the CSS code on line 1215 instead of the code I've written on line 1393.

http://staging.trytobosa.org

[Tom]

"inheriting it’s color from the CSS code on line 1215 instead of the code I’ve written on line 1393."

Even though your edit is further down in the stylesheet, the earlier statement has more specificity and therefore more 'weight'. Generally, you want to make your selector only as specific, only as powerful, as necessary

Work this code into your stylesheet before the media queries, after line 247:

.home .content,
.home-middle {
    background-color: transparent;
}

.agency-pro-home .content .widget_text .widget-title  {
	color: red; /* your colour code here */
}

.home-middle .wrap .widget  {
    background-color: transparent;
	color: #fff;  /* your colour code here */
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Eduardo]

Thanks for the tip Tom. You code worked well.

[Author]

Posts