Change search bar and results colour

[benio1005]

Hello! My search results page doesn't follow my theme settings, I changed the CSS with results from another discussion on here which solved most of the issues but the search bar and search results colours are still incorrect. As you can see the results should be black text with the white background but they are instead a black background with white text:

[DaisyVo]

Hi @benio1005 

Could you provide us with your store URL so I can check it from my end?

Best,

Daisy

[benio1005]

https://www.tracksideapparel.co.uk/

[DaisyVo · Accepted solution]

Hi @benio1005 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.template-search__search * {
    background: white !important;
    color: black !important;
    border-color: rgba(0,0,0,0.1) !important;
}
.template-search__search input.search__input field__input {
    border-color: black !important;
}
.template-search__search .field {
    border: 1px solid black !important;
    border-radius: 40px !important;
}
.template-search__search button.search__button.field__button {
    border-radius: 40px !important;
}

Here is the result: https://prnt.sc/bKaN94fHDhJ- 

Hope this helps

Best,

Daisy

[benio1005]

Perfect! All working now thank you so much!

[Made4uo-Ribe]

Hi @benio1005 

Please, share your store URL. Thanks!

[benio1005]

https://www.tracksideapparel.co.uk/

[Made4uo-Ribe]

Thanks for the info, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.search__input.field__input, .field__label, .predictive-search__results-groups-wrapper,
div#predictive-search-option-search-keywords {
    background: #ffff;
    color: #000;
}
.search__input.field__input {
    border: 1px solid;
}

.field__button {
    color: #000;
}
.predictive-search__results-groups-wrapper *, div#predictive-search-option-search-keywords * {
    color: black;
}
div#predictive-search-option-search-keywords {
    border-top: 1px solid;
}
p.predictive-search__item-heading.predictive-search__item-query-result.h5 mark {
    color: black;
    opacity: .7;
}

</style>

• And Save. 
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[namphan]

Hi @benio1005,

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

.template-search__search {
    --color-background: 255, 255, 255;
    --gradient-background: #ffffff;
    --color-foreground: 18, 18, 18;
    --color-background-contrast: 191, 191, 191;
    --color-shadow: 18, 18, 18;
    --color-button: 18, 18, 18;
    --color-button-text: 255, 255, 255;
    --color-secondary-button: 255, 255, 255;
    --color-secondary-button-text: 18, 18, 18;
    --color-link: 18, 18, 18;
    --color-badge-foreground: 18, 18, 18;
    --color-badge-background: 255, 255, 255;
    --color-badge-border: 18, 18, 18;
    --payment-terms-background-color: rgb(255 255 255);
}