Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #508116

    Forms – unable to change the background color of the fields.
    I’m in the wp-admin > enfold > general styling > Quick CSS.
    I’ve made other changes in there before that take.

    This is what I’m trying to change:

    #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: #000000;
        background-color: #595959;
        color: #808080;
    }

    ^ I got that from F12 in Chrome. Refreshed, reloaded.
    Viewed in FF – same thing.
    Emptied cache, same thing.

    This is what I have in the Quick CSS area of the wp-admin:

    input, input[type='text'] {color:#333;background:#fff;}
    .entry-content p {font-size:110%;}
    .av_one_half  {font-size:90%;}
    .av_one_third {margin-left:3%;}
    #avia-menu a:link, #avia-menu li a:visited {color:#efefef;}
    * .ls-container .ls-bottom-nav-wrapper {visibility:hidden;display:none;}
    .title_container .main-title {color:#efefef;font-family: "'Ubuntu', sasns-serif;font-size:48px;font-weight:700;padding-bottom:15px;}
    .content {padding-top:0px;}
    #top #main .sidebar,  {border-left:1px solid  #d6d4d1;}
    .entry-content-wrapper div li {list-style:square;list-style-position:inside;line-height:1.8em;}
    .menu {text-transform:lowercase; }
    .main_color .sidebar {color:#efefef;}
    div.wpcf7-response-output {font-size:2em;}
    span.avia-menu-text {border-right:1px solid #d6d4d1;padding-right:14px;padding-top:10px;padding-bottom:10px;border-top:0px;border-bottom:0px;border-left:0px;font-weight:700;}
    .  (Purchase code hidden if logged out)  {margin:2px;}
    .header_color .main_menu ul:first-child  a {color:#fff;}
    <strong>#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  {background-color:#efefef;background-color:#efefef;}</strong>
    .title_container .main-title {line-height:115%;}
    @media only screen and (max-width: 501px)
    {
     .entry-content p {font-size:1.5em;line-height:115%;}
    }
    

    ———————
    The other elements work fine. Trying to change all of the form input fields to be #efefef background is not working.
    Any suggestions as to why it is not coming in as I stated?

    #508538

    Hey AccelerateMe!

    try to add an !important into your code:

    #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: #000000 !important; 
        background-color: #595959 !important;
        color: #808080 !important;
    }
    

    Best regards,
    Andy

    #508539

    Hey AccelerateMe!

    Try using the !important override like so.

    input[type="text"], input[type="email"], textarea {
        background: red !important;
    }

    Cheers!
    Elliott

    #802789

    Hi there
    I used similar code, below, but for some reason the fields that are required do not change to #666. This links to a PHP file and an external DB and I even tried to create an inline class called requiredFields to style in the PHP but nothing seems to make a change. Any ideas?

    #top .main_color .input-text,
    #top .main_color input[type='text'],
    #top .main_color input[type='input'],
    #top .main_color textarea,
    #top .main_color select {
        border-color: #666 !important; 
        background-color: #fff !important;
        color: #666 !important;
    }
    #802965

    Hi,

    Your site is password protected.

    Best regards,
    Rikard

    #803171

    Oh, sorry, but I have it figured out!
    Digging very deeply there’s some browser specific code that makes it work! This took ages to find so hopefully this helps someone else.

    .main_color input::-moz-placeholder { /* firefox newer */
    	color: #ec1b24 !important;
    }
    
    .main_color input::-webkit-placeholder { /* Chrome/Opera/Safari */
    	color: #ec1b24 !important;
    }
    
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    	color: #ec1b24 !important;
    }
    	
    ::-moz-placeholder { /* Firefox 19+ */
    	color: #ec1b24 !important;
    }
    	
    :-ms-input-placeholder { /* IE 10+ */
    	color: #ec1b24 !important;
    }
    	
    :-moz-placeholder { /* Firefox 18- */
    	color: #ec1b24 !important;
    }
    #803174

    Here’s a great artcile about it –

    #803176

    Oops –

    #803179

    Hi,

    Great Job. Thanks for sharing the solution, we appreciate it and thanks for using Enfold :)

    Best regards,
    Nikko

    #803191

    This took me ages so I’m happy to help everyone out!!!! :)

    #803287

    Hi,

    Glad you got it working and thanks a lot for sharing, much appreciated :-)

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.