How to change colour theme of search results page?

Site URL: https://www.bnedesign.com.au/search?q=poo&f_collectionId=5f0d71620f26b73045d69f54

Hi, I'd like to change the color profile of the main section of the search results page to match the style of the rest of the site. Also my logo is white so the default white background doesn't work.

Thank you!

I'd like to know how to do this too!

On 5/2/2021 at 11:29 PM, Funjob said:

I'd like to know how to do this too!

Hi. This will require JavaScript code + CSS.

Can you share link to search page? We can help easier

Sure, thanks!

https://www.underhereyes.com/search?q=kamo

Password: Eyeballs

19 hours ago, Funjob said:

Sure, thanks!

https://www.underhereyes.com/search?q=kamo

Password: Eyeballs

Add to Code Injection Footer

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
  </script>

Add this to Code Injection Header

<style>
  .t-search header#header {
    background: #ff33ff !important;
}
</style>

That's great, thanks so much! A couple of other similar things:

i) How would I change the header color, and background color, of the order confirmed page? I need it to be #8d9283

ii) I'd also like the "Order Confirmed" message to be lowercase

iii) On some pages the social & cart icons turn black (also the search window outline) - is there some code I can add to make them always stay white?

14 hours ago, Funjob said:

That's great, thanks so much! A couple of other similar things:

i) How would I change the header color, and background color, of the order confirmed page? I need it to be #8d9283

ii) I'd also like the "Order Confirmed" message to be lowercase

iii) On some pages the social & cart icons turn black (also the search window outline) - is there some code I can add to make them always stay white?

 

Can you place an order & share link to order confirmation page?

With search page, add this to Design > Custom CSS

/* Search page color */
.t-search .icon--fill svg {
    fill: white !important;
}
.t-search svg.icon.icon--cart {
    stroke: white !important;
}
.t-search span.sqs-cart-quantity {
    color: white;
}

With other pages, has cart, icon black, add this to Page Header

<style>
header#header .icon--fill svg {
    fill: white !important;
}
header#header svg.icon.icon--cart {
    stroke: white !important;
}
header#header span.sqs-cart-quantity {
    color: white;
}
</style>

https://www.underhereyes.com/checkout/order-confirmed?oid=60a4c47eb0495e41887bd7f8&authCode=NjBhNGM0N2ViMDQ5NWU0MTg4N2JkN2Y4OjIwMjEtMDUtMTlUMDc6NTU6NDAuNjY1Wk9TLxaJWMfCeKz4f4UultNHPKzkyDaQgKlvabnncDf-

2 hours ago, Funjob said:

https://www.underhereyes.com/checkout/order-confirmed?oid=60a4c47eb0495e41887bd7f8&authCode=NjBhNGM0N2ViMDQ5NWU0MTg4N2JkN2Y4OjIwMjEtMDUtMTlUMDc6NTU6NDAuNjY1Wk9TLxaJWMfCeKz4f4UultNHPKzkyDaQgKlvabnncDf-

It looks like someone clicked the link, so I can't access.

Can you send me a private message with new url? We will check again.

Don't worry, Tuan! I found the answers here:

Thanks so much anyway!

Hi There, I would like the background of my search results to be white -  https://canvasgallery.ca/search?q=albano&f_collectionId=607f246f4a73393bf84a6ecd

any help would be appreciated !

Thanks so much

7 hours ago, canvasgallerytoronto said:

Hi There, I would like the background of my search results to be white -  https://canvasgallery.ca/search?q=albano&f_collectionId=607f246f4a73393bf84a6ecd

 

any help would be appreciated !

Thanks so much

 

Add to Settings > Advanced > Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
  </script>
<style>
  .t-search header#header {
    background: #fff !important;
}
</style>

11 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
  </script>
<style>
  .t-search header#header {
    background: #fff !important;
}
</style>

 

thank you! This seemed to change the search results page header/menu rather than the background behind the actual results, is there a way to do that?
 

17 hours ago, canvasgallerytoronto said:

thank you! This seemed to change the search results page header/menu rather than the background behind the actual results, is there a way to do that?
 

Change this code

<style>
  .t-search header#header {
    background: #fff !important;
}
</style>

to this

<style>
  .t-search .system-page {
    background: red;
}
</style>

Hi, is there a way to change colour of the text in the menu bar as well as text in the search result just for the search result page?

I want to change the header and the body background to #202434 and the text colour to #F7F7F7

https://www.innercircler.com/search?q=

Hi, is there a way to change colour of the text in the menu bar as well as text in the search result just for the search result page?

I want to change the header and the body background to #202434 and the text colour to #F7F7F7

https://www.innercircler.com/search?q=

The search page is a built in page, and not directly customizable, it's colour is determined by the default colour theme for the website, so could be a good option to change that on your website:
https://studiomesa.co/articles/default-color-theme
Just be careful to check all of your pages after you make this change.

This is a good guide for styling with Custom CSS:
https://insidethesquare.co/squarespace-tutorials/search-results

On 10/21/2022 at 9:17 PM, best19 said:

Hi, is there a way to change colour of the text in the menu bar as well as text in the search result just for the search result page?

I want to change the header and the body background to #202434 and the text colour to #F7F7F7

https://www.innercircler.com/search?q=

 

You mean the text "Type to search"?