Trying to edit search modal background color

[choreo64]

I’m using Cornerstone 4.2.3 X-Theme with the Icon stack. The site I’m trying to fix is here: alexgeorgebooks.com

When I click the search icon, the screen goes to white and a search modal appears, but it is VERY hard to see. My client didn’t even know it was there. Is there a line of CSS I can add that will change the background color of the modal so the search box and prompt is legible?

Thanks in advance.

[ruenel]

Hello @choreo64,

Thanks for writing in!

You are having this issue because the color of your Headings which you have set in X > Theme Options > Typography > Headings were almost white. They only way to make it visible is to override the background color of the overlay. You need to add CSS code into X > Theme Options > CSS

The search overlay has x-searchform-overlay class. By default, the overlay is having this built in styling with a transparent white color:

.x-searchform-overlay {
    background-color: rgba(255,255,255,0.925);
}

Feel free to add whatever CSS code you like inside the selector. You can change the background color in the example above.

We are unable to provide CSS code for the customization as it is outside of our support scope. The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

We would love to know if this has worked for you. Thank you.

[choreo64]

That was exactly what I needed. Thank you very much!

[christopher]

You’re welcome