Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #11732

    I just updated my theme to version 1.3, and need to fix some modifications that I had made prior.

    On my homepage I have added the search bar along with social icons – the color for the search bar “magnifying glass” matches my theme color (which is blue).

    On other pages, the search bar “magnifying glass” is white – how can I change the color of the search button “magnifying glass” so it matches my theme color on all of the site pages?



    Hi Mark,

    On your images > layout folder, look for icon-search.png. Kindly supply a blue magnifying glass with the same width and height. :)




    Thanks – now, f I wanted to reverse the process and have the search bar “magnifying glass” be white on the home page (as it is with all of the other pages), where would I make that change?


    Hi Mark,

    If you’re referring to the background color then you would add the code below to your custom.css or Quick CSS.

    #main .content #searchsubmit {
    background-color: #FFFFFF !important;

    If you’re referring to the icon itself then you would replace icon-search.png in the images > layout folder with a white magnifying glass.

    Hope this helps!




    Hi Mya and Ismael,

    I appreciate your help, but let me please start over.

    – The search bar “magnifying glass” appears as a blue color (this is what I have set the Highlight color, Socket color, and Primary color to) on my main homepage and 404 error page. On all other pages it is white.

    – I’m using the Template builder’s search bar with social icons on the Frontpage.

    – The search bar “magnifying glass” icon-search.png in the layout folder is white, and I’m not sure why it appears blue on some pages and white on other pages.

    – I just want to have a consistent look page to page. Where can I change the code so that I have one color (at this point I’d be happy with the white default color)? Thanks!


    Hi, I thought it might be helpful if I provided a link to a screen capture of what is happening. I hope that this helps :-)


    When I replaced the icon-search.png at the same size of the original file (24×24) it looks fine on the home page, but it gets resized smaller on the other pages for some reason. If you know of anyone that I can hire to fix this, please let me know. Thanks!


    I fixed by adding the following to the css in theme option:

    .content #searchsubmit{background-color: #F8F8F8!important;margin-top: 1px!important;margin-right: 1px!important;}


    Hi mark,

    We’re glad that you were able fix it. :) I’ll close this topic then.



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

The topic ‘Change Search Button Color’ is closed to new replies.