Change the styling of Essential Grid Search

[dstro003]

Hello support team,

I have connected the essential grid search to the global search and would like to know if there is any way to style the essential grid search page

Specifically, I would like to

• make the background page that pops up when you click the search to be a solid color and not have it have an opacity as you can see through to the current webpage that you are on.
• Change the font color and size of the enter your search

Any help would be appreciated!

Thanks

• Daniel

[paul.r]

Hi Daniel,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

For the mean time, you can try the following.

Thank you.

[dstro003]

Thank you for the help!

The url to my website is here:

SoundShock

The search bar is in the upper right hand corner.

I have tried using

.bigsearchfield{
font-size: 10px;
}

to change the font size but it does not seem to be working.

Also, I cannot figure how to change the opacity of the background of the search screen. I would like it to be solid white, but I cannot seem to locate the class.

Any help would be appreciated!

• Daniel

[nico]

Hi @dstro003,

Thanks for the URL.

The text that you want to change has an important CSS. As show in the image below:

You need to change it directly in the esg CSS because you could not be able to change a CSS that has an !important in the CSS.. As of now, not sure where it is located but if you could share us to your admin credentials. We could try locate it for you.

Don’t forget to set it in a secure note.

And for the background, you could this class #esg_search_bg.

Hope it helps.

Thanks.

[dstro003]

Thank you for your help.

I have included the code

#esg_search_bg{
  rgba(0, 0, 255,0.1);
}

and it does not seem to be changing the background page color or opacity.

Am I missing something in the code?

And I just added in the login details!

Thanks

[thai]

Hi There,

Please update your custom CSS to this:

#esg_search_bg {
    background: rgba(0, 0, 255,0.1) !important;
}

Let us know how it goes!