Søg i Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

userChrome.css

  • 11 svar
  • 2 har dette problem
  • 394 visninger
  • Seneste svar af r0m4n

more options

Hello, I have been using a custom userChrome.css in the past, but it does not work since I upgraded to 115.0.1

Is the userChrome.css still supported? I have turned it on in config mgr, and tried every resource I cna find on the web, but my userChrome.css is ignored.

TIA...

Hello, I have been using a custom userChrome.css in the past, but it does not work since I upgraded to 115.0.1 Is the userChrome.css still supported? I have turned it on in config mgr, and tried every resource I cna find on the web, but my userChrome.css is ignored. TIA...

Valgt løsning

In Folder Pane, I've managed to get the text name of folder to be red if it has new mail using this:


/* Folder Pane - colour of text if new mail */

.new-messages > .container > .name {
  color: red !important; 
}


It also sets the account name text as red so it acts the same as default but just uses red instead.

Læs dette svar i sammenhæng 👍 3

Alle svar (11)

more options

It's still supported in 115, but many elements have been changed, so that some code that worked in 102 no longer works in 115. You can search this forum, and others, also, for examples of working code in 115, or state what it is you wish to modify.

more options

Hello and thank you for the reply.

I am simply trying to set my new unread emails and the folder that contains them to red.

I have tried code from the web but everything I put in the userChrome.css is ignored.

Here is an example of what I have tried...

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

  1. folderTree > treechildren::-moz-tree-cell-text(folderNameCol, biffState-NewMail, isServer-true) {
font-weight: normal !important;
color: Red !important;

}


TIA - note the 1. bullet point is a # in my code

Ændret af steve553 den

more options

I've got the following for unread messages, but I've yet to get specifically for New Unread.

/* Change color of unread messages to 'red' or use hex colour '#ff0000'  */

#threadTree tbody [data-properties~="unread"] {
   color: red !important;
}

Ændret af Toad-Hall den

more options

Awesome, thank you. So far so good. Unread email now red. Now just to solve the folder to be red....

more options

Valgt løsning

In Folder Pane, I've managed to get the text name of folder to be red if it has new mail using this:


/* Folder Pane - colour of text if new mail */

.new-messages > .container > .name {
  color: red !important; 
}


It also sets the account name text as red so it acts the same as default but just uses red instead.

Ændret af Toad-Hall den

more options

That is awesome, huge shout out thank you....

more options

I managed to change the highlighting and hover colors from blue to my favorite in spaces mail, calendar and tasks. but this did not work in address book. I want to switch from blue to a more purple color when hover and select the address books and contact cards. (see screenshot below)

Tried to figure it out with the developer web tools but it's a bit tricky. Should be something like card or card-container? Does anyone know?

Is there an easier way to figure out the elements than using the developer web tools? - Asking for a friend ;)

more options

R0m4n said

I managed to change the highlighting and hover colors from blue to my favorite in spaces mail, calendar and tasks. but this did not work in address book. I want to switch from blue to a more purple color when hover and select the address books and contact cards. (see screenshot below) Tried to figure it out with the developer web tools but it's a bit tricky. Should be something like card or card-container? Does anyone know? Is there an easier way to figure out the elements than using the developer web tools? - Asking for a friend ;)

First thing to keep in mind is that Address Book css should be in the userContent.css file. This page, together with the Developer Toolbox, provides some guidance. I came up with an example that is shown in the attached picture.

#cardsPane{
  background-color: pink !important;
}

table[is="tree-view-table"] td {
  background-color: pink !important;
}

tr[is="ab-card-row"] td > .card-container {
  background-color: lightgrey !important;
}

tr[is="ab-card-row"].selected td > .card-container{
  background-color: yellow !important;
  color: blue !important;
}

tr[is="ab-card-row"]:hover td > .card-container{
  background-color: cyan !important;
    color: blue !important;
}
more options

sfhowes said

First thing to keep in mind is that Address Book css should be in the userContent.css file. This page, together with the Developer Toolbox, provides some guidance.

Thanks for your fast answer. This looks a lot like the solution I'm looking for, but it didn't work for me. I still haven't understood what I need to import so that the changes affect the address book and not mail. The only thing that has changed was the list of mails turned pink through your example, related code:

table[is="tree-view-table"] td { background-color: pink !important; }

Maybe you can be a bit more specific about the adressbook.css import. I think, this will be very helpful.

Thanks in advance!

Cheers R0m4n

more options

R0m4n said

sfhowes said

First thing to keep in mind is that Address Book css should be in the userContent.css file. This page, together with the Developer Toolbox, provides some guidance.

Thanks for your fast answer. This looks a lot like the solution I'm looking for, but it didn't work for me. I still haven't understood what I need to import so that the changes affect the address book and not mail. The only thing that has changed was the list of mails turned pink through your example, related code:

table[is="tree-view-table"] td { background-color: pink !important; }

That code will make the Threads Pane (message list) background pink if it's in the userChrome.css file. All the code in my previous reply should be in the userContent.css file so that it only affects Address Book. userContent.css should be in the same chrome folder as userChrome.css.

There's no need to import aboutAddressBook.css - it's cited just as a reference to identify css elements.

Maybe you can be a bit more specific about the adressbook.css import. I think, this will be very helpful. Thanks in advance! Cheers R0m4n
more options

Oh, wow! That was too easy. I've tried forwards and backwards with includes. :D Works now! Thanks again!

Cheers R0m4n