Customise search bar

Resolved ememmy
(@ememmy)

5 years, 6 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 5 years, 6 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)

5 years, 6 months ago

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)

5 years, 6 months ago
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 5 years, 6 months ago by ememmy.
Plugin Author Vinod Dalvi
(@vinod-dalvi)

5 years, 6 months ago
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)

5 years, 5 months ago

Thank you kindly!!

Plugin Author Vinod Dalvi
(@vinod-dalvi)

5 years, 5 months ago

You are most welcome here 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Customise search bar’ is closed to new replies.

Tags