Home › Forums › Free Themes › Education Hub › Change Color for Site Search Button and Hover

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 15, 2018 at 9:31 am #77670
    Derek Stadler
    Participant

    Hi!

    How do I change the orange color of the site search button and the blue hover? I tried custom CSS and the color options in the Customize section but haven’t been able to change either.

    Thanks,
    Derek

    August 15, 2018 at 11:58 pm #77698
    wensolutions
    Keymaster

    Hello @derekstadler,

    To change the color of the site search button please add below given CSS.

    .search-form .search-submit{
    background-color: #71ca1c;
}

    Now to change the hover color of the button use below give CSS.

    .search-form .search-submit:hover {
    background-color: #2196F3;
}

    You can change the color code as per your requirement.

    Hope this helps.

    Regards!!

    August 16, 2018 at 6:50 pm #77743
    Derek Stadler
    Participant

    Thank you very much!!!

    August 16, 2018 at 11:25 pm #77746
    wensolutions
    Keymaster

    Hello @derekstadler,

    Glad we could help you.

    If you have any issues further then please let us know.

    Thank you.

    Best Regards!!

    August 17, 2018 at 6:38 am #77772
    Derek Stadler
    Participant

    Hi!

    I added the code that you provided but it didn’t change the color. Just to recap, I am referring to the site search widget in the footer.

    Thanks,
    Derek

    August 17, 2018 at 7:09 am #77779
    wensolutions
    Keymaster

    Hello @derekstadler,

    Can you please provide your site URL so that we can provide the precise fix.

    Thank you.

    Regards!!

    August 17, 2018 at 7:33 am #77782
    Derek Stadler
    Participant

    Sure: http://18.232.149.139/

    It’s the site search in the lower right corner of the footer.

    Thanks,
    Derek

    August 17, 2018 at 7:42 am #77783
    wensolutions
    Keymaster

    Hello @derekstadler,

    Please replace above given CSS with the CSS given below:

    #footer-widgets .search-form .search-submit{
    background: #c4262e;
}

#footer-widgets .search-form .search-submit:hover{
    background: #2a5d84;
}

    Hope this helps.

    Regards!!

    August 17, 2018 at 8:05 am #77784
    Derek Stadler
    Participant

    Perfect!

    Thanks for all your help,
    Derek

    August 17, 2018 at 8:13 am #77786
    wensolutions
    Keymaster

    Hello @derekstadler,

    Glad to help you.

    If you have any issues further, please let us know.

    Thank you.

    Regards!!

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