Public Ticket #345888
How change color of search icon or search box ?


  • michele started the conversation


    The search box in the top menu area is hard to see.  I would like for the box to be grey and the search icon be white.  I would also like to change the text on the far right to be bigger and white instead of grey so easier to read.

    Thanks for your help.

  •  116
    Charles replied

    Hi Michele

    You can customize this search icon with a little custom CSS to add your own image. For example:

    /* Default State */

    #section-tophat .search input.field {
    background-image: url("../images/theme/search.png") !important;

    /* Focus State */

    #section-tophat .search input.field:focus {
    background-image: url("../images/theme/search.png") !important;

    And swap out the urls with your own. I've provided you with the original and a quick white option for the default state if it helps. If you have Photoshop, you can just hit blend options for the layer and add a cover overlay, then duplicate the layer based on how pronounced/strong you want the png.


  • michele replied

    Thanks for your help. I was able to resolve the issue.

  • michele replied


    Where and how do I change the mobile and tablet layout for the Campus theme?


    PS - My purchase was verified but I was still unable to submit a new ticket thus asking here

  •  116
    Charles replied

    Hi Michele, I responded to your other ticket. Let's keep this going over there.