PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

CSS tweak for Thesis (and other themes) please?

  1. RichardBest

    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

    Posted 9 years ago on Monday July 5, 2010 | Permalink
  2. RichardBest

    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

    Posted 9 years ago on Monday July 5, 2010 | Permalink
  3. 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 9 years ago on Monday July 5, 2010 | Permalink
  4. RichardBest

    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): and

    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.


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

    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 9 years ago on Monday July 5, 2010 | Permalink
  5. 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 @ and I'll look at it as soon as I can.

    Posted 9 years ago on Tuesday July 6, 2010 | Permalink
  6. RichardBest

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


    Posted 9 years ago on Tuesday July 6, 2010 | Permalink
  7. 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 9 years ago on Wednesday July 7, 2010 | Permalink
  8. photoads

    I always use this css in the custom.css for thesis themes

    /* Formats form fields properly*/
    .format_text input {
    Posted 9 years ago on Friday July 9, 2010 | Permalink

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