Transparent Widget

[paramountgrp]

Can I make the widget area transparent so that the background appears?

http://paramount-group.biz

[nutsandbolts]

Which widget area are you referring to? Centric has a number of widget areas, so I'm not clear on what you're wanting to do.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[paramountgrp]

The homepage widgets. Home1-6
I want to be able to make the appropriate widgets transparent, depending on the data that I want to populate it with.

[nutsandbolts]

Yes, you can do that. For example, in your stylesheet, .home-widgets-2 has a background color of #fff. If you change that rule to background: transparent; it shows the image instead. (It also makes the black text hard to read, but of course you can change the text color too.)

Hope that helps!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[paramountgrp]

Thanks a million!

[PageH]

Will this work for other widgets? I'm using AgentPress Pro and would like my text widget to be more transparent, but not completely.

[nutsandbolts]

You'd need to use CSS to apply a RGBA background to the area in question. If it's the top area in AgentPress that already has transparency, it's just a matter of adjusting it. Can you post a link to your site and more details about which widget you want to change?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PageH]

site is:

http://pagesellsmontana.com/wp-admin/

Widget I'm trying to make more transparent (not completely) is the Home - Featured.

Would also like to ideally control the height of it as well.

[nutsandbolts]

Find this rule in your stylesheet:

.home-featured .widget {
background-color: rgba(255, 255, 255, 0.2);
padding: 40px;
margin: 0 auto;
max-width: 80%;
}

The background-color is what is affecting both the color and the transparency. That 0.2 at the end means it's at 20% currently. Try changing that to 0.6 or so (looks pretty decent on my end) and you can adjust as you see fit.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts