Search bar size

[Stacey_SParticipant]

Hi there,

Is it possible to make the entire search bar bigger? see link here: http://www.johnlewis.com/
the overall size is bigger? and looks much more prominent?

Also, is it possible to change the placeholder font?

Look forward to your response.

[Ernest MarcinkoKeymaster]

Hi!

I cannot see the plugin search bar anywhere on the page unfortunately.

The default search width is set to 100%, meaning it inherits the maximum size of it’s parent element, and you can change that on the Theme Options -> Overall box layout panel: https://i.imgur.com/Og3RkGu.png
If the width is still not sufficient, it means that the search parent container might have a smaller width set. In this case I will gladly take a look at it to see if I can suggest a custom CSS rule to change it.

You can change the fonts on the Theme Options -> Input field layout panel: https://i.imgur.com/B6nerqg.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Stacey_SParticipant]

Hello Ernest,

Thank you for the above – screenshots were extremely helpful!

My clients url is: https://www.simplegirlsstore.com/

There is a thin white line under the Search / Magnifier icon? not sure what it is and how i can remove it?

Also, how can i stop the search terms from appearing in the search results? for example if i do a search for ‘green’ the actual word ‘green’ appears on its own in the search results along with relevant products?

Thank you in advance for your help!

[Ernest MarcinkoKeymaster]

Hi!

Thank you for your kind words!

1. I don’t see the white line under the icon, I guess you have fixed it already? I suppose it might have been an extra border or box shadow over the search icon.

2. I’m not if you mean term highlighting or product tag results, so here are both:

If you mean the search term highlighting: To remove the search term highlighting go to the Layout Options -> Results layout panel and turn off the “Highlight search text in results?” option: https://i.imgur.com/w1qIn3A.png

If you mean the product tag “Green” is displayed as result, and you don’t want it: Then go to the General Options -> Sources 2 panel and make sure that everything is turned off: https://i.imgur.com/pDtW0Ad.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Stacey_SParticipant]

Thank you – yes, i did mean the ‘product tag’ I have been able to remove it now.

Is there a way to change the colour of the magnifying glass on hover?

[Ernest MarcinkoKeymaster]

Well, there is no option for that, but there is a way – with a custom CSS code.

.innericon:hover svg {
    fill: #000 !important;
}

You can place this custom CSS code to the Theme Options -> Custom CSS panel input.

Also, don’t forget to change the #000 to the color code you want 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Stacey_SParticipant]

I’m sorry Ernest – I meant the magnifier background gradient? I would like it to change colours when an user hovers over it? is it possible to change the Search box border colour on hover too?

I haven’t been able to locate an option for the search results to appear on a new page? Is that not possible?

• This reply was modified 7 years, 6 months ago by  Stacey_S.

[Ernest MarcinkoKeymaster]

Hi Stacey,

1. For the background of the entire search button, use this:

.promagnifier:hover {
    background: #000 !important;
}

2.
– Do you mean like display the results on a different page the same fashion as the ajax results list? Unfortunately that is not possible.
– It is however possible to redirect the results to the default search page: https://goo.gl/eEh0FX
– In case you meant opening the results on a new tab, then you can change that on the Layout Options -> Reults behaviour panel: https://i.imgur.com/lUIN0Pf.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts