A few (related?) color issues

Hello @nauti1us,

Thank you for reaching out. I hope you’re doing well ??

1. You can change the color of the dropdown links by using the following CSS code:

.primary-menu .sub-menu a
{
  color: #11a5df;
}

Feel free to change the color, I chose the one I find most suitable ??

2. Yes, it can be changed. You can use the following CSS code:

::selection
{
  background: black;
}

Again, feel free to change the black color to any other color you’d like.

3. You can change the color of the inputs by using the following CSS code:

input, textarea
{
  color: black;
}

Also, I noticed that the arrow for search box is also white, I advise correcting this by using the following CSS code:

#searchform > button > svg
{
  fill: black;
}
#searchform > button > svg:hover
{
  fill: black !important;
}

4. This one has been fixed in the point 3. ??

Here’s the CSS code altogether:

.primary-menu .sub-menu a
{
  color: #11a5df;
}
::selection
{
  background: black;
}
input, textarea
{
  color: black;
}
#searchform > button > svg
{
  fill: black;
}
#searchform > button > svg:hover
{
  fill: black !important;
}

You can copy it and add it to your Theme Customizer (Appearance -> Customizer -> Additional CSS).

Let me know if this worked for you. Have a wonderful day.

Best Regards,
Pavle

• This reply was modified 4 years, 4 months ago by gdpavle.

Hi Pavle – thanks so much for looking into this – most of the issues are fixed but 2 remain outstanding:

When typing into the search bar, the text still isn’t readable, although when you highlight it, you can now see what you typed.

Same goes for adding a comment to a post or using the contact form – when you type in the box, you can’t see anything, but when you click off the active part, the text becomes readable.

The ‘post comment’ button is still white, until it’s hovered over. I’ve tried to attach screengrabs to show this and the code as pasted in.

Hi Pavle – I’ve done some googling and the addition of the following CSS appears to have fixed the text color, but only in the following 2 places:

– Contact us form > Message field (no the other fields)
– Newsroom > Comment form > Comment field (no other fields)

input, select, textarea{
color: black;
}
textarea:focus, input:focus {
color: black;
}

…So the current CSS code looks like this – am I on the right path here? Thanks

.primary-menu .sub-menu a
{
  color: #11a5df;
}
input, select, textarea{
    color: black;
}
textarea:focus, input:focus {
    color: black;
}
::selection
{
  background: black;
}
input, textarea
{
  color: black;
}
#searchform > button > svg
{
  fill: black;
}
#searchform > button > svg:hover
{
  fill: black !important;
}

Hey @nauti1us,

You can try adding the following CSS code to fix the search bar letters:

#search-field
{
  color: black;
}

This code should fix the contact form letters:

#author, #email, #url, #wp-comment-cookies-consent, #comment
{
  color: black;
}
#submit
{
  background: hsl(221, 51%, 28%);
}

Please let me know if this worked for you. ??

Best Regards,
Pavle

Pavle – we’re good, thank you SO MUCH!

The only field that wasn’t initially working was the name field in the contact form, so I added #name to the second batch of code above and it worked.

#author, #name, #email, #url, #wp-comment-cookies-consent, #comment
{
  color: black;
}

Again, I appreciate all the help!