chromium - Chrome HTML5 notifications displaying white font on white background
2014-04
When filling an input with the wrong type or pattern and hitting "submit", Chrome displays notifications as shown below:
The thing is, I'm using a theme with a dark background on my system, so the default font is white (or close to it). For some reason Chrome uses that font on those notifications, resulting in the following:
I tried changing Use GTK+ Theme
to Use Classic Theme
on chrome://settings
, but the problem persisted. The only way to "solve" it was changing to a theme with a clear background (on my system, not on the browser).
Is there any workaround to it?
I'm currently using Chromium Version 31.0.1650.63 Built on Debian 7.2, running on Debian 7.3 (238485)
.
Only WebKit browsers allow styling of validation bubbles using the
-webkit-validation-bubble*
CSS styles.
However, since Chrome moved away from WebKit to Blink, this was removed.
See for example
Issue 259050: ::-webkit-validation-bubble stopped working in Chrome Blink.
Your only option now is to override the general validation bubble mechanism and issue your own message.
In a form, you can use the novalidate attribute and do your own client-side validation in the Submit button:
HTML
<form novalidate> ... </form>
JavaScript
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('invalid', function(e) {
e.preventDefault();
//Possibly implement your own here.
}, true);
}
A nice article about form validation is Constraint Validation: Native Client Side Validation for Web Forms.
The only way I can think of to do this on the browser side only is to use a User Stylesheet. On Ubuntu (based on Debian), the file you want should be stored here:
$HOME/.config/chromium/Default/User StyleSheets/Custom.css
You'll have to use the Developer Tools to use the Inspect Element option to find out the exact CSS styling element to override and then set "color: black !important;" on it in the file above.
As a simple example to illustrate, you can add something like:
body { color: green !important; }
to the custom.css
file and save it to see the effect (which is immediate) on all text on any web page with a body element (which is basically any site page).
Recently Gmail introduced an HTML5-based desktop notification feature for Google Chrome users (see this). It's very useful, however, the notifications disappear too quickly (in about 5 seconds) and I couldn't find a way to change the display time. Ideally, I would like the notification to stay for a few minutes if there is no user activity (or about 15 seconds if there is user activity). Is that possible?
Tip: in your Gmail settings choose "Mail notifications off".
Instead, install the Chrome extension Mail Checker Plus for Google Mail which gives you the option to set 'show time' for notifications.
Also, this extension shows more elaborate notifications, has a "Sound notifications" option, and a few other interesting settings.
Apparently not (well, not yet anyway):
From the "Learn more" link:
- Click the Settings link in the upper-right corner of Gmail.
- On the General tab, select the option you'd like in the Desktop Notifications section. You'll be able to turn Chat notifications on or off, and can also choose to turn email notifications off, receive notifications for all incoming email, or only those Gmail marks 'important'.
- Click Save.
And then on the Settings page on my Gmail account, I don't see anything about time to display. It's just this:
- New mail notifications on - Notify me when any new message arrives in my inbox
- Important mail notifications on - Notify me only when an important message arrives in my inbox
- Mail notifications off
When the notification appears, there is a setting icon in the box that allows you to set what corner the notification will appear in and for how long. When opening Chrome or Gmail in Chrome be ready to click it before it disappears.