Jump to content

How to change colour theme of search results page?

Recommended Posts

  • 2 months later...
  • Replies 17
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

 

1364375646_Odrderconf.thumb.png.e2b859cb72172d74e3f6091c56f874b1.png833972676_Blackscmbl.png.50267b0510d8136d40c90c113729cfa0.png1548044371_SocCartBlack.thumb.png.d193a03b1b5b9516c957c1e545742ff0.png

Link to comment
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?

 

1364375646_Odrderconf.thumb.png.e2b859cb72172d74e3f6091c56f874b1.png833972676_Blackscmbl.png.50267b0510d8136d40c90c113729cfa0.png1548044371_SocCartBlack.thumb.png.d193a03b1b5b9516c957c1e545742ff0.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, Funjob said:

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?
 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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"?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.