Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #938810

    Hello Victoria
    My reply to your last piece of CSS given to me was met with a request to close the thread – which seems strange because my topic was still about Contact Form 7 with (CSS) Enfold Styles.

    Since I was not able to get a reply on that thread I have to start again – which doubles the amount of work.

    I have copied and pasted the ending of your last CSS here and my reply to you and can only hope I find a reply to this. thanks for your help.

    My website page in discussion: you can see the problem here on desktop / wide screen view

    ***** your last reply to me*************

    Hi Pete,

    Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css

    @media only screen and (min-width: 768px) {
    #top .wpcf7-form-control-wrap.your-name input[type=text] {
    width: 95%;

    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    width: 50%;
    float: left;

    }
    .wpcf7-form div + p + p {
    clear: right;
    }

    }
    If you need further assistance please let us know.

    Best regards,
    Victoria

    ****** MY LAST REPLY TO YOU – WHICH WAS CUT OFF WHEN THE THREAD WAS CLOSE******

    Thanks so much Victoria! thats a really clever bit of CSS!

    I’ve set it at 1368px – just wider than iPad pro screen horizontal.
    It works fine apart from a couple of small things:-

    1. On the wide desktop version where the name and email are side by side – the space between that line and the SUBJECT line below seems to be wider than when the 2 fields are stacked on top of each other.

    2. Also on desktop perhaps the gap/padding above the Name/Email line is wider making a large gap between that line on desktop view and the bulleted text above. Ideally I would like the gaps above/below field to be consistent between desktop and mobile.

    3. The CSS you provided to create black field borders is being carried into the Enfold Search field. Is there a way I can restrict this border styling to the CF7 form?

    Here’s the full quick CSS i have for this contact page at the moment including your latest fixes.

    /* CF7 Submit Button CSS Styles */
    .wpcf7 input[type=submit] {
    padding:15px 45px;
    background:#FCE228;
    color:#232323;
    font-size:16px;
    font-weight:bold;
    border:1px solid #232323;
    cursor:pointer;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* CF7 Submit Button CSS Hover Styles */
    .wpcf7 input[type=submit]:hover {
    background-color: #232323;
    color: #FCE228;
    border:1px solid #232323;
    }

    /* CF7 Label Text Styles */
    .wpcf7 label {
    padding: 0 0 10px 0;
    font-size: 20px;
    color:#232323;
    }

    /* CF7 File Upload Button CSS Styles */

    .wpcf7 input[type=file] {
    padding:0px 0px;
    background:none;
    color:#000;
    font-size:14px;
    border:none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* CF7 Input Field Heights */
    .wpcf7 input[type=text] {height:40px;}
    .wpcf7 input[type=email] {height:40px;}

    /* CF7 Input Field border and radius */
    #top .main_color .input-text,
    #top .main_color input[type=’text’],
    #top .main_color input[type=’input’],
    #top .main_color input[type=’password’],
    #top .main_color input[type=’email’],
    #top .main_color input[type=’number’],
    #top .main_color input[type=’url’], #top .main_color input[type=’tel’],
    #top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }

    /* CF7 name and email Fields alongside but not on mobile */
    @media only screen and (min-width: 1368px) {
    #top .wpcf7-form-control-wrap.your-name input[type=text] {
    width: 95%;

    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    width: 50%;
    float: left;

    }
    .wpcf7-form div + p + p {
    clear: right;
    }

    }

    #939048

    Hey premedia,

    I’m not sure what happened to that other thread, I did not close it.
    Anyways,
    To limit the border to only the CF7 use this code instead

    
    #top .main_color .wpcf7 .input-text,
    #top .main_color .wpcf7 input[type=’text’],
    #top .main_color .wpcf7 input[type=’input’],
    #top .main_color .wpcf7 input[type=’password’],
    #top .main_color .wpcf7 input[type=’email’],
    #top .main_color .wpcf7 input[type=’number’],
    #top .main_color .wpcf7 input[type=’url’],
     #top .main_color input[type=’tel’],
    #top .main_color .wpcf7 input[type=’search’], 
    #top .main_color .wpcf7 textarea,
    #top .main_color .wpcf7 select {
    	border-color: #232323;
    	border-radius: 3px;
    	margin-top: 5px;
    }
    

    This code that you asdusted maybe should be starting at 1024px?

     /* CF7 name and email Fields alongside but not on mobile */
    @media only screen and (min-width: 1368px) {
    #top .wpcf7-form-control-wrap.your-name input[type=text] {
    width: 95%;
    
    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    width: 50%;
    float: left;
    
    }
    .wpcf7-form div + p + p {
    clear: right;
    }
    
    }
    

    Like so

     /* CF7 name and email Fields alongside but not on mobile */
    @media only screen and (min-width: 1024px) {
    #top .wpcf7-form-control-wrap.your-name input[type=text] {
    width: 95%;
    
    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    width: 50%;
    float: left;
    
    }
    .wpcf7-form div + p + p {
    clear: right;
    }
    }
    

    Not sure I understand point 2. Can you explain a bit more and/or attach a few screenshots?

    Best regards,
    Victoria

    #939060

    Hi Victoria – Thanks for the info.

    POINT 2.
    Here is the stacked view (mobile viewport) where the vertical gaps between the fields are equal.
    2018-04-09_0949_StackedView.png

    Here’s the desktop / widescreen view – unstacked fields – you can see the vertical gaps are no longer equal since I added the CSS to make the email field sit alongside the name field.
    2018-04-09_0956_desktopview_unstacked.png
    ——-

    I tried the new code you gave me to restrict the borders to the CF7 form only. It worked fine to take the search fields back to the default – but as you can see from the screenshots it also removed the borders from everything but the message text area. Any ideas on how to also fix that?

    Thanks for your help.
    Pete

    #941424

    Hi Pete,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 1024px) {
      #top .wpcf7-form-control-wrap.your-name input[type="text"], 
      #top .wpcf7-form-control-wrap.your-email input[type="text"] {
        margin-bottom: 0px;
      }
      .wpcf7-form div + p, .wpcf7-form div + p + p {
        margin: 0;
      }
    }
    
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #942224

    Hi Victoria – thanks for your latest CSS. See Screenshot below.

    1. The new CSS works great at balancing the vertical gap between fields – but has the side effect of closing the gap above the Send button completely – which was an undesired affect. Any way I can fix this?

    2. As mentioned in last message, the CSS To limit the border to only the CF7 has the effect of leaving a black border around the text area / message field. but the black border style is lost from the NAME and EMAIL fields. Any way I can fix this? I have put a list of my current CSS for this page below the screenshot.

    Thanks, Pete

    https://screencast.com/t/SuebzuyeqP

    CURRENT CSS to match screenshot.
    —————————————–

    /* CF7 Submit Button CSS Styles */
    .wpcf7 input[type=submit] {
    padding:15px 45px;
    background:#FCE228;
    color:#232323;
    font-size:16px;
    font-weight:bold;
    border:1px solid #232323;
    cursor:pointer;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* CF7 Submit Button CSS Hover Styles */
    .wpcf7 input[type=submit]:hover {
    background-color: #232323;
    color: #FCE228;
    border:1px solid #232323;
    }

    /* CF7 Label Text Styles */
    .wpcf7 label {
    padding: 0 0 10px 0;
    font-size: 20px;
    color:#232323;
    }

    /* CF7 File Upload Button CSS Styles */

    .wpcf7 input[type=file] {
    padding:0px 0px;
    background:none;
    color:#000;
    font-size:14px;
    border:none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* CF7 Input Field Heights */
    .wpcf7 input[type=text] {height:40px;}
    .wpcf7 input[type=email] {height:40px;}

    /* CF7 Input Field border and radius */
    #top .main_color .wpcf7 .input-text,
    #top .main_color .wpcf7 input[type=’text’],
    #top .main_color .wpcf7 input[type=’input’],
    #top .main_color .wpcf7 input[type=’password’],
    #top .main_color .wpcf7 input[type=’email’],
    #top .main_color .wpcf7 input[type=’number’],
    #top .main_color .wpcf7 input[type=’url’],
    #top .main_color input[type=’tel’],
    #top .main_color .wpcf7 input[type=’search’],
    #top .main_color .wpcf7 textarea,
    #top .main_color .wpcf7 select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }

    /* CF7 name and email Fields alongside but not on mobile */
    @media only screen and (min-width: 1024px) {
    #top .wpcf7-form-control-wrap.your-name input[type=text] {
    width: 95%;

    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    width: 50%;
    float: left;

    }
    .wpcf7-form div + p + p {
    clear: right;
    }
    }

    /* CF7 name and email Fields alongside but not on mobile */
    @media only screen and (min-width: 1024px) {
    #top .wpcf7-form-control-wrap.your-name input[type=”text”],
    #top .wpcf7-form-control-wrap.your-email input[type=”text”] {
    margin-bottom: 0px;
    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    margin: 0;
    }
    }

    #945459

    Hi Victoria – Any thoughts / ideas / fixes on the above message from me?
    thanks
    Pete

    #946384

    Hi,

    It appears you have managed to fix the border issue.

    To increase the gap above the submit button please add margin top value to the button class.

    Your code should look similar to:

    .wpcf7 input[type=submit] {
        margin-top: 20px;
    }

    Best regards,
    Vinay

    #953417

    hi Vinay / Victoria,

    1. I didn’t really fix the border issue – I just went back to the previous version of the CSS give to me by Victoria – as below. This creates the borders around the contact page fields as needed – BUT it also creates the same border around the search field which is something I don’t want – any idea how I can fix this?

    SOLUTION #1

    /* CF7 Input Field border and radius */
    #top .main_color .input-text,
    #top .main_color input[type=’text’],
    #top .main_color input[type=’input’],
    #top .main_color input[type=’password’],
    #top .main_color input[type=’email’],
    #top .main_color input[type=’number’],
    #top .main_color input[type=’url’],
    #top .main_color input[type=’tel’],
    #top .main_color input[type=’search’],
    #top .main_color textarea,
    #top .main_color select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }

    WHEN I TRIED TO USE THE SECOND BATCH OF CSS, AS BELOW, TO FIX THE SEARCH FIELD – IT HAD THE EFFECT OF TAKING THE BORDER AWAY FROM THE NAME AND EMAIL INPUT FIELDS ON THE CONTACT FORM – SO I SEEM TO BE STUCK BETWEEN TWO CSS SOLUTIONS WHICH ALMOST WORK BUT NOT QUITE.

    SOLUTION #2

    /* CF7 Input Field border and radius */
    #top .main_color .wpcf7 .input-text,
    #top .main_color .wpcf7 input[type=’text’],
    #top .main_color .wpcf7 input[type=’input’],
    #top .main_color .wpcf7 input[type=’password’],
    #top .main_color .wpcf7 input[type=’email’],
    #top .main_color .wpcf7 input[type=’number’],
    #top .main_color .wpcf7 input[type=’url’],
    #top .main_color input[type=’tel’],
    #top .main_color .wpcf7 input[type=’search’],
    #top .main_color .wpcf7 textarea,
    #top .main_color .wpcf7 select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }

    2. The gap above the submit button is made better by VInays code – but should this gap be the same between all responsive views. Currently it seems to change in size between views. I wonder if you have any thoughts on this? NOTE: The gap above summit button was constant for all views before I added Victoria’s CSS to help switch the first two input fields – name and email – to stacked on top of each other when in the narrower mobile view.

    Hope the above makes sense and you are able to help.

    thanks
    Pete

    thanks
    Pete

    #954523

    Hi Pete,

    The form looks totally fine on my end: the border is there and the gaps are there too.

    Could you please clear the cache, check again and get back to us.

    Best regards,
    Victoria

    #954542

    Hi Victoria,
    Yes it looks fine for borders. The issue on point 1. was the CSS you gave me with SOLUTION#1 also creates the same hard black border around the SEARCH field which is something I don’t want – it looks strange. When you gave me the SOLUTION #2 above to fix this search field problem ( – to retstrict the black border to the CF7 only) – then I lost the border on the first two CF7 input fields. So neither SOLUTION#1 or #2 above fully worked for me.
    Maybe I just need to keep the border code I have in SOLUTON#1 and add some CSS code specifically for the Search field CSS to prevent that field from picking up this hard black border as shown below? Any idea how I can fix this? See below.

    https://screencast.com/t/z3ZqwaDIV4h

    The issue with the submit button gap I’ll write about separately below so as not to confuse the two problems.

    thanks

    Pete

    #955273

    Hi,

    Thank you for the update. Do you want to remove the black border of the search bar on the search results page? Please try this css code.

    .search-results #s {
        border: 0 !important;
    }
    

    Let us know if it helps.

    Best regards,
    Ismael

    #956406

    HI Ismael,
    Thanks for that CSS it does work but I prefer to use an alternative solution which is to go back to Victorias original suggestion of CSS to restrict the border #232323 to JUST the Contact Form 7.

    This was the code she gave me ( I called it SOLUTION #2 above).
    ——-
    /* CF7 Input Field border and radius */
    #top .main_color .wpcf7 .input-text,
    #top .main_color .wpcf7 input[type=’text’],
    #top .main_color .wpcf7 input[type=’input’],
    #top .main_color .wpcf7 input[type=’password’],
    #top .main_color .wpcf7 input[type=’email’],
    #top .main_color .wpcf7 input[type=’number’],
    #top .main_color .wpcf7 input[type=’url’],
    #top .main_color .wpcf7 input[type=’tel’],
    #top .main_color .wpcf7 input[type=’search’],
    #top .main_color .wpcf7 textarea,
    #top .main_color .wpcf7 select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }

    ————
    It almost works! The only problem is that for some reason it doesn’t make the borders #232323 on the following fields:-
    -Name
    -Email
    -Subject.

    For some reason it only makes the borders #232323 on the Message field. See screenshot below.

    Can you offer an idea on what CSS is needed to make sure the other fields are also border #232323?
    I have been looking at the inspector but I dont have the skill to find the CSS I need. I’m sure it must be a relatively easy solution?

    Thanks in advance.
    Pete

    here is the page:

    here’s the screenshot.

    https://screencast.com/t/K1wmQHge

    #957341

    Hi,

    It’s the same solution. We just added an additional css declaration to get rid of the search field’s border on the search results page. Add Solution #2 plus the latest suggestion.

    Best regards,
    Ismael

    #957527

    Hi Ismael,
    Thanks for the message. Looking at the CSS for the contact page with CF7 it seems we have the following for the input fields.
    its frustrating that we can’t use the WPCF7 CSS with the other fields as well.

    Name (required) – causes other text input fields in ENFOLD to use this styling
    #top .main_color input[type=’text’],

    Email (required) – WORKS
    #top .main_color input[type=’email’],

    Subject – causes other text input fields in ENFOLD to use this styling
    #top .main_color input[type=’text’],

    Message (required) – WORKS!!
    #top .main_color .wpcf7 textarea,

    ————
    It seems that Solution #2 as we call it has to be used to make the name and subject fields work. But it also makes any other text field input within enfold follow the same styling.

    Here;s what we have:-

    #top .main_color .input-text,
    #top .main_color input[type=’text’],
    #top .main_color input[type=’input’],
    #top .main_color input[type=’password’],
    #top .main_color input[type=’email’],
    #top .main_color input[type=’number’],
    #top .main_color input[type=’url’],
    #top .main_color input[type=’tel’],
    #top .main_color input[type=’search’],
    #top .main_color textarea,
    #top .main_color select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }
    —————

    *I have the search results CSS fix – that works great – thanks.

    *The others input field borders that need to be maintained with the default E1E1E1 border colour are:-

    1. Search field at top right on my NEWS sidebar – See screenshot below.
    2. Any Comment fields on posts, media etc throughout the site. – any ideas on how to do this as well ?

    https://screencast.com/t/kCZRXBCHz

    https://screencast.com/t/AF6Do1N1
    P.S. IS THERE A WAY TO TURN OFF COMMENTS SECTION FOR MEDIA SUCH IS THIS IMAGE ?

    Thanks for all your help.

    Regards
    Pete

    #959574

    Hi,

    Thanks for the update. For the sidebar, add this css code.

    #top .sidebar #s {
        border: 0;
    }

    And this one for the comment field.

    #top #comment {
        border: 0;
    }

    Best regards,
    Ismael

    #959589

    Hi Ismael,
    Thanks for the info. I have everything working now.
    In case anyone else is looking to solve this – listed below I used a combination of your CSS ideas with a few small changes to take all input field borders (apart from the Contact Form 7 borders) back to the default theme colour of E1E1E1. Best regards. Pete

    ———-

    /* Reset all but CF7 Input Fields to default E1E1E1 border*/

    #top .sidebar #s {
    border-color: #e1e1e1;
    }

    #top #s {
    border-color: #e1e1e1;
    }

    #top #comment {
    border-color: #e1e1e1;
    }

    #959739

    Hi premedia,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.