PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Two different CSS classes for Section field description text? Please help...

Gravity Support Forums » General » Pre-Purchase Questions

  1. RichardBest
    Member

    Hi there - I'm using section fields, with no labels but descriptions, to include plain text depending on the answer to a previous field. As per previous discussion posts, I achieve this with conditional logic.

    I would like to be able to have three different CSS classes for the description text. I've done the first one, by amending the standard forms.css file (which I've pasted in the theme's stylesheet (and I've then turned off the "output.css" feature), as follows:

    .gform_wrapper .gsection_description {background-color:#FFDFDF!important; margin-top:4px!important; margin-bottom:6px; padding:6px 6px 4px 6px!important; border:1px dotted #C89797}

    As you'll see, I've copied the approach for field error messages, so as to change the background colour for the description text to pink/red.

    What I'd like is to be able to create two alternatives for the description text, one with a green background and one with an amber background. The green, amber and red backgrounds will be used to denote something like "you may proceed", "proceed with caution" and "do not proceed", respectively.

    I've tried to do this, for green, by adding the following additional CSS class:

    .gform_wrapper .gsection_description_green {background-color:#009900!important; margin-top:4px!important; margin-bottom:6px; padding:6px 6px 4px 6px!important; border:1px dotted #C89797}

    I've then tried to override the standard CSS for a given section field by adding "gsection_description_green" into the CSS Class Name field in the advanced tab for that field.

    However, it's not working as intended. Instead of giving the description text a green background, it's giving the rest of the section field a green background, whilst keeping the background to the description area of that field red.

    I'm confident that I'm making a CSS error here. Can anyone help me figure out how to make this work please? Would really appreciate some help here.

    Thanks in advance
    Richard

    Posted 13 years ago on Tuesday June 22, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    Hey Richard,

    Each field or container has a unique ID you can target. The easiest way is to just grab the container ID/field ID and use some inheritance to get the description styled.

    Example:

    #gform_wrapper_29 #field_29_2 .gsection_description {background-color:red; padding:10px;}
#gform_wrapper_29 #field_29_4 .gsection_description {background-color:yellow; padding:10px;}
#gform_wrapper_29 #field_29_6 .gsection_description {background-color:green; padding:10px;}

    Of course, you'll want to replace the actual ID's with the ones from your form. Here's a screenshot of my VERY quick test.

    screenshot

    Does that help get you rolling?

    Posted 13 years ago on Tuesday June 22, 2010 | Permalink

  3. RichardBest
    Member

    That's great. Superb in fact. Many thanks Kevin. Much appreciated. Works perfectly. It'll mean I'll have 20-30 additional lines of CSS, but presumably that won't make any real difference.

    Cheers
    Richard

    Posted 13 years ago on Tuesday June 22, 2010 | Permalink

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