Change colour of remote content and attachment reminder banners
There is a colour that's used in TB for at least two alerts: -- the banner at the top of a received email saying "To protect your privacy, TB has blocked remote content in this message" -- the reminder bar that pops up at the bottom of the compose window in case you forgot an attachment.
In my version (68.5.0, default theme) the exact colour is (255, 241, 96) or #FFF160. I'd like to change it. I seem to remember that in a previous version of TB it was a paler gold colour.
I don't know whether this is a Windows setting or a TB setting, and where it is stored. It doesn't seem to correspond to an option in TB's about:config. As I understand it, the default theme takes its colour scheme from Windows?? But I haven't noticed anything in Windows that takes this colour. I don't know what css class both of these banners belong to, or how to find out, or how to tweak the setting. If I knew the class, could I override the default with a setting in userchrome.css?
Any suggestions gratefully received. Thank you fellow TB users!
Chosen solution
In case it's helpful to anyone else, it works if you make a background-color declaration on #attachmentNotificationBox.
Changing the background colour for #attachmentNotificationBox > * leaves a yellow border round the edge (see screenshot from sfhowes). I guess this is because it only changes background for children of #attachmentNotificationBox and not for the whole element.
In order to inspect the compose window, open Developer Toolbox (Ctrl+Shift+I). A message will appear warning of the risks of establishing a remote connection. First select the compose window and then click OK on the warning message.
Many thanks to sfhowes for the solution.
Read this answer in context 👍 0All Replies (5)
See these topics about changing the remote content banner and the attachment reminder:
https://support.mozilla.org/en-US/questions/1273397#answer-1294650
https://support.mozilla.org/en-US/questions/1157661
For the latter, try adding a background-color declaration.
Thank you for the suggestions.
The first one is exactly what I want for changing the "blocked content" notification at the top of an email -- terrific.
The second one is about the attachment pane, i.e. how TB displays an attachment in a received message. I can successfully change the height and background of that pane.
However, I'm still stuck with the colour of the attachment reminder notification in the composition window of an outgoing message. I've tried guessing a css id #mail-notification-bottom by analogy with #mail-notification-top but it doesn't work. It works if I remove the id completely and just set a background colour for notification in general, but I don't know what else that will affect.
More generally, is there a way of finding out all the classes and ids that TB uses for its settings?
Modified by BC
Try this:
#attachmentNotificationBox > * {
background-color: grey !important;
}
See attached picture. I pieced this together from online sources, and you can probably add code to change the text color and the yellow remnants.
You're supposed to be able to identify the elements on a page with the Developer Toolbox (Ctrl+Shift+I), perhaps on the Style Editor tab, but I haven't taken the time to figure it out.
This particular warning can be disabled entirely in Options/Composition.
Brilliant! Thank you -- I'll investigate and see if I can figure it out from there. At the moment I can't get the Developer Toolbox to inspect the elements in a compose window -- it only seems to want to work with the main display window.
Now I know the ID I can try playing around with padding and margins and so on. Thanks again.
Chosen Solution
In case it's helpful to anyone else, it works if you make a background-color declaration on #attachmentNotificationBox.
Changing the background colour for #attachmentNotificationBox > * leaves a yellow border round the edge (see screenshot from sfhowes). I guess this is because it only changes background for children of #attachmentNotificationBox and not for the whole element.
In order to inspect the compose window, open Developer Toolbox (Ctrl+Shift+I). A message will appear warning of the risks of establishing a remote connection. First select the compose window and then click OK on the warning message.
Many thanks to sfhowes for the solution.