Custom CSS - search result page

Site URL: https://www.backbube.com/search?q=herbst

Hey there,  

Is there a opportunity to customize the Search Result Side? I want the results to be shown as a responsive grid and just with the title above the image. Unfortunately i'm not fit for css. Thank you for your help!

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.search-results {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 10px;
}
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
    float: none !important;
    padding-right: 0 !important;
}
.sqs-search-page-item .sqs-main-image-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.sqs-search-container-item .sqs-content {
    margin-top: 10px;
}
}

@tuanphan You've helped me so much with all the codes you've shared on the squarespace forum.

Usually I can find the answer I need with all the codes you share helping people, but I can't wrap my head around this search bar page.

I want to display the results like you did it for @frauhilde, and also style a little bit the search bar so it's around 50% its width and the background colour is not white but beige like my page.

Here is my website:

https://www.simpledomus.com/

pw: simple

On 11/10/2020 at 5:27 PM, pramirol said:

@tuanphan You've helped me so much with all the codes you've shared on the squarespace forum.

Usually I can find the answer I need with all the codes you share helping people, but I can't wrap my head around this search bar page.

I want to display the results like you did it for @frauhilde, and also style a little bit the search bar so it's around 50% its width and the background colour is not white but beige like my page.

Here is my website:

https://www.simpledomus.com/

pw: simple

Can you share link to a search result page? I can check easier.

https://www.simpledomus.com/search?q=ikea here @tuanphan

hello @tuanphanis quite busy, can someone help me with this?

https://www.simpledomus.com/search?q=ikea  this is a search result, pw is simple

I want to style the search bar so it's around 50% its width and has the following css:

{background:#EEEDEB;
border-style:none;
  border-bottom-style:solid;
  border-bottom-color:#B5A293;
border-color: #B5A293!important;}

But I can't find the way to apply this to the search bar...

Also the result page I would like it to look something like the attached file, with a text under the search bar saying "search results:" and only display blog titles and categories, not the text.

Would so much appreciate if someone can help with this!

@media screen and (min-width:641px) {
.search-results {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 10px;
}
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
    float: none !important;
    padding-right: 0 !important;
}
.sqs-search-page-item .sqs-main-image-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.sqs-search-container-item .sqs-content {
    margin-top: 10px;
}
.sqs-content .sqs-content {
    display: none;
}
.sqs-search-page-input {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background: #f1f2f3; /* search background */
}
}

@tuanphanthank you so much!!!

how can I delete this black frame that appears when I click on the text box?

also can I force the result page pictures to format 1:1?

https://www.simpledomus.com/search?q=reforma

/* remove search input black border */
.sqs-search-page-input {
    outline-color: transparent !important;
}

The tips on this thread have been really useful although I am struggling with the size of the search block on results page. I've managed to reduce the width to 50% but can't get the height or the font to match the block on my input page.

I've tried this code and only the width has reduced.

.sqs-search-page-input {
    width: 50%;
    height: 50%;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
}
 

On 2/1/2021 at 2:08 AM, GordonF said:

The tips on this thread have been really useful although I am struggling with the size of the search block on results page. I've managed to reduce the width to 50% but can't get the height or the font to match the block on my input page.

I've tried this code and only the width has reduced.

.sqs-search-page-input {
    width: 50%;
    height: 50%;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
}
 

 

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

Hi. I used this code on our website - it works great. Exactly what I was looking for. 🙂 Only if it is possible to do something so that the product description does not appear in the search results, but only the picture block, price and product name (as on the store page with the product list)? 🙄 

20 hours ago, Malwina said:

 

Hi. I used this code on our website - it works great. Exactly what I was looking for. 🙂 Only if it is possible to do something so that the product description does not appear in the search results, but only the picture block, price and product name (as on the store page with the product list)? 🙄 

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

Site URL: https://wrasse-sparrow-6kc9.squarespace.com/search-page (try searching "skirt")

Hi all, I've been following this thread and managed to create a gridded search result for my site. But I can't quite make the adjustments that I want to, so hoping someone can help me out here?

1. First of all, is it possible to display the search results on the search page itself (not as a drop-down Quick View)? Same as @pramirol's search page, where once you type in a keyword, it loads and results appear below the search bar, and the url automatically changes to ".../search?q=[search term]". Currently, once I hit enter on the search bar, it goes to a separate Search Result page which I cannot seem to edit without CSS because it's not under my Pages.
2. I would like the search results to display in the same exact format as on my Product pages, which is 4 columns, no divider lines between rows, show title, price and image of product in 3:4 image ratio, with the image being the thumbnail (if uploaded) OR the first image of that product (if product doesn't have an uploaded thumbnail). Currently, it only shows the images of products with thumbnails - I do not want to have to add thumbnails to all my products!
3. If it has to be on the separate Search Result page, I would also like my background to be #fefcf6 , to be consistent with the rest of the pages.

Anyone's help would be sooo much appreciated 🙏

2 minutes ago, bloom222 said:

hoping someone can help me out here

The site is currently private so you'll need you to set a public password in the visibility settings and share it with us.

yes, sorry! password is "aether".

On 8/18/2021 at 2:26 PM, bloom222 said:

yes, sorry! password is "aether".

Hi. Do you still need help?

On 8/22/2021 at 10:11 AM, tuanphan said:

Hi. Do you still need help?

Hi @tuanphan, I've managed to do 1 and 3 but can't figure out number 2 (product image ratio etc in search results). Regarding the thumbnail images, I've uploaded a thumbnail for all products so that they would show up in the meantime. If it's possible to show the default primary image (if no thumbnail is uploaded), then that would be great!

18 hours ago, bloom222 said:

Hi @tuanphan, I've managed to do 1 and 3 but can't figure out number 2 (product image ratio etc in search results). Regarding the thumbnail images, I've uploaded a thumbnail for all products so that they would show up in the meantime. If it's possible to show the default primary image (if no thumbnail is uploaded), then that would be great!

Can you share link to a search results with >5 results? We can take a look

Yes, you can try searching "sweater".

Hi hope you don't mind but i have tried this code,

Is there any way to have the images above the title and all centred?

and the images larger like the original search results?

Thank you

On 11/6/2021 at 12:52 AM, gmwilliams said:

Hi hope you don't mind but i have tried this code,

 

Is there any way to have the images above the title and all centred?

and the images larger like the original search results?

 

Thank you

 

 

Can you share link to search page on your site?

Hi, sorry the site isn't live just yet

23 hours ago, gmwilliams said:

Hi, sorry the site isn't live just yet

You can setup password & share url