Search bar size

This topic contains 7 replies, has 2 voices, and was last updated by

 
Keymaster
5 years, 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10405

    Participant

    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.

    #10407

    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 :)


    #10423

    Participant

    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!

    #10424

    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 :)


    #10442

    Participant

    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?

    #10444

    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 :)


    #10474

    Participant

    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 5 years, 3 months ago by  Stacey_S.
    #10480

    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 :)


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

You must be logged in to reply to this topic.