Multiple forms on one site | wish for different background and border colors

Gravity Support Forums » Plugin Support » Gravity Forms

GJudy
Member
http://sensiblestrategy.com/nonsense (a Premise landing Page)
and http://sensiblestrategy.com/stuff-n-nonsense/ a regular page in the Education theme.

I have removed the tangle of custom css and tried to set something up that looked like it would be 'universal' for all forms. Than add the code that would separate forms that I found on another threads
```
[css]
/*-- Enter your custom CSS below --*/
body .gform_wrapper {
    width:450px;
    margin:0 auto;
    font-family: arial!important; font-size: 20px; color: white; margin: 10px;   

}

/*-- Form ID 1 Specific Styles ---------------------------------------------*/

body .gform_wrapper {background: coral; padding:20px}
body .gform_wrapper {border: 5px solid darkolivegreen}

/*-- Form ID 5 Specific Styles ---------------------------------------------*/

body .gform_wrapper {background: steelblue; padding:20px;}
body .gform_wrapper (border: 5px solid red}
```
Some of the code will overcome the other, but any changes affect both forms instead of being style specific. Adding the "_1" or "_4" after wrapper, etc. will remove all background colors. I got this idea from http://pastie.org/1081799 in another thread. Thank you for the help and encouragement.
Posted 11 years ago on Monday August 20, 2012 | Permalink
Chris Hajer
Key Master
I think there is just a minor misunderstanding. When you use "gform_wrapper" to apply to all forms, it's identified as a CSS class, and prefaced with a period, like this:
```
[css]
body .gform_wrapper {
```
When you get specific to a form, it's almost always as a CSS ID, and it is prefaced with a hash mark, like this:
```
[css]
body #gform_wrapper_5 {
```
See if changing the way you're doing things helps. If in question, look at the source of the page, and if you see id="gform_wrapper_5" it will be referenced as #gform_wrapper_5 in your stylesheet.

If you look at the source of the page and see class="gf_browser_chrome gform_wrapper", it will be referenced as .gform_wrapper in your stylesheet. (gf_browser_chrome is added to the tag based on the browser viewing the page. It's not relevant here but I wanted to mention it since you might see something like it in the source.)

Bottom line: class: prefix with a period (.). ID, prefix with a hash (#).
Posted 11 years ago on Monday August 20, 2012 | Permalink
GJudy
Member

Thank you! That worked perfectly. I added the #gform_wrapper_1 or appropriate number to the specific code area.

Is that line really a note to me? Or does it have some effect?
'/*-- Form ID 1 Specific Styles ---------------------------------------------*/'

Thank you again.

Posted 11 years ago on Wednesday August 22, 2012 | Permalink
Rob Harrell
Member

That's a comment - so it would be solely for your internal purposes only. Think of it as a note to self.

Posted 11 years ago on Wednesday August 22, 2012 | Permalink

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