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.

Minor styling issue

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Athen
    Member

    Hi there!

    Love the form, so clever ;)

    I have a issue on my site, all the fields are styled correctly, except two fields? I really don't get it, have been looking with firebug, but cannot find anything making a difference?

    Have a look: http://aspeakers.ondesign.dk/speakers/soulaim-gourani/ (bottom of page)

    Posted 13 years ago on Wednesday October 5, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    Those are the HTML 5 field types ( tel & email ) and it looks like your theme doesn't have styles for them. You can either turn off the HTML5 option in your form settings, or edit the existing style rules to your theme stylesheet to support them.

    starting around line 110 of your style.css file has this..

    [css]
input[type="text"],
input[type="password"],
textarea {
    background-color: #F6F6F6;
    border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
    padding: 9px 12px;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    background-color: #FFFFFF;
}
    Copy

    you can edit that and add the new input types to the rule like this..

    [css]
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
    background-color: #F6F6F6;
    border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
    padding: 9px 12px;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
    background-color: #FFFFFF;
}
    Copy

    That should get you rolling..

    screenshot: http://bit.ly/pccIk3

    Posted 13 years ago on Wednesday October 5, 2011 | Permalink

  3. Athen
    Member

    Nice! ;)

    Posted 13 years ago on Wednesday October 5, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    Oh, I just noticed that you're using a WooTheme so you might have to add those new rules to the end of your custom.css file rather than editing the style.css file. I think they discourage editing the default and provide the custom.css just for that purpose.

    Posted 13 years ago on Wednesday October 5, 2011 | Permalink