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.

Form CSS Issue?

  1. I am using Re-Brand, a theme from otwthemes.com sold on ThemeForest and my forms are being put out with some funny CSS quirks - mostly the dotted lines and the list arrows to the left:

    http://greatleapstudios.com/test/content-package-order/

    Any thoughts on why this is happening and the best way to fix it?

    Here is the CSS for the theme:

    http://greatleapstudios.com/test/wp-content/themes/rebrand/style.css

    Any help is much appreciated :)

    Posted 12 years ago on Friday September 7, 2012 | Permalink
  2. Most of your issue is coming from the label rule on line 202 of your style.css file.

    [css]
    label {
        background: url("images/dash.png") repeat-x scroll left bottom transparent;
        color: #252525;
        cursor: pointer;
        display: block;
        float: left;
        line-height: 18px;
        margin: 6px 16px 0 0;
        padding: 0 2px 5px;
        text-align: right;
        width: 120px;
    }

    Also, the custom rule on line 332

    [css]
    .gform_wrapper .top_label .gfield_label {
        display: block;
        float: left;
        margin: 5px 0 4px !important;
        padding-right: 20px;
        width: 100px;
    }

    That's adding the dashes that you see and is overriding the default "top label" form settings. It's also forcing the weird label width. You should be able to remove those blocks from your CSS and see an immediate improvement in your form layout.

    Line 652 adds the bullet "arrow" image that you see.. if you remove or override that then you can get rid of the bullet

    [css]
    .entry ul li {
        background: url("images/menu-bullet-right.png") no-repeat scroll left 7px transparent;
        list-style: none outside none;
        margin: 0;
        padding: 0 0 0 14px;
    }

    if you don't want to remove it, adding this to the end of your theme stylesheet should override it.

    [css]
    .entry .gform_wrapper ul li {
        background: none!important;
        background-image: none!important;
        padding-left: 0!important;
    }

    lastly, removing the rule applied to the span on line 655 will get rid of the last dashes (background image) being applied.

    [css]
    .entry ul li span {
        background: url("images/dash.png") repeat-x scroll left bottom transparent;
        display: block;
    }

    test screenshot: http://bit.ly/PbJUzh

    Good luck with it.

    Posted 12 years ago on Saturday September 8, 2012 | Permalink
  3. Dude, you are awesome - that fixed it perfectly. I was nowhere near finding all of the conflicts. Thanks!

    Posted 12 years ago on Monday September 10, 2012 | Permalink
  4. Thank you for the update. Glad that worked for you.

    Posted 12 years ago on Monday September 10, 2012 | Permalink

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