Search Bar in Header

Hi, i would like to add a search bar to my header. On My site it already has a header and it takes me to an external page which i do not like. See imaages attached. I want to just be able to write a search option in the search bar insrad of it taking me to another site. How can i do this.

Thanks

(website pasword is password)

unfortunately you can't add a search block to the header. I struggled with this for a while.  I found java script to move a block from the footer ( and you can put a search block in the footer ) to the header but trouble shooting the java script was outside my skill level. I ended up using the built in search page and heavily styled it to match my theme 

I'm not sure if there are prohibitions to providing links to outside code that a) is not "a curated plugin" and  b) may not work (your skill may well be higher than mine which I'd rate at about 2 out of 10 for JavaScript ) Or I'd link it here.  

  but you might try searching google for how to add a search bar to your header in squarespace 7.1 

Hope that helps. 

14 hours ago, genfoch01 said:

unfortunately you can't add a search block to the header. I struggled with this for a while.  I found java script to move a block from the footer ( and you can put a search block in the footer ) to the header but trouble shooting the java script was outside my skill level. I ended up using the built in search page and heavily styled it to match my theme 

I'm not sure if there are prohibitions to providing links to outside code that a) is not "a curated plugin" and  b) may not work (your skill may well be higher than mine which I'd rate at about 2 out of 10 for JavaScript ) Or I'd link it here.  

  but you might try searching google for how to add a search bar to your header in squarespace 7.1 

Hope that helps. 

hi thanks for the help

im no good at java lol

how do you customise the search bar page? When i click on mine it doesnt even appear with an edit button so its just plain page with a search engine

Thanks alex

I am using SS 7.1  if you are on something else, some or all of this may not apply. 

I altered the search page to match my theme the code below was pulled from several different forum posts. (forum support here is pretty responsive ) 

this would go into your custom css  ( design -> custom css ) 

the #xxxxxx are color hex codes so you will need to change them to be whatever you need.  ( here is a nice color picker that gives you hex codes for any color you pick  https://g.co/kgs/HrKRV4 ) 

at some point i'll document what element each stanza of css works on but i've been lazy  so i'd put them in one at a time in case my style not what you want. 

hope this helps. 

Quote

/* search page start */
#page .system-page, #page {
    background-color: #32273b !important;
}
#page .system-page, #page{
  color:#c8a47e !important;
}
#page .system-page, #page, body {
    background-color: #32273b !important;
}
#page .system-page, #page {
    background-color: #32273b !important;
}

.sqs-search-page-notice {
    color: #c8a47e !important;
    display: block;
}
.sqs-search-page-notice {
    font-size: large !important;
    display: block;
}
.sqs-search-page-notice {
    font-weight: bold !important;
    display: block;
}
.sqs-search-page-input {
    background-color: #271f2e !important;
    display: block;
}

.sqs-search-page-input input {color: #c8a47e}
.sqs-search-page-input input {font-weight: bold}

.sqs-search-page-input input::placeholder {
    color: #c8a47e !important;
}
.sqs-search-page-input {
    border-color: #271f2e !important;
}
.sqs-search-page-input {
    outline: none !important;
}

.header-actions.header-actions--right {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
header#header a.btn {
    font-weight: bold !important;
}

/* end search bar */

6 hours ago, genfoch01 said:

I am using SS 7.1  if you are on something else, some or all of this may not apply. 

I altered the search page to match my theme the code below was pulled from several different forum posts. (forum support here is pretty responsive ) 

this would go into your custom css  ( design -> custom css ) 

the #xxxxxx are color hex codes so you will need to change them to be whatever you need.  ( here is a nice color picker that gives you hex codes for any color you pick  https://g.co/kgs/HrKRV4 ) 

at some point i'll document what element each stanza of css works on but i've been lazy  so i'd put them in one at a time in case my style not what you want. 

hope this helps. 

 

Thank you very much, i will try this now and i will get back to you

7 hours ago, genfoch01 said:

I am using SS 7.1  if you are on something else, some or all of this may not apply. 

I altered the search page to match my theme the code below was pulled from several different forum posts. (forum support here is pretty responsive ) 

this would go into your custom css  ( design -> custom css ) 

the #xxxxxx are color hex codes so you will need to change them to be whatever you need.  ( here is a nice color picker that gives you hex codes for any color you pick  https://g.co/kgs/HrKRV4 ) 

at some point i'll document what element each stanza of css works on but i've been lazy  so i'd put them in one at a time in case my style not what you want. 

hope this helps. 

 

Hi it has wwoked however i my button that sayas checkout has disappeared or changed colour so i cant see it. How can i change the colour for the button so i can see it? Thanks 

none of that should have affected the checkout button. 

you can change the checkout button color design > checkout. 

on this forum page Tuanphan gives some code examples of doing this with css.  

I tested some of those ideas but once I got my checkout button set to black I didn't need them 

2 hours ago, genfoch01 said:

none of that should have affected the checkout button. 

you can change the checkout button color design > checkout. 

on this forum page Tuanphan gives some code examples of doing this with css.  

I tested some of those ideas but once I got my checkout button set to black I didn't need them 

 

 

hi i dont mean the checkout button on the actual check out page

imean check out on the basket pagee as you can see there is a gap where it says sub total and clear pay and the button would normally be there but its not

i think the button is white asell as the text so is there any way to change the button background and text colour you know of 

Thanks for you help

alex

you can change the cart checkout button via the primary button color of the theme your cart page is using 

the cart seems to get its own theme so you need to figure out what theme its using .  for example my site uses the  dark2 theme but my cart page uses lightest1  

i did this by log in to edit your site, put something in the cart. click the cart icon 

then on the left side click site styles  then on right side the panel will open click on colors.   my cart page ( with all the custom css removed ) was white and black  so i picked lightest1 and changed the color for the "primary button background"