How can I change the color of text in front of Search Box?

Hi Catherine,

Thanks for getting in touch.

This isn’t an issue with this plugin, but an issue with how your theme displays the default wp class screen-reader-text. The form used in this plugin is almost identical to the WordPress default and you’ll notice that the search box appears in a very similar style to your newsletter form near the bottom of your home page.

That said, there are a few ways you can solve this problem. One way would be to add some css to your theme’s style.css file using something like the following:

.screen-reader-text{
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}

which effectively hides the text while not taking it out of the flow of the document for screen readers.

Alternatively, you can add css classes in the nav-menus.php part of the admin area (use the screen options tab if they’re not showing), if you feel there are pre-existing css classes which will do the job.

Finally, You could change how the form html displays entirely by using php, the guidance in the FAQ – the first question at the time of writing this -, the guidance in the help tab, and responses to other support questions.

Hope this helps.

Cheers,
Joe

P.S. I’m marking this topic as resolved as it is an issue outside the responsibility or remit of this plugin. However, if you would still like further support, please feel free to respond and I’ll help as best I can.

Hi Joe,

thanks a lot for the quick reply. I am a newby to HTML and CSS. Still working my way through the Basics. I am glad I was able to find my Stylesheet. Could you let me know where I should add the code you were talking about?

[ Moderator note: 2,350 lines of CSS code deleted. That’s too much to post here, please provide a link to your site. ]

Probably the most appropriate place to add it is under “General Structure” in the same way as the other css rules have been put there.

Cheers,
Joe

P.S. No need to send the whole css file in future, css is publicly available on your site and I can easily find it with my browser’s dev tools – f12 in chrome and firefox, btw, a very useful feature; it allows you to test out bits of css and html (edits and additions), pause and play javascript so you can debug it, modify cookies, check how long each asset (file, essentially) is taking to be served over the network, and loads more. It is a very good way of getting used to formatting, design and coding.