Contact Form 7 with Enfold Styles – Fine tuning the CSS given to me by Victoria

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

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

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

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

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

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;
}