Jump to content

Customize Search Block for 7.0

Go to solution Solved by JTeich,

Recommended Posts


I need to insert a Search Block on a couple pages of my site. The reason it has to be a search block and not a search heading is i needed to hide the header on this sequence of pages.

Although it's possible to customize the search bar heading in "Site Style", this does not seem to be the case for a Search BLOCK.

If you look at this page here https://africanaeconomics.com/portal-main you can see that the search bar is barely visible. So i need to be able to change the colour, font, etc. 

search block barely visible

Does anyone know how i might do that?

Link to comment
6 hours ago, Ziggy said:

You can try this to help it stand out, add to Custom CSS:

.sqs-search-ui-button-wrapper {
    background: rgba(0,0,0,0.4);

Hope that helps!

Thank you so much! I need to change the colour of the text too though. I've tried a couple different things to no avail. Here's one attempt that doesn't work 🙂

.sqs-search-ui-button-wrapper {
    background: rgba(187,93,129,0.7);
   p {
    color: white !important;

Here's what the Search Block looks like now


Thank you so so much.

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.