MozillaZine


Background colors change.

User Help for Mozilla Firefox
Butch76
 
Posts: 2
Joined: September 29th, 2021, 7:45 am
Location: Near former NAS Millington TN (KCQA)

Post Posted September 29th, 2021, 7:54 am

I am using FF V92 64 bit and want to know if the dark and teal colors can be changed or are they baked in?

Image


Image

LIMPET235
Moderator

User avatar
 
Posts: 39664
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted September 29th, 2021, 8:07 am

Moving to Firefox Support...

&...
To post images here..
After you've taken the screen shot/s...
Reduce it/them to around 600 x 500 or so in your favourite image editor, (Be sure to remove any personal info.)
& upload them to your favourite image hosting site.
> https://imgur.com/
> https://imgbox.com/
> http://www.imagebam.com/
> http://postimages.org/

eg;...Using "postimages.org",
0/. Upload your image.
1/. Select > from the "Do not resize" drop down, 640 x 480.
2/. No expiration. (Leave as default or as you require.
3/. Choose > Images to upload.
3a/. After the image/s have been uploaded.
4/. Select > Hot Link for Forum.
5/. Paste that link in your forum thread.
6/. Your image will be displayed in your post.
Ancient Amateur Astronomer
Win-7-HP/IntelĀ® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-62.0-79.0-93.0/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.12.
W.M.Y.C.
(Always choose the "Custom" Install.)

morat
 
Posts: 4843
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 29th, 2021, 3:33 pm

Try something like:

Code: Select all
/* Firefox userContent.css */

:root {
  --in-content-accent-color: red !important;
  --in-content-primary-button-background: lime !important;
}

userContent.css
http://web.archive.org/web/202102172114 ... ontent.css

Reference
http://searchfox.org/mozilla-release/so ... on.inc.css

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

Similar thread
http://old.reddit.com/r/firefox/comments/ntd2oh
Last edited by morat on September 29th, 2021, 3:56 pm, edited 1 time in total.

jscher2000

User avatar
 
Posts: 11467
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 29th, 2021, 3:46 pm

As a footnote, to style the Settings page, morat is correct that these rules go into a userContent.css file (and not a userChrome.css file, which is the file that failed to work in the Reddit thread).

limp
 
Posts: 122
Joined: September 3rd, 2008, 4:26 pm

Post Posted October 3rd, 2021, 12:02 pm

morat's

:root {
--in-content-accent-color: red !important;
}

succeeds in removing that horrible cyan/tea/garbage--whatever you want to call it--color from two items
which heretofore have defied all my attempts to change their color using "official" CSS:

A category in the "selected" state in Add-ons Manager;
The check marks in the search shortcuts list in Settings > Search.

However, that awful color remains invulnerable to change in the following "about:" pages:

Remote Debugging(about:debugging);
Protections Dashboard (about:protections);
Saved Logins (about:logins);
Studies (about:studies).

Butch76
 
Posts: 2
Joined: September 29th, 2021, 7:45 am
Location: Near former NAS Millington TN (KCQA)

Post Posted October 3rd, 2021, 12:58 pm

Thanks for all the support, actually, I was looking for a way to change the teal color for the following popups in FF

Image

and

Image

limp
 
Posts: 122
Joined: September 3rd, 2008, 4:26 pm

Post Posted October 3rd, 2021, 2:03 pm

It depends on what type of dialog it is and where it appears. Use Browser Toolbox to get its ID or class name,
and enter your code in userChrome or userContent, whichever is appropriate for a given dialog. Basically, the idea is this:

Code: Select all
/* Dialog buttons */

   .dialog-button-box button[dlgtype="accept"]
     { background-color: #0084c0 !important;
       color: #eee !important; }

   .dialog-button-box button[dlgtype="accept"]:hover
     { background-color: #00a2ed !important;
       font-weight: bold !important; }

   .dialog-button-box button[dlgtype="cancel"]
     { border: 1px solid #666 !important;
       background-color: #2b2a33 !important;
       color: #eee !important; }

   .dialog-button-box button[dlgtype="cancel"]:hover
     { background-color: #5b5a66 !important;
       font-weight: bold !important; }


...and for check boxes, like this:

Code: Select all
/* Check boxes */

   popupnotification
   checkbox:not([checked="true"]) image
     { background-color: #111 !important; }

   popupnotification
   checkbox:not([checked="true"]):hover image
     { background-color: #0084c0 !important; }

   popupnotification checkbox[checked="true"] image
     { background-color: #0084c0 !important;
       fill: #eee !important; }

   popupnotification checkbox[checked="true"]:hover image
     { background-color: #00a2ed !important; }

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 8 guests