Default color of highlighted text (white) makes things invisible

  • Resolved DGLauren

    (@dglauren)


    9 years, 8 months ago

    Hi! I finally got this rascal launched, after spending almost two years on it…mostly spent watching tutorials, reading and studying HTML, CSS, etc. Now I have a site you can see. Makes this so much easier than trying to describe what you can’t.

    My client’s site and my first build: https://www.surrealprimitive.com

    It has a white background, so if you select text to highlight it, the default white renders it invisible. Could someone please tell me where in the code this is located so I can change it? I use a child theme CSS.

    Thank you! I have two other issues, so I’ll post those as separate topics.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi DGLauren. The issue lies in the way the theme applies the Theme Options > Styling > Primary Color. That color is also used as the background for any selected text. So, since that color is set to white, the highlighted white text “disappears”. Adding the following css to your child theme style.css file should fix it:

    /* override selected text background; set to red */
::selection {
  background: #f00 !important; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #f00 !important; /* Gecko Browsers */
}

    Change the color to whatever you like; this thread lists the various browser/OS defaults.

    Thread Starter DGLauren

    (@dglauren)

    Thank you so much! Worked perfectly.

    You’re welcome. Glad I could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Default color of highlighted text (white) makes things invisible’ is closed to new replies.