CSS help - how to change the size of a box

Gravity Support Forums » Plugin Support » Gravity Forms

Gil Namur
Member

Hi there,

Being a bit 'green' at css, I wonder if you could just give me an example of how I can change something.

I'd like to change the color of price from red to green. Can I do this by adding something to my style.css and then use the CSS Class Name option in the form?

I'd like to make a number field appear as only 2 characters wide. Even set to small, it's still large-ish. Again, can I do this by adding something to my style.css and then use the CSS Class Name option in the form?

I know about the tutorial link but was hoping for a quick pointer or tip .. please please!
Thanks and cheers,
Gil

Posted 12 years ago on Saturday August 6, 2011 | Permalink
Chris Hajer
Key Master

Gil, can you post a link to your form please? All you want to accomplish should be fairly easy with CSS.

Posted 12 years ago on Saturday August 6, 2011 | Permalink
Gil Namur
Member

Hey Chris,

Thanks! The site in question is in maintenance (pre launch) mode right now but here is another site: http://www.mybusinessinfo.info/order-your-web-page/

If I wanted the price to be green (rather than red) and the total to be red (rather than green)

This form does not have a number field like I mentioned above. But what if I wanted to make the quantity field only 2 characters wide? Right now it's 6.

Thanks!
Cheers,
Gil

Posted 12 years ago on Saturday August 6, 2011 | Permalink
Kevin Flahaut
Administrator
The class you need to target for the price field is .ginput_product_price
```
[css]
body .gform_wrapper span.ginput_product_price {
    color: green;
}
```
Gil, You'll need to view the source on your other form, grab the id of the input you want to resize and then replace the ID ( #ginput_quantity_8_6 ) in the example below with the one from your form.
```
[css]
body .gform_wrapper input#ginput_quantity_8_6 {
    width: 20px;
}
```
screenshot: http://bit.ly/nyvNxb
Posted 12 years ago on Saturday August 6, 2011 | Permalink
Gil Namur
Member
Kevin! You ROCK!

All worked .. just stuck on one. I used this to try and get a single line number field to shorten.
```
body .gform_wrapper input#ginput_input_6_27 {
    width: 20px;
}
```
It did not shorten .. What did I miss? (its at the hidden site not the link I sent you)
THANK YOU!
Posted 12 years ago on Saturday August 6, 2011 | Permalink

Gil Namur
Member

WAIT! I got it!

[css]
body .gform_wrapper .gform_body .gform_fields #field_6_27.gfield input[type=text] {width: 20px}

THANKS!

Posted 12 years ago on Saturday August 6, 2011 | Permalink

Kevin Flahaut
Administrator

Great news. Looks like you whipped up some good specific CSS to override other styles. Very nicely done.

Posted 12 years ago on Saturday August 6, 2011 | Permalink

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