-
Posts
-
Hello, is there a shortcode to change the opacity of the contact form text fields. They are currently solid white and I would like to make them about 50% so the background image can show through.
Thank you!
SHey exposureclothing,
This can be done via css. Please provide a link to the site/page in question so we can look into this further.
Best regards,
Jordan ShannonHello Jordan, thanks for the quick reply. You can see the solid white in the fields, https://www.boxerbuilding.com/contact-us/
I would like to be able to drop that to a .7 or .6 in opacity. I was playing around with the contact css in editor but it didn’t work.
ThanksHello again Jordan. Here are some changes I made in this file Enfold: contact.css (config-templatebuilder/avia-shortcodes/contact/contact.css)
but for some reason it is not working.Starts at line 232
/*custom form colors*/
#top .av-custom-form-color *{color:inherit;}
#top .av-custom-form-color a{text-decoration: underline;}
#top .av-custom-form-color ::-webkit-input-placeholder { color: inherit; opacity: 0.4;}
#top .av-custom-form-color ::-moz-placeholder { color: inherit; opacity: 0.4; }
#top .av-custom-form-color :-ms-input-placeholder { color:inherit; opacity: 0.4;}
#top .av-custom-form-color .button{border: 2px solid;}
#top .av-custom-form-color .button:hover{}#top .av-light-form, #top .av-light-form + .ajaxresponse *{color:#fff;}
#top .av-light-form + .ajaxresponse .avia-form-success{background: rgba(255,255,255,0.4); }#top div .av-light-form .input-text, #top div .av-light-form input[type=’text’], #top div .av-light-form input[type=’input’], #top div .av-light-form input[type=’password’], #top div .av-light-form input[type=’email’], #top div .av-light-form input[type=’number’], #top div .av-light-form input[type=’url’], #top div .av-light-form input[type=’tel’], #top div .av-light-form input[type=’search’], #top div .av-light-form textarea, #top div .av-light-form select, div div .av-light-form .button{
color: #fff;
border-color: #fff;
border-width: 2px !important;
background-color: rgba(255,255,255,0.4);
}#top .av-dark-form, #top .av-dark-form + .ajaxresponse *{color:#ffffff;}
#top .av-dark-form + .ajaxresponse .avia-form-success{background: rgba(255,110,14,0.4); }#top div .av-dark-form .input-text, #top div .av-dark-form input[type=’text’], #top div .av-dark-form input[type=’input’], #top div .av-dark-form input[type=’password’], #top div .av-dark-form input[type=’email’], #top div .av-dark-form input[type=’number’], #top div .av-dark-form input[type=’url’], #top div .av-dark-form input[type=’tel’], #top div .av-dark-form input[type=’search’], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button{
color: #222;
border-color: #222;
border-width: 2px !important;
background-color: rgba(255,255,255,0.4);
}Hi,
Thanks for the update. Please try the following in Quick CSS under Enfold->General Styling:
#top .main_color input[type='text'] { background-color: rgba(255,255,255, 0.7); }I would suggest that you don’t change the core CSS files of the them, since it’s going to be overwritten on updates. Please add your custom CSS to Quick CSS. If they don’t apply, then make sure that the option to delete the old CSS and JS files is active under Enfold->Performance.
Best regards,
RikardHello Rikard, for some reason it is not working. I notice there is no reference to the contact form in the code you sent me, should there not be an avia reference? This is for only the text fields in the contact form that I want to change the opacity in. I appreciate yours and all others help like always.
Cheers
- You must be logged in to reply to this topic.