WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Contact Form 7: Style Issue (13 posts)

  1. Paul
    Member
    Posted 9 months ago #

    Hi everyone,

    Having a bizarre issue with Contact Form 7 plugin. One of the entry fields is styled differently to the rest.

    I've played around with the CSS for the rest of the site regarding box-shadow and borders, but even when I remove all CSS, it remains the same.

    Anyone have any ideas?

    Thanks in advance.

  2. wp-21
    Member
    Posted 9 months ago #

    Hi,
    Its'simple as you have styled other input types as visible from the line 208 in your style.css

    the one field that you are talking about is input[type="email"]
    which you have to add to the 208th line like the rest to have it styled like the other fields, currently there is no style definition for that so its appearing as it is now.

  3. Paul
    Member
    Posted 9 months ago #

    Thanks for getting back to me.

    I'm still confused. Even when I delete every single line of my custom CSS, the problem persists. I don't even know how I've styled the other parts as I have. I thought it was the following CSS:

    .entry, #respond, {
    border-bottom: none;
    box-shadow: none;
    border-radius: 5px;
    }

    But when I delete that and update, it remains the same.

    Help!

  4. wp-21
    Member
    Posted 9 months ago #

    In your style.css file on line 208 you have:

    input[type="text"],input[type="password"], textarea {
        background: none repeat scroll 0 0 #FCFCFC;
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05) inset;
        color: #999999;
        font-family: "Droid Sans",sans-serif;
        font-size: 13px;
        padding: 1.5%;
    }

    you just need to add input[type="email"] in between this like:

    input[type="text"],input[type="email"],input[type="password"], textarea {
        background: none repeat scroll 0 0 #FCFCFC;
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05) inset;
        color: #999999;
        font-family: "Droid Sans",sans-serif;
        font-size: 13px;
        padding: 1.5%;
    }

    that will style your email field also similar to the others.

  5. Paul
    Member
    Posted 9 months ago #

    Well spotted! That was an issue with the parent them CSS file, not my own - hence me struggling to find it.

    Thanks, appreciate your help.

  6. wp-21
    Member
    Posted 9 months ago #

    cheers..:)

  7. wp-21
    Member
    Posted 9 months ago #

    Pls close this thread if the issue is resolved

  8. Paul
    Member
    Posted 9 months ago #

    Resolved.

  9. kstewart0976
    Member
    Posted 9 months ago #

    I am having a similar issue as above, but it is within the Contact 7 form that is inserted within UberMenu

    http://norvelltanning.com/temp2013/here/

    Under the "About Us" tab in the main navigation.

    The Email field is too long and is not formatting correctly, and I cannot for the life of me figure out where to add the code to override the format of the "email" field.

    Any assistance would be greatly appreciated.

    Thank You
    Kristi

  10. wp-21
    Member
    Posted 9 months ago #

    Hi,
    Its' the same issue here also../you have not specified any style for
    input[type="email"]
    that is why email field is appearing un-formatted.
    Define a style in your stylesheet of child theme alongside input[type="text"] and you will be good to go...

    Cheers..:)...

  11. Paul
    Member
    Posted 9 months ago #

    Yep, looks exactly like the problem I had... What theme are you using?

    Try the advice I was given... add

    input [type="email"]

    to the relevant line of CSS. The thing that confused me initially was that it was the parent theme code that was incorrect, not my child theme (as I expected), so make sure you check that!

    Hope that helps.

  12. kstewart0976
    Member
    Posted 9 months ago #

    ok so I have added the following to the style.css and the custom_styles.php

    .widget input[type=email],

    and it is now formatted correctly, but the border is a different color and I cannot for the life of me figure out why it is yellow and the others are grey... any thoughts?

    About Us tab in ubermenu
    http://norvelltanning.com/temp2013/here/

  13. wp-21
    Member
    Posted 9 months ago #

    Hi the border color for all the input boxes is coming from line 991 of basic.css file.
    You have to add input[type="email"] there also to change the yellow border for the email field.
    that should solve your problem.

    cheers..:)..

Reply

You must log in to post.

About this Topic