Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Search Page Theme Selection


caig

Question

Site URL: https://camilokoch.com

Hello. I would like to customize the theme of the search page (www.camilokoch.com/search) to 'dark minimalist,' currently set on 'white minimalist' by default. There is no visual editor neither theme selection option for the search page; is there a way to force this page to utilize the dark minimalist theme? Thanks.

Edited by caig
added link
Link to post
  • Answers 25
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi. Sorry for the delay. I was off some day. Do you still need help on this?

ah sorry, missing classs, edit code in Code Injection Header to this <script> if (document.location.pathname.indexOf("/search") == 0) { document.querySelector('body').classList.add('t-se

@raeroshow hello! thanks to the help of @tuanphan, i am summarizing what to add and where in order to change the color of the header in the search page: 1. in code injection header add the follow

Posted Images

25 answers to this question

Recommended Posts

  • 0
12 hours ago, tuanphan said:

Can you describe in detail? Header color, text color, background...?

thank you, @tuanphan

as the attachments show, the whole website utilizes the "dark minimal" theme, and the search page utilizes the "white minimal" theme. the issue is that the search page does not allow me to directly change the theme when clicking the "edit" button on top (as shown in the third attachment). my question is then: is there a way to force the search page by code to utilize the "dark minimal" theme? thanks again.271729560_ScreenShot2021-01-24at22_30_13.thumb.png.a3d8d7a78963fd101cac970babc2daa5.png667304824_ScreenShot2021-01-24at22_32_20.thumb.png.ff93e77473d1ac64792c8b9319fad1fb.png1616235712_ScreenShot2021-01-24at22_29_40.thumb.png.c0d581dce30e90596ecffecfe2693faf.png

Link to post
  • 0
On 1/30/2021 at 7:37 AM, caig said:

hello @tuanphan, did I clarified it well? thanks again for your kind help

Hi. Sorry for the delay. I was off some day.


Do you still need help on this?

Link to post
  • 0
On 2/1/2021 at 10:14 AM, tuanphan said:

Hi. Sorry for the delay. I was off some day.


Do you still need help on this?

hi @tuanphan, i hope you enjoyed the time off

thank you; this is still unsolved and i will appreciate your help, if possible

Link to post
  • 0

Hey all!
I'm having a similar issue here. I need to change the background color of the header on the /search page but can't figure out how to do it.

I added a Search function to the Articles blog, and the Search results page (/search) is showing White on white text in the header - and therefore, you cannot see the Navigation. Any ideas how to get the header to Light Minimal or Light bold? The only target ID i can find is #yui_3_17_2_1_1612820908662_89 and i can't get it to do anything.

I've attached screenshots of 1) all white header, as well as 2) me mousing over the nav so you can see  invisible nav.

This is somewhat urgent as it's live on the client's site. THANK YOU! 
 

 

Screen Shot 2021-02-08 at 2.00.05 PM.png

Screen Shot 2021-02-08 at 2.02.52 PM.png

Link to post
  • 0
On 2/9/2021 at 5:07 AM, raeroshow said:

Hey all!
I'm having a similar issue here. I need to change the background color of the header on the /search page but can't figure out how to do it.

I added a Search function to the Articles blog, and the Search results page (/search) is showing White on white text in the header - and therefore, you cannot see the Navigation. Any ideas how to get the header to Light Minimal or Light bold? The only target ID i can find is #yui_3_17_2_1_1612820908662_89 and i can't get it to do anything.

I've attached screenshots of 1) all white header, as well as 2) me mousing over the nav so you can see  invisible nav.

This is somewhat urgent as it's live on the client's site. THANK YOU! 
 

 

Screen Shot 2021-02-08 at 2.00.05 PM.png

Screen Shot 2021-02-08 at 2.02.52 PM.png

Have you solved it yet?

21 hours ago, caig said:

may we invoke the precious help of @tuanphan

thanks!

I think you need to use custom code to change cart page style. If you describe in detail what you want, we can give code easier

Link to post
  • 0
On 2/19/2021 at 9:19 PM, tuanphan said:

Have you solved it yet?

I think you need to use custom code to change cart page style. If you describe in detail what you want, we can give code easier

thanks, @tuanphan, that's correct, this issue requires custom code for the cart page style. the detailed description is here: https://forum.squarespace.com/topic/179205-search-page-theme-selection/?do=findComment&comment=430497. please let me know if more details are required. i appreciate your help, thanks.

 

Link to post
  • 0

Hi al! This is still unresolved. I'd love some help as I've tried a bunch of stuff to no avail. 🙂

Here is a little more info:

  • When you add a blank new page in 7.1, the top section of the page defaults to  "White Minimal" color section. It seems that this /search page defaults to "White minimal" as well.
  • On this particular website - "white minimal" is set to have white navigation text and a white background color. This is because all of my other pages have header images so the white on white isn't a problem.
  • Unfortunately, you cannot do either of these things: 
    • a) add a header image to the /search page
    • b) change the color of the top section to the /search page (for example to "White Bold") 

Any ideas? Here is the link: 

https://www.90daybusinesslaunch.com/search?q=social media&f_collectionId=5f753f63cd2d631e09f9c037

Link to post
  • 0
On 2/24/2021 at 4:13 AM, raeroshow said:

Hi al! This is still unresolved. I'd love some help as I've tried a bunch of stuff to no avail. 🙂

Here is a little more info:

  • When you add a blank new page in 7.1, the top section of the page defaults to  "White Minimal" color section. It seems that this /search page defaults to "White minimal" as well.
  • On this particular website - "white minimal" is set to have white navigation text and a white background color. This is because all of my other pages have header images so the white on white isn't a problem.
  • Unfortunately, you cannot do either of these things: 
    • a) add a header image to the /search page
    • b) change the color of the top section to the /search page (for example to "White Bold") 

