Customize Search Box

[onehipcat]

Hi,

I would like to customize the search box. Right now, I’m getting a dark grey color.

I would like to make the search box this color: #e1dede

I would also like to make the text inside of the search box black.

What code do I need for this?

(attached is a snapshot of how it is currently)

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

#main-nav .ajax-search-wrap input[type="text"] {
  background: #e1dede!important;
  color: #000!important;
}

-Rui

[onehipcat]

Thank you so much! Can we do the same thing for the dropdown that pop-up below? I want those boxes to have the same grey color, #e1dede. Also, I would like to make the text in those boxes this green color: #e1dede.

See snapshot for the area I’m referring to.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.ajax-search-wrap, .ajax-search-results, .search-result-pt .search-result, .vertical-header .ajax-search-results {
    background: #e1dede !important;
}

.search-result h5,.search-result-pt h6, .no-search-results h6{
color:#17453A !important;
}

Thanks
Mohammad

[onehipcat]

Thanks so much! But, the links are not green. The links inside the search menu are white (see snapshot). Can we make the links this color green: #e1dede

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.ajax-search-wrap input[type="text"], .search-result-pt h6, .no-search-results h6, .search-result h5 a, .no-search-results p {
    color: #17453A !important;
}

Thanks
Mohammad

[onehipcat]

Yes. That did work. Thank you so much.

[Mohammad – SUPPORT]

Hi,
You most welcome.
Thanks
Mohammad