CSS tweak for Thesis (and other themes) please?

Gravity Support Forums » Plugin Support » Gravity Forms

RichardBest
Member

Hi there - I'm just trialling Thesis and see you added some Thesis-specific CSS in 13.2 (which is great - thanks - given what Thesis was doing to GF before).

I'm hoping you can help with a minor CSS tweak please. I was also experiencing this on on other themes, including TwentyTen, but on Thesis it's more pronounced.

The issue is this: when a radio button or click box item spans more than one line, the second and subsequent lines are not indented, i.e., they don't sit flush with the starting words of the item. Is it possible to make a minor CSS tweak to correct this please? I can do it if you give me a steer...

Many thanks
Richard

Posted 13 years ago on Monday July 5, 2010 | Permalink
RichardBest
Member

Sorry - just one more thing. Would it also be an easy fix to make the radio buttons and check boxes sit flush left (like with the TwentyTen theme), rather than indented a bit?

Thanks for any help
Richard

Posted 13 years ago on Monday July 5, 2010 | Permalink
Kevin Flahaut
Administrator

Richard, try adding this to your Thesis custom.css file

[ REMOVED - see updated CSS in subsequent post ]

That should give you the result you're looking for. I tested it on a default Thesis 1.7 install.

Test Screenshot

I guess I'm not seeing your issue with the indentation on the radio buttons or checkboxes. Mine look like they're left aligned properly. I would have to see your actual form page to be able to give you any real direction on that.

Posted 13 years ago on Monday July 5, 2010 | Permalink
RichardBest
Member

Thanks very much Kevin. Much appreciated. What I see in your screenshot is precisely what I'm trying to achieve.

When I add the code you've provided, the indentation issue is fixed. However, the radio buttons and check boxes are all replaced with a small round circle.

Here are some screenshots (first one shows what should be radio buttons, second one shows what should be checkboxes): http://grab.by/5ho0 and http://grab.by/5hob

Do you have any idea what might be causing that please? In case it helps to trouble shoot, I'm running GF v 13.2, WP 3.0, and have the Output CSS in GF settings turned on (i.e., "Yes").

Many thanks for your help. Much appreciated.

Richard

P.S. I just did a test in Safari (MAC v 5.0); the buttons/checkboxes don't appear at all: http://grab.by/5hqc

P.P.S. Sorry, one more thing... . I just compared Firefox and Safari without the code you've suggested. The margin/padding issue is not so pronounced with Safari. Overall, I'm most interested in the indentation of the second and subsequent lines of checkbox and radio button items. If trying to achieve perfection across browsers on the flush left issue is a problem, we could not ignore that and just focus on the indentation. Many thanks.

Posted 13 years ago on Monday July 5, 2010 | Permalink
Kevin Flahaut
Administrator

Richard, I'm going to need to see your live form to be able to debug any further. I tested on a default Thesis install and it worked okay. It's most likely inheriting from your custom theme CSS somewhere.

If you can post a URL that would be great. I can get a lot further actually seeing the behavior. If you'd prefer to email me the URL, that's fine, you can send it to kevin @ rocketgenius.com and I'll look at it as soon as I can.

Posted 13 years ago on Tuesday July 6, 2010 | Permalink
RichardBest
Member

Thanks Kevin. I really appreciate your help with this. I've sent you an email.

Cheers
Richard

Posted 13 years ago on Tuesday July 6, 2010 | Permalink
Kevin Flahaut
Administrator
So, after tinkering with the CSS snippet I proposed before, I decided this is probably a better approach.. added to my Thesis custom.css file.
```
.gform_wrapper .gfield_checkbox li, .gform_wrapper .gfield_radio li {display:block; overflow:auto;}
.gform_wrapper .gfield_checkbox li label,.gform_wrapper .gfield_radio li label {width:95%; float:right; padding:0 0 3px 0;}
```
It works well in all the browsers I tested.

test screenshot

It should work in most other themes as well.. there's nothing really Thesis specific in these rules.
Posted 13 years ago on Wednesday July 7, 2010 | Permalink
photoads
Member
I always use this css in the custom.css for thesis themes
```
/* Formats form fields properly*/
.format_text input {
width:auto;
}
```
Posted 13 years ago on Friday July 9, 2010 | Permalink

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