pedro67
Member
Hi there
I have got some small fields for number of guests in a form and I am using 3 Categories like adults, till 10 years old and till 14 years old for a booking form.
How can I combine those fields in one set instead of using for each one line?
Some of your fields like "name" are already combined to save place and look nice. Is there a way to to that as you want to?
I am using your Beta 1.7.2
thanks
Richard Vav
Administrator
Can you post a link to a page containing your form so we can see what fields you are talking about and provide more specific advice, you are probably looking at using the CSS ready classes to position fields on the same line or in columns
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
pedro67
Member
thanks Richard
Here is the link
http://www.schokokino.at/reservierungen
As you can see, there is also an issue with some grey fields. Other fields are ok from the css. I did not change anything. What could be the reason?
Richard Vav
Administrator
It looks like your figured out the CSS ready classes, as for those grey inputs they are picking up a gradient that has been applied by a rule in your themes stylesheet, try adding the following to the bottom of it to counteract it
.gform_wrapper input[type=text], .gform_wrapper textarea {
background: white !important;
}You would add this code to your theme's style.css and the code Richard gave you is specific to Gravity Forms fields.
pedro67
Member
oooh ok. I entered this code - all form fields white.
But this does not fit the theme.
As well the fields I mentioned before which stayed white are obviosly to touched by css as the corners are not rounded.
I deactivated this code now, that you can see the difference
sorry for this basic questions.
I have to test Gravity forms for big forms if it works for our needs. If it works, I will buy a developer license for sure.
I like your support - great!
I guess the question now is, "what do you want the fields to look like?"
You will want to come up with CSS to fit your specific theme by figuring out first what you want the fields to look like and then applying the CSS like our examples showed.
Richard Vav
Administrator
Sorry I misunderstood which fields you want to change the styles for, if you want all your fields to have the grey gradient background with rounded corners and white text then the css below should do it, I have copied the styles from your stylesheet. The only field this won't change is the select field which every browser handles differently so you might be better editing that dropdown field and enabling the enhanced interface which you can have more control over and then change the background gradient to match your other fields.
.gform_wrapper input[type=text], .gform_wrapper input[type=url], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=password], .gform_wrapper textarea {
padding: 10px 8px 8px;
background: #1f1b1a; /* Old browsers */
border: none;
color: #fff;
background: -moz-linear-gradient(top, #1f1b1a 0%, #332e28 76%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f1b1a), color-stop(76%,#332e28)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f1b1a', endColorstr='#332e28',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* W3C */
border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
}In your style.css file, line 150, you have:
input[type=text], textarea {Can you change it to:
input[type=text], textarea,.gform_wrapper input[type=url], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=password]And see if that gets you closer to what you want?
pedro67
Member
wonderful - the first big code worked fine- just the select field is not changing as mentioned.
What do you mean with "enabling the enhanced interface"?
Where to change that?
If I use the the advanced field I just can add some css there
Richard Vav
Administrator
If you edit the drop down field on the properties tab you should find a check box for 'enable enhanced user interface' http://imgur.com/6gdTedv
This will activate a script that will replace the standard drop down with a more developer friendly drop down that is much more customisable. It already has a white/gray gradient background but we can change that to match your darker grey gradient.
Richard Vav
Administrator
Sorry missed that it was part of the address field, so lets go to plan c which involves using the original css but removing the gradient which breaks it, the only problem with it is not all browsers will respect styling drop downs which is why javascript methods are often used.
.gform_wrapper select {
padding: 10px 8px 8px;
background: #1f1b1a; /* Old browsers */
border: none;
color: #fff;
border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
}
Richard Vav
Administrator
You're welcome