How can I change my search results background to white without affecting other pages?

Store Design
1

When searching for a product it brings you to a search results page, and my search results background is black. I was able to change it before after messing with my themes, but when I did it also changed the background color for my slideshow on my homepage.

I only want the Search Results page to have a white background (so the reviews stars and text can be more easily read).

Website is www.totalweeb.store

I want this page with a white background:

and

search results.png
search results.png2494×1270 373 KB

and I don’t want it to change the color of my slideshow buttons on my homepage.

slideshow buttons.png
slideshow buttons.png2546×1278 526 KB

2

This isn’t really going to work.

You can change the background colour of the search page to white by adding the following coding to your theme’s “custom CSS” section (or else to the the theme’s main CSS file):

.template-search {
    background-color: #FFFFFF !important;
}

But since your fonts are all white, they become illegible, and the dropdown menus for the filters on the search page also have black backgrounds, so it ends up looking all wonky.

Not sure why you’re doing this though, as the stars and text are both white (I’m guessing you found a way to change the colours of the stars already?).

It already looks good on my end, without having to edit it further:

totalweebstore.png
totalweebstore.png1566×901 191 KB

3

Ya I should have mentioned that I wanted to change the text colors too. So those stars are only showing because those are the ones that have not yet been reviewed (havent added reviews to them yet) – and there is some blue text next to it that should say “8 total reviews” that I’d like to be legible.

Can’t I just add - ‘color: black;’ into your code? Well I’ll test it out

4

I actually have this in my css code already, I added the background and color just now but it didn’t work.

.template-search__search {
    display: none;
  background: white;
  color: black;
  }
}

I also tried your code also and that didn’t make my background white =/ ..

5

Hi @ManKaveStore ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

6

I appreciate the help. Still not doing anything though =/.

TotalWeeb_0-1711766545319.png
TotalWeeb_0-1711766545319.png501×541 22.8 KB

7

I figured it out, thanks.