Fun with css class definitions.

Here is my issue: I am using a theme with customized css for your div tags. I would like to know which file I need to look at to add my own div tags to the form page output. In this instance, the file which inserts "div class=gfield_description"

My issue is I revised the themes css file (line 244) for this div class: .gfield_description {
float:left; margin-top:-14px; But I needed to make another class for the form field just above my submit button.

So I made another class (Line 245) .gfield_name_box { float:left; } . I entered exactly in the form field section of CSS Class Name: gfield_name_box I entered no dot or hash tag. Then I even tried with both, but I got the same result.

When I used FireBug, to review, the css class being picked up was still .gfield_description. And not gfield_name_box. Therefore I was not able to use this feature.

Please advise. Life shouldn't be this hard, right? That's what the CSS Class Name text box is for.

So two points, the obvious feature, and what file are the div tags being created from? I tried combing through your code for the past several hours with Adobe Dreamweaver CSS to no avail. I found the tag, but not where I could use it.

If I knew what file was creating the div tags, then I could at least add my own and get by the CSS Class Name feature. For your reference, the form url is http://edmontonapartmentsrent.com/rental-search/ And the issue is the description over lapping the last form field box.

For you to see it, you have to select one of the radio buttons inthe field titled, "# How should we address you?*" Then it will show up.

Thanks guys.

"What exactly are you trying to manipulate?" The description. gfield_description I had to do this for the description to be positioned on the text box titled, "What kind of Price Protection Lease do you want?*" This is why you see:
.gfield_description { float:left; margin-top:-14px; }

But when that worked, it messed up the description below the box titled, "How should we address you?*" So I entered into the form advanced option for CSS Class Name: gfield_name_box .

However as you pointed out Kevin,
<li style="display: list-item;" class="gfield gfield_name_box" id="field_1_14">

So first, why is there a space between my CSS Class Name I entered on the form?

class="gfield(white space)gfield_name_box"

I then made a CSS Class in the style.css file as : .gfield_name_box { float:left; }

And yes, I would add to this to get whatever style I wanted. In this case to compensate the way Gravity Forms appears to treat the description element differently between drop down box elements and text box elements. But I left it so you can see my errors I was having on the text box titled, "How should we address you?*". While manipulating the description entered for "What kind of Price Protection Lease do you want?*"

My question is why is the form element not picking up my CSS Class Name, gfield_name_box? If it is, then why is the div class pointing to .gfield_description and not gfield_name_box ?

If it did point to the CSS Class Name I entered, gfield_name_box ; I would have been able to control the description for "How should we address you?*", which is being treated differently by Gravity Forms for the box "What kind of Price Protection Lease do you want?*"

The issue I am having is the different types of form options, such as drop down boxes verses text boxes treat the description differently as to where it will be placed. I noticed this when I selected a text box rather than a drop down when this issue occurred for me.

I wouldn't have even made a different CSS Class Name is Gravity Forms didn't treat the description styles differently with different form options (drop down boxes verses text boxes). But it does. This is why I got into making new CSS Class Names to compensate these differences.

I just want to have different a .gfield_description so I made a new one in the style.css file called, .gfield_name_box and then add my styles.That's what I thought the CSS Class Name override in the form advanced options was all about?

What did I miss Kevin in the translation of what is affected using the CSS Class Name override in the form advanced options?

I used your 5px!important in FireBug. And of course it works for the text box titled, "How should we address you?*" But then throws off the description for the drop down box titled, ""What kind of Price Protection Lease do you want?*"

So I thought when I made my own css class, and entered it in the CSS Class Name Form option, this would pick up my new css class .gfield_name_box and apply the new styles to my description below "How should we address you?*" But it didn't. Why?

That was an excellent reply Kevin. Thank you. I like being told where I have failed so I can correct myself, lol. It must be so nice to be neo of the css matrix. #field_1_14 .gfield_description {color:#f00; margin-top:20px} You know that is the first time I have seen css make sense. "Cascading down."

I'll take the time , thanks for putting me on a learning path Kevin.

In our continuing lesson css inheritance, I am stumped here Kevin. <div class=gfield_description validation_message> I don't know how to write a css line to pick up the validation_message portion of this div class. How would I describe it in my css?

Can you explain to me how I would manipulate the validation message part of this class. I tried a few guesses, but I couldn't get the my css file to pick it up. I know I can do this, because I did this already. But I don't want to have to create a css line for every validation_message.

So what am I missing? How can I invoke the validation_message part of this div class in my css file. So as to have the same validation style for all validation messages in my forms.

For a real example:

#field_1_14 .#field_1_14 .gfield_description {color:#0E4D91; margin-top: 3px; float: left;} {color:#ff0000; margin-top: 3px; float: left;}

The above does not pick up. However this css line:

#field_1_14 .gfield_description {color:#0E4D91; margin-top: 3px; float: left;}

Works just fine. I am having difficulty drilling down to the specific validation_message portion of the div class. I tried underscore and a dot as well between gfield_description and validation_message.

#gform_1 .validation_message {color:#ff0000; margin-top: 3px; float: left;} You're a genius Kevin, lol! Okay, can you recommend an excellent CSS book I could buy and read that would explain such css coding as entering two child classes like you did?

I can't find anything online about this. And to be able to code with CSS like you have explained, I would like to learn it all, so I can too someday be the Obi wan Konibi of the css matrix, lol!

Thanks Kevin! Having fun now using Gravity Forms for lead segmentation!