Customize Search Block for 7.0

Hello,

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. 

Does anyone know how i might do that?

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!

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.

Try this:

.search-input::placeholder {
    color: white !important;
}