Any ideas? Here is the link: 

https://www.90daybusinesslaunch.com/search?q=social media&f_collectionId=5f753f63cd2d631e09f9c037

Do you use Personal or Business or Commerce plan?

Link to post
  • 0
On 2/24/2021 at 5:13 AM, raeroshow said:

Hi al! This is still unresolved. I'd love some help as I've tried a bunch of stuff to no avail. 🙂

Here is a little more info:

  • When you add a blank new page in 7.1, the top section of the page defaults to  "White Minimal" color section. It seems that this /search page defaults to "White minimal" as well.
  • On this particular website - "white minimal" is set to have white navigation text and a white background color. This is because all of my other pages have header images so the white on white isn't a problem.
  • Unfortunately, you cannot do either of these things: 
    • a) add a header image to the /search page
    • b) change the color of the top section to the /search page (for example to "White Bold") 

Any ideas? Here is the link: 

https://www.90daybusinesslaunch.com/search?q=social media&f_collectionId=5f753f63cd2d631e09f9c037

correct; I need to change the /search page and the /cart page from "white minimal" to "dark minimal" and I don't know how to do that.

the /search page is not editable; same situation for the /cart page. both pages remain with "white minimal" color selection due to its "default" state. the new visual "site styles" editor recently added to squarespace is not available on these two pages either. the website is on a business plan and this situation is unresolved too. thanks @tuanphan

Link to post
  • 0

@caig Can you describe in dark minimal style? Or you want to change cart page header color only? Add this to Design > Custom CSS

body#cart header#header {
    background: gray !important;
}

 

Link to post
  • 0
On 4/7/2021 at 12:12 AM, raeroshow said:

Hi friends, 

I'm still trying to change the background color of the header on the /search page, if anyone has advice!  Thank you! 🙂

https://www.90daybusinesslaunch.com/search 

You can get to the search page by going here https://www.90daybusinesslaunch.com/articles  and searching for any term. 

Thanks!
Rachel 

Hi. Add this to Settings > Advanced > Code Injection > Header

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

image.thumb.png.bdca284c651b0355d296c8f57e54e286.png

Link to post
  • 0
On 4/7/2021 at 12:12 AM, raeroshow said:

Hi friends, 

I'm still trying to change the background color of the header on the /search page, if anyone has advice!  Thank you! 🙂

https://www.90daybusinesslaunch.com/search 

You can get to the search page by going here https://www.90daybusinesslaunch.com/articles  and searching for any term. 

Thanks!
Rachel 

also, the site has small problems

Site URL – https://www.90daybusinesslaunch.com/

1. (Tablet-Search) Want to increase form width?

tablet-search-min.png

2. (All screen) Remove white padding on popup?

all-screen-min.png

Link to post
  • 0
18 hours ago, tuanphan said:

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

1. First off - thanks for the response. Really appreciate it! I've had this one on my mind for a long time.

Sadly, I couldn't get that code to work. It should be in there now if you want to check it out. 

https://www.90daybusinesslaunch.com/search 

 

2. Regarding my pop ups, yeah those have been a little icky for a while. Embarrassed you noticed! 🙂 If you have any advice, I'm all ears! 🙂

Link to post
  • 0
23 hours ago, tuanphan said:

Hi. Add this to Settings > Advanced > Code Injection > Header


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

image.thumb.png.bdca284c651b0355d296c8f57e54e286.png

hi @tuanphan, inserted it but not working. please help me check it out, thank you!

https://camilokoch.com/search?q=hello

 

Link to post
  • 0
On 4/13/2021 at 8:25 AM, caig said:

hi @tuanphan, inserted it but not working. please help me check it out, thank you!

https://camilokoch.com/search?q=hello

 

 

On 4/13/2021 at 3:53 AM, raeroshow said:

1. First off - thanks for the response. Really appreciate it! I've had this one on my mind for a long time.

Sadly, I couldn't get that code to work. It should be in there now if you want to check it out. 

https://www.90daybusinesslaunch.com/search 

 

2. Regarding my pop ups, yeah those have been a little icky for a while. Embarrassed you noticed! 🙂 If you have any advice, I'm all ears! 🙂

 Hi,

Remove above

add this to Code Injection Footer

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

 

add this to Code Injection Header

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

 

Edited by tuanphan
Link to post
  • 0
7 hours ago, tuanphan said:

 

 Hi,

Remove above

add this to Code Injection Footer


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

 

add this to Code Injection Header


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

 

@tuanphan thanks again for your kind help.

the code was added but no changes so far; please check it out whenever you can

all the best

Link to post
  • 0
21 hours ago, caig said:

@tuanphan thanks again for your kind help.

the code was added but no changes so far; please check it out whenever you can

all the best

ah sorry, missing classs, edit code in Code Injection Header to this

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

 

Link to post
  • 0

@raeroshow hello! thanks to the help of @tuanphan, i am summarizing what to add and where in order to change the color of the header in the search page:

1. in code injection header add the following and replace #1c1c1c for the color required:

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

2. in code injection footer add the following:

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

3. additionally, you may need to change the navigation text color; add the following in custom css to change it globally:

.header-nav-item a, .header-menu-nav-item a {color: white !important;}

thanks for your infinite patience, @tuanphan. to anyone landing here, consider this as a fix because until today, there is no other way to customize the search page from the squarespace site styles menu. we may face the same situation when customizing the cart page. keep it up!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...