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

Custom CSS - search result page


frauhilde

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

13 answers to this question

Recommended Posts

  • 1

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;
}
}

 

Link to post
  • 0

@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

Link to post
  • 0
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.

image.thumb.png.5f7d25c86100cc6ad5fd0adb13c2b149.png

Link to post
  • 0

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!

image.png

Link to post
  • 0
@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 */
}
}

 

Link to post
  • 0

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;
}
 

 

Capture.JPG

Capture1.JPG

Link to post
  • 0
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;
}
 

 

Capture.JPG

Capture1.JPG

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

Link to post
  • 0

 

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)? 🙄 

Link to post
  • 0
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

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...