This thread was archived. Please ask a new question if you need help.
Wrong text/box colors on specific sites
I just switched from chrome to firefox because an update changed the font and background colors of context menus to white, making them unreadable.
I'm having a similar issue in firefox now, but only on youtube. Comments (just comments), have their text color set as white so they're unreadable. The textbox to type a comment is normal, white background, black text.
I'm using a high contrast theme on windows, black backgrounds and white text, and I have a theme in firefox with black backgrounds and grey text in options, new tab, homepage, etc.
I have Allow pages to choose their own fonts, instead of my selections above checked and Override the colors specified by the page with my selections above: set to Never. Use system colors is unchecked, and the colors I have selected (should I set the override) are black text and white background.
All other site's I've visited are normal, just youtube is having this issue with text. Although some what related, in the message center on facebook, the textbox has a black background and white text. There's been a couple of other sites with the same coloring for the textboxes, but no issues otherwise.
Is there a way to change colors on sites specifically, or some other workaround?
All Replies (4)
Such an issue can possibly happen if a website only sets the background-color and expect the text color to be default (black) or the other way around. You would have to use a custom CSS rule to correct the text color or background color in such a case. It is also possible that background images are used.
You can right-click and select "Inspect Element" to open the Inspector ("3-bar" menu button or Tools > Web Developer) with this element selected to check the CSS rules.
Doesn't look like a text color is set with youtube. Background color is set to "transparent." I don't really have any experience with CSS editing and barely any with the element inspector so I'm not exactly sure how to go about editing/changing it.
You could try an extension such as the following:
Alternately, you could craft a custom CSS rule and apply it to the page using either a userContent.css file or the Stylish extension.
You can look at the NoSquint extension to set font size (text/page zoom) and text color on web pages.