Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 22, 2016 at 7:37 pm #602079
    ppi37

    Hi,
    I tried to style a field with Contact Form 7
    I follow the tutorial of the author : http://contactform7.com/styling-contact-form/
    but it doesn’t seems to work with ENFOLD theme.

    I add an id in the form tag, like this :
    <p>Very special field :<br />
    [text* text37190 id:very-special-field]</p>

    then I add the following CSS code in the quick CSS of the ENFOLD theme

    #very-special-field
    {
        color: #f00;
        border: 1px solid #f00;
    }

    and the default style of the field don’t change .

    I don’t understand why ?????

    Thanks

    March 22, 2016 at 9:37 pm #602132
    Vinay

    Hey ppi37!

    If you are trying to style cf7 form similar to enfold form please try the following https://kriesi.at/support/topic/contact-form-7-enfold-contact-form-identical-styling/#post-568434

    Best regards,
    Vinay Kashyap

    March 23, 2016 at 8:36 am #602387
    ppi37

    Hi Vinnie,
    Yes, I would like.
    So I tried to follow your post.
    I create a CF7 form wrapped into <div id=”cf7-contact-form”></div>
    I add the following Quick CSS
    #cf7-contact-form .wpcf7 .col-50p {
    width: calc(50% – 5px);
    display: inline-block;
    margin-right: 10px!important;
    }
    #cf7-contact-form .wpcf7 .col-50p.fright {
    float: right!important;
    margin-right: 0px!important;
    }

    @media only screen and (max-width: 480px) {
    #cf7-contact-form .wpcf7 .col-50p {
    width: 100%;
    display: block;
    margin-right: 0px!important;
    }
    }

    And after, what do I have to do ?

    Thanks

    March 26, 2016 at 11:09 am #603798
    Andy

    Hey!

    use this code instead:

    input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
width: 50% !important;
display: block !important;
margin-right: 10px !important;
}
input.wpcf7-form-control.wpcf7-text {
width: 50% !important;
display: block !important;
margin-right: 10px !important;
}
input#dp1458982861414 {
width: 50% !important;
display: block !important;
margin-right: 10px !important;
}
textarea.wpcf7-form-control.wpcf7-textarea {
width: 50% !important;
display: block !important;
margin-right: 10px !important;
}

    and adjust as needed.

    Best regards,
    Andy

    March 30, 2016 at 5:14 pm #605297
    ppi37

    Hi Andy,
    thanks for your CS code

    2 questions :

    input#dp1458982861414 {
    width: 50% !important;
    display: block !important;
    margin-right: 10px !important;
    }
    this code is for what field ?

    And can you give me the CSS code for the date input ?

    Thanks

    March 30, 2016 at 7:11 pm #605386
    Andy

    Hey!

    please check it out by yourself by using “display: none !important;” for example.

    Here you go:

    input#dp1459357837117 {

}

    Cheers!
    Andy

    March 31, 2016 at 8:59 am #605714
    ppi37

    Hi Andy,
    I did what you asked, but nothing changed.
    Never mind.

    What I want to do is simple.
    I just want to style a specific field, but just one. Not all the text input fields.

    For example.
    If I want to style the following date input field
    <p>Date :<br />
    [date date-575 id:test-date class:test-date-class size:10 maxlength:10 date-format:dd/mm/yyyy first-day:1] </p>

    I put an id and a class to style it.

    What is the Quick CSS code to style it for exemple to 30 % ?

    Thanks

    March 31, 2016 at 10:02 am #605743
    Vinay

    Hi!

    The description is not clear what you are trying to achieve even tho you have mentioned you like to target a single element please choose the unique class name by right click and inspect the element

    To add a red border around the date picker use the css below

    .hasDatepicker {
border: 2px solid red ;
}

    Regards,
    Vinay

    March 31, 2016 at 11:27 am #605792
    ppi37

    Hi Vinnie,
    I think I found a solution for what I want in CF7 (columns and possibility to change the size of the field when only 1 column)

    To change the size
    in the CF7 form
    <div class=”largeur47pourcent”>
    <p>Téléphone :<br />
    [tel tel-lieu]</p>
    </div>
    and in the Quick CSS
    .largeur47pourcent {
    width: 47% !important;
    display: block !important;
    }

    and When I need 2 columns
    in the CF7 form
    <div class=”flex_column av_one_half first”>
    <p>Code Postal:<br />
    [text* cp]</p>
    </div>

    <div class=”flex_column av_one_half”>
    <p>Ville :<br />
    [text* ville]</p>
    </div>

    What do you think about it ?
    it seems to work…

    Thanks

    March 31, 2016 at 1:31 pm #605869
    Vinay

    Hey!

    Great! you found a work around… I checked the site in both desktop and mobile version and in both it looks neat!

    please feel free to get in touch with us if you have any questions…

    Thank you for using Enfold :)

    Cheers!
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.