• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 search magnifying glass

swatme

Well-known member
#1
Hi

May i know where can i modify the magnifying glass button for search?
I want to add few text beside it the magnifying glass and also change the graphics if possible.

tmp_20474-2016-03-11 18.03.15-1165775382.png


Thanks
 

rafass

Well-known member
#2
I always do all those changes with EXTRA.css.
ie, if you want to add some image, you can use something like:
Code:
#QuickSearchPlaceholder {
background: rgba(0, 0, 0, 0) url('route-of-your-image/emoji.png') no-repeat center!important;
background-size: contain!important;
}
And this is the result:
Screen Shot 2016-03-11 at 2.34.20 PM.png

you also can do the same using FA icons. with something like:
Code:
#QuickSearchPlaceholder {
    text-indent: 0!important;
    background: none!important;
}
#QuickSearchPlaceholder:before {
    font-size: 14px;
    color: #b23026;
    content: "\f00e";
    font-family: FontAwesome;
}
This is the result:
Screen Shot 2016-03-11 at 2.35.37 PM.png
you can also play with the css properties :after :before to reach the result that you're looking for.