Changing the Background Color of Individual Fields

Gravity Support Forums » Plugin Support » Gravity Forms

blafarmm
Member

Hi GF Tech Support,

I need to change the background color of certain fields in my forms to indicate whether-or-not a particular item is included in the base price of a product -- or if it represents an upgrade that requires an additional charge.

I am hoping to achieve something that looks like this so that the entire field is highlighted (including the description area):
http://www.flickr.com/photos/37088387@N03/4769004463/sizes/l/

Of I would take this -- if I had to:
http://www.flickr.com/photos/37088387@N03/4769004445/sizes/l/

I'd be ecstatic to have 2 or 3 background color choices to choose from (red, green, blue) -- in addition to the default white.

After inspecting the code, I think I understand that each individual field has a:

class="gfield"
style ="display: none; "
class="ginput_container"

It seems I need to edit one of these parameters -- and create 2 or 3 new customized versions of that setting with different background colors -- and then edit each of my field's values to call that the appropriate version so it displays the correct background color.

Can you please help me with the following:

1. Is my general approach correct and is this possible?
2. Can you tell me which of the three above parameters controls the background color for the whole field -- it seems to be [class="gfield"]
3. Can you tell me which .css file I should be editing?
4. Is it possible to define 2 or 3 background color options within that .css file and then edit each of my field's values to call a certain background color defined within that .css?
5. Can you please provide me with a sample of what that code might look like?

Thanks very much. Your assistance is very much appreciated.

Posted 13 years ago on Tuesday July 6, 2010 | Permalink
Kevin Flahaut
Administrator
This is pretty simple. Each field is first wrapped in a containing list item < li> (.gfield). In the admin panel, you can set a custom class name which is applied to this list item. You can call this class name whatever you want.

admin screenshot

In this case, I added the class names "blue_field" and "green_field", then saved the form and went to my theme's style.css file and added the following rules.
```
li.blue_field {background-color:#B1CBE6; border:1px solid #44379F; padding:10px 6px; margin-bottom:6px;}
li.green_field {background-color:#99E8A0; border:1px solid #49CA56; padding:10px 6px;  margin-bottom:6px;}
```
After saving the css file. Here's the result.

form screenshot

Here's a quick note.. always do customizations in you theme style.css file or custom.css.. whatever it may be. If you make changes directly to the CSS files in the plugin directory, they will be overwritten when you auto-update the plugin.

If you have extensive customizations, I'd recommend copying the entire contents of the forms.css file and appending that to the end of your theme style sheet. After that, you can go into the Forms settings page and turn off the "output css" option. From there, you can customize your copy of the styles to your hearts content.

One final note, I put together a visual CSS guide that might help you better understand the overall structure of the forms and the classes.

http://www.gravityhelp.com/documentation/visual-css-guide/

You could always add a lot of global properties by applying them to the existing classes, then ones specific to each field by implementing your own class names via the admin. You can get pretty granular if you prefer.. even down to specifying styles for unique field ID's.

Hope that helps out.
Posted 13 years ago on Wednesday July 7, 2010 | Permalink
blafarmm
Member
Kevin,

I cannot thank you enough! Great explanation and great results. On top of that, very easy -- although I can imagine this would be perceived as a pretty sweet addition to the core product through the standard GUI.

Your excellent explanation regarding the advantages of modifying my theme's custom.css is greatly appreciated. Although, it does cause me to want to ask two follow-up questions:

1. A while back, I wanted to make my Section Break font larger and bolder. So I modified this original code in my GF forms.css:

.gform_wrapper .validation_error{ color:#790000; font-weight:bold; font-size:14px; line-height:150%; font-family:Helvetica,sans-serif; margin-bottom:16px}

To this code:

.gform_wrapper .validation_error{ color:#FF0000; font-weight:bold; font-size:26px; line-height:150%; font-family:Helvetica,sans-serif; margin-bottom:16px}

Based on your recent advise, it occurs to me that this modification will be overwritten in future GF updates. Can you please tell me how I would affect this change in a more permanent manner?

2. And while we're on the topic of Thesis, a while back I read that Thesis users required the following addition to the Thesis custom.css for better compatibility with GF:
```
ul.gfield_radio li input, ul.gfield_checkbox li input {width:5%!important}
.gform_footer input[type=image] {border:none!important; border-color:none!important; background-color:none!important}
```
Is this still the case -- or should I delete that code?

Thanks very much for your excellent support.
Posted 13 years ago on Wednesday July 7, 2010 | Permalink
Kevin Flahaut
Administrator

I'm pleased I could help out. Thanks so much for the kind words.

You can copy the CSS rule you updated for the validation error and append it to the end of your theme stylesheet... if you're using Thesis, then it would be the custom.css file. That way when GF auto-updates, it won't be affected.

The Thesis specific rule you mentioned along with a few more were added to the default forms.css file a couple of versions back so you shouldn't need to add it anywhere else. Actually, one rule has been updated slightly for the 1.3.13 release that will be out later this week. The new rule looks like this.

#content_box .post_box .format_text ul.gfield_radio li input, #content_box .post_box .format_text ul.gfield_checkbox li input {width:auto!important; border:none!important; border-color:none!important; background-color:none!important; background:none!important}

Once the new version is out and you've updated, you should be able to remove the original Thesis rules if you've placed them anywhere else.

Posted 13 years ago on Wednesday July 7, 2010 | Permalink
blafarmm
Member

That's great.

I will copy and paste my Section Break font modification (item #1 above) into Thesis' custom.css -- and delete my former Thesis specific rule (item #2 above) when the new version is released later this week.

Thanks again for your help.

Posted 13 years ago on Wednesday July 7, 2010 | Permalink

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