Change Background Color for Search Result in Dawn Theme

Store Design
,
1

Hi there,

i am actually looking for a diffrent design for my Search Bar, but i need a short-term solution for now.

It would be great when some one can tell me, how i can change the backgrund color for the search bar from Black to white.

Means:

-Search Bar remains Black with white Font

-Results for the Search (Result Container) with White Background and Black Font. ( Only this is to Change)

Example Background search bar.png
Example Background search bar.png574×333 13.2 KB

Maxi-Brillian (maxibrillian.com)

pw: deropav

2

Hello @MaxiMaxi ,

The password is incorrect. Could you please double-check and re-send it for me?

Best regards,
GemPages Support Team

3

HI @MaxiMaxi
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.predictive-search--header {
background: red;
border-color: red;
}
4

Hi @MaxiMaxi

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file base.css

button.predictive-search__item.predictive-search__item--term.link.link--text.h5.animate-arrow {
    background: white !important;
    color: black !important; 
}

Hope this answer helps.
Best regards,
Victor | PageFly

5

Hi @MaxiMaxi ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

#predictive-search-results {
    background: #fff !important;
    color: #000 !important;
}
#predictive-search-results * {
    color: #000 !important;
}

Hope it helps!

6

Hello @MaxiMaxi

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.predictive-search.predictive-search--header {
background-color: white;
color: black !important;
}
#predictive-search-products {
color: black !important;
}
.predictive-search__item-heading.h5 {
color: black !important;
}
.predictive-search__item.predictive-search__item--term.link.link--text.h5.animate-arrow {
color: black!important;
}
.predictive-search__item .icon.icon-arrow {
color: black !important;
}
.predictive-search__list-item:nth-last-child(2) {
border-bottom: 0.1rem solid #dddddd !important;
}
.predictive-search__heading {
border-bottom: 0.1rem solid #ddd !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.