CSS for begginers « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

shtul
Member
Im trying to write css for my website,
http://doarna.com/%D7%93%D7%95%D7%90%D7%A8-%D7%A0%D7%A2/#gf_3
It suppose to design the checkboxes but unfortunly when I put it in advenced tab it doesnt work.
For making it work I just wrote it for each checkbox, but I suppose to have many of them so doing it without classes is impposbile.

example of my css code is:
```
[css]
.DesignCheckBox label{background-repeat: no-repeat;
 		       border: 1px solid #DDD;
                       height: 180px;}
```
I also want to add hover property, is it possible to put in the same class or should I give it class of its own. The syntax below works but I need it as class.
```
[css]
 li.gchoice_4_1 label:hover {
 		        border: 1px solid  #EE0000;
                       }
```
Thanks for your help.
Posted 12 years ago on Thursday September 27, 2012 | Permalink
Chris Hajer
Key Master
In general, to apply one style to many elements with the same class, you enter the CSS class name on the advanced tab, then you create a style using that class, and insert the code into your theme's stylesheet so the class can be used over and over.

I see the custom class DesignCheckBox added to one of the list items.
```
<li id='field_3_4' class='gfield    HideCheckBox gf_list_5col DesignCheckBox' style='display:none;'>
```
The next step is to add that class to your rule. Something like this
```
[css]
body .gform_wrapper ul li.DesignCheckBox label {
```
Have you tried that already?
Posted 12 years ago on Friday September 28, 2012 | Permalink
shtul
Member

Yes I did, and it doesnt seem to work.
screenshot are attacehd and Im sure you will be able to figure out what I have done wrong.
Thanks.

http://picturepush.com/public/10309524

Posted 12 years ago on Friday September 28, 2012 | Permalink
Chris Hajer
Key Master

Are these styles live on your site? It will be difficult to tell from the screenshot what is happening. Please confirm the changes are live so we can test it on your site.

Posted 12 years ago on Friday September 28, 2012 | Permalink
shtul
Member

it does.
go to second step.

Posted 12 years ago on Friday September 28, 2012 | Permalink
shtul
Member
Hi,
Im sorry about being so griper but as I try more things, its getting weirder...

This is my code now:
```
[css]
 body .gform_wrapper ul li ul.gfield_checkbox li {text-align:center!important}
 body .gform_wrapper ul li.DesignCheckBox label {
 		       background-repeat: no-repeat;
 		       border: 5px solid #DDD;
                       height: 150px!important;
                       font-size: 200%;
                       color: #002448;
                      // text-align:center;
                       // rounded corner
                       -moz-border-radius: 20px;
                       -webkit-border-radius: 20px;
			border-radius: 20px;
			-khtml-border-radius: 20px;
                                              }
```
And for some reason because I added this line it works almost perfect:
body .gform_wrapper ul li ul.gfield_checkbox li {text-align:center!important}

Its weird!!!
1. It doesn't obey this line (text-align:center!important doesn't work and it still right aligned)
2. Without this line the class .DesignCheckBox doesn't work
3. Its work but also the field label got the style (http://picturepush.com/public/10385206).

Again sorry about that, but for some reason thing doesn't work for me.

Thanks a lot.
Posted 12 years ago on Saturday September 29, 2012 | Permalink
shtul
Member

Half solved...
1st & 2nd problem occurs because I had this line before
// Gravity Form
for some reason it didn't ignore it, when I changed it to :
/* Gravity Form */ it solved. I don't understand why but who cares now :)

Now only the 3rd problem left...
Any suggestion?

Thanks in advance

Posted 12 years ago on Sunday September 30, 2012 | Permalink
Chris Hajer
Key Master
This is not a valid CSS comment:
```
[css]
// Gravity Form
```
This is:
```
[css]
/* Gravity Form */
```
Sorry if I posted a comment with that syntax previously. I did not intend to do that.
Posted 12 years ago on Monday October 1, 2012 | Permalink
Chris Hajer
Key Master

What problem do you need help with now? Please post the single question in your next reply. Thank you.

Posted 12 years ago on Monday October 1, 2012 | Permalink
shtul
Member

When I use thee css code:
body .gform_wrapper ul li.DesignCheckBox label {

it works also on the title and not only the chcekboxes as you can see here.
http://picturepush.com/public/10385206

Thanks

Posted 12 years ago on Monday October 1, 2012 | Permalink
Chris Hajer
Key Master

I'm not sure if I mentioned it before, but you have some additional output in your form which is not being put their by Gravity Forms. It's typically added by themes which include the [raw] shortcode. The inclusion of that functionality affects the output of all shortcodes, including the [gravityform] shortcode. See this screenshot. The items highlighted in yellow should not be there: http://minus.com/lMLIIzmknfynR

The fix is to remove the function which provides this functionality, because it has negative side effects. The work around is to wrap the [gravityform] shortcode in the [raw][/raw] shortcode.

That may fix some problems or at least prevent some down the line.

Posted 12 years ago on Tuesday October 2, 2012 | Permalink
shtul
Member

gr8.

Thanks for your awsome support!

Posted 12 years ago on Tuesday October 2, 2012 | Permalink
Chris Hajer
Key Master

Awesome. Thank you for the update.

Posted 12 years ago on Tuesday October 2, 2012 | Permalink

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