Change the widget color for the Gravity Form

Gravity Support Forums » Plugin Support » Gravity Forms

jruffer
Member

I have been beating my head against the wall on this one. Hoping you can help. I have 3 lower widgets at test.epaymentamerica.com I would like to make widget-3 a different color. I cant seam to tweak the CSS the right way. Any thoughts?

Posted 12 years ago on Tuesday August 2, 2011 | Permalink
Kevin Flahaut
Administrator
Not sure if you want to change the text color or the background color.. but it's essentially the same. If you view the source, the div that contains that widget has its own unique ID ( gform_widget-3 ). You can use that to target the div itself or any of the child elements inside that div.
```
[css]
/*change the text color of the form contents */

body div#gform_widget-3 .gform_wrapper {
    color: red;
}

/* change the background of the div that contains the widget */

body div#gform_widget-3 {
    background-color: #eee;
}
```
screenshot: http://bit.ly/r0Vn4e
Posted 12 years ago on Wednesday August 3, 2011 | Permalink

That looks really good too but I am trying to Change the color of the Accept Credit Cards Today! background #393939 color. I have tried this but it is not changing?
Thought it might be because of the form?

[css]
#home-right .widget h3 {
background: -moz-linear-gradient(center top , #4884C9 20%, #4884C9 100%) repeat scroll 0 0 transparent;
border: 1px solid #003D7F;
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.29);
color: white !important;
font-weight: bold;
padding: 12px 15px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

Posted 12 years ago on Wednesday August 3, 2011 | Permalink

Kevin Flahaut
Administrator
Nope. Your form has nothing to do with it. This is just straight up CSS work. If you target it properly with your rule, you can change it to look like whatever you want. There is a background image being applied so you have to override that too if you want to change the background color on the H3 title
```
[css]
body div.home-right .widget h3 {
    background: red!important;
    background-image: none!important;
}
```
screenshot: http://bit.ly/n3IcHX
Posted 12 years ago on Wednesday August 3, 2011 | Permalink
jruffer
Member

found it...#home-right was wrong...

Posted 12 years ago on Wednesday August 3, 2011 | Permalink

This topic has been resolved and has been closed to new replies.