Customise search bar

  • Resolved ememmy

    (@ememmy)


    4 years, 2 months ago

    Hello! I already found CSS to customise my search bar corners – making them rounded. That was great. However I can’t find the appropriate CSS to customize further my search bar. Please could you help?

    Is it possible to make the search bar look similar to the one on this website: https://vilmairis.com/

    Alongside colour/design, I would like to make the search height a little less, more similar to the one on website.

    Many thanks!

    • This topic was modified 4 years, 2 months ago by ememmy.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    I hope you are well today and thank you for your question.

    I can see you have already styled it.

    Could you please tell me which further styling you want to apply so that I can help you?

    Best regards,

    Thread Starter ememmy

    (@ememmy)

    Hi! Thank you.

    I made the search bar rounded corners which worked – and then it’s height thinner, by applying this code – however the search icon is now out of place (it’s lower than the button), so I think I have done it wrong. Can you suggest a better code perhaps?

    .is-search-form label input.is-search-input {
    width: 100%;
height: 25px;
    border-radius: 10px;
margin-top: -10px;
    outline: 0;
}

input.is-search-input {
    border-radius: 5px 0 0 5px !important;
}

button.is-search-submit span.is-search-icon,
button.is-search-submit {
    border-radius: 0 5px 5px 0;
height: 25px;
margin-top: -5px;
}

    Styling wise, I was hoping it would be possible to style it like this search bar
    https://vilmairis.com/
    With:
    – a black border around the whole box.
    – the search button not a seperate colour – the same white background and included in the same border as the search box, and the search icon being black.
    – the word ‘SEARCH’ across as the placeholder in the box

    • This reply was modified 4 years, 2 months ago by ememmy.
    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    You can achieve this by changing the shared CSS code as below.

    #main-nav .is-search-form label input.is-search-input {
    height: 30px;
    border-radius: 5px 0 0 5px !important;
}

#main-nav button.is-search-submit span.is-search-icon {
    border-radius: 0 5px 5px 0;
    height: 30px;
    background: transparent;
    border-left: 0 !important;
    padding-top: 4px !important;
}

    – the word ‘SEARCH’ across as the placeholder in the box

    You can change it by editing the search form and using the Search Form Customizer displayed on the below path.

    Admin Area -> Ivory Search -> Search Forms -> Edit Search Form -> Design -> Search Form Customizer

    Thread Starter ememmy

    (@ememmy)

    Thank you kindly!!

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    You are most welcome here ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customise search bar’ is closed to new replies.