MozillaZine

Icon replacement (using userChrome.css)

User Help for Mozilla Thunderbird
oceanmonkey
 
Posts: 13
Joined: February 27th, 2009, 12:47 am

Post Posted October 1st, 2014, 11:34 pm

I'm trying to replace the folder pane icons in TB and have so far had success with most of them, using the following "userChrome.css" file (inside the "chrome" folder) along with new PNG icons (in the same folder):

Code: Select all
/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");  /* set default namespace to XUL */

/* Folder pane -font size & type */
#folderTree >treechildren::-moz-tree-cell-text {
  font-size: 9pt !important;
  font-family: Helvetica, sans-serif; }

/* Folder pane -Line spacing */
#folderTree >treechildren::-moz-tree-row {
  height: 20px !important; }


/* ###### Folder pane icon replacements ####### */
/* Mail "Inbox" icon replacement */ 
.tabmail-tab[type="folder"][SpecialFolder="Inbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
  list-style-image: url("smart_folder.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}

/* Mail "Sent" icon replacement */ 
.tabmail-tab[type="folder"][SpecialFolder="Sent"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
  list-style-image: url("folder.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}

/* Mail "Outbox" icon replacement */   
.tabmail-tab[type="folder"][SpecialFolder="Outbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
  list-style-image: url("folder.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}

/* Mail "Trash" icon replacement */ 
.tabmail-tab[type="folder"][SpecialFolder="Trash"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
  list-style-image: url("trash_narrow.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}

/* Mail "Junk" icon replacement */   
.tabmail-tab[type="folder"][SpecialFolder="Junk"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk) {
  list-style-image: url("trash_narrow.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}   

/* Mail "Drafts" icon replacement */ 
.tabmail-tab[type="folder"][SpecialFolder="Drafts"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
  list-style-image: url("document.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}

/* Mail "Templates" icon replacement */   
.tabmail-tab[type="folder"][SpecialFolder="Templates"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Templates) {
  list-style-image: url("document.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}
   
/* All mail account icon replacements */ 
treechildren::-moz-tree-image(folderNameCol, specialFolder-none, isServer-true, serverType-pop3) {
list-style-image: url("folder.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}   
 
/* "Local Folders" icon replacement */ 
treechildren::-moz-tree-image(folderNameCol, specialFolder-none, isServer-true, serverType-none) {
List-style-image: url("folder.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;}
 
/* Usenet newsgroup account icon replacement */   
#folderTree > treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp)
   {list-style-image: url("news.png") !important;}   
 
 


What's left is figuring out how to add custom icons for:

"Archive" folder
"Smart" (search) folders
Newsgroups
Any folder not already pre-defined above (mail sub-folders etc.)

Does anyone know how? I'm using TB 31.1.2 on a Mac.

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

Post Posted October 2nd, 2014, 4:01 am

Here are the css files that style those folders.

http://mxr.mozilla.org/comm-release/sou ... rMenus.css
http://mxr.mozilla.org/comm-release/sou ... erPane.css

I think "Smart" folder is SpecialFolder="Virtual".

oceanmonkey
 
Posts: 13
Joined: February 27th, 2009, 12:47 am

Post Posted October 2nd, 2014, 5:31 am

Thanks, this helped me get a replacement icon for the "Archives" and "Smart" folders (yes, it was "Virtual" as you said).
But I can't figure out how to add replacement icons for generic folders and newsgroups. Suggestions?

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

Post Posted October 2nd, 2014, 5:54 am

You need to put the generic folder entry before the other folder entries in the userChrome.css file.

Code: Select all
.tabmail-tab[type="folder"],
treechildren::-moz-tree-image(folderNameCol) {
  list-style-image: url("generic_folder.png") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;
}

News folder is ServerType="nntp".

oceanmonkey
 
Posts: 13
Joined: February 27th, 2009, 12:47 am

Post Posted October 2nd, 2014, 1:02 pm

It worked! I now have a generic icon replacement.
You're right about needing to put that folder entry before others -if I put it last all other folder entries would be ignored and they would all have the same folder icon.

As for news folder being ServerType="nntp", are you referring to this entry which I already have?:
Code: Select all
/* Usenet newsgroup account icon replacement */
#folderTree > treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp) {
  list-style-image: url("news.png") !important;} 


This gives me an icon for the news server, but I haven't been able to change the icons for the actual newsgroups. Still, they're now replaced with my new generic folder icon, so it's not all bad.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 2nd, 2014, 6:42 pm

TMK there is no mechanism in CSS to change individual non-folder icons in a TREE. This is all handled in the interface between the database and the tree. It's a weird limitation in XUL TREEs that has just always been sort of annoying.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

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

Post Posted October 2nd, 2014, 10:32 pm


oceanmonkey
 
Posts: 13
Joined: February 27th, 2009, 12:47 am

Post Posted October 3rd, 2014, 12:00 am

patrickjdempsey wrote:TMK there is no mechanism in CSS to change individual non-folder icons in a TREE. This is all handled in the interface between the database and the tree. It's a weird limitation in XUL TREEs that has just always been sort of annoying.


I see. Well, there's a definite improvement in getting those icons replaced by custom folder icons, so I can live with that :D

oceanmonkey
 
Posts: 13
Joined: February 27th, 2009, 12:47 am

Post Posted October 3rd, 2014, 1:52 am



I couldn't get these to work, but haven't heard about "folderMenus.css" or "folderPane.css" either. Neither putting them in the "chrome" folder or in the profile's root made any difference. I also downloaded the icons from the same site and created sub-folders (chrome/messenger/skin/) where I put them.

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

Post Posted October 3rd, 2014, 7:10 am

I got it working with the windows theme.

Code: Select all
/* Thunderbird userChrome.css */

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

/* Change newsgroup, e.g. mozilla.announce, icon */

.tabmail-tab[type="folder"][ServerType="nntp"],
treechildren::-moz-tree-image(folderNameCol, serverType-nntp) {
  list-style-image: url("https://www.facebook.com/favicon.ico") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;
}

/* Change news server, e.g. news.mozilla.org, icon */

.tabmail-tab[type="folder"][IsServer="true"][ServerType="nntp"],
treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp) {
  list-style-image: url("http://www.google.com/favicon.ico") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;
}

http://kb.mozillazine.org/UserChrome.css

Sorry, I'm not explaining this well.

I shouldn't have posted the folderMenus.css link since we only care about the folder pane and tab icons in the 3pane window.

oceanmonkey
 
Posts: 13
Joined: February 27th, 2009, 12:47 am

Post Posted October 6th, 2014, 3:04 am

Thanks! It works for me :D

Gloops
 
Posts: 43
Joined: April 19th, 2006, 6:12 am

Post Posted October 30th, 2017, 3:32 pm

morat wrote:I got it working with the windows theme.

Code: Select all
/* Thunderbird userChrome.css */

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

/* Change newsgroup, e.g. mozilla.announce, icon */

.tabmail-tab[type="folder"][ServerType="nntp"],
treechildren::-moz-tree-image(folderNameCol, serverType-nntp) {
  list-style-image: url("https://www.facebook.com/favicon.ico") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;
}

/* Change news server, e.g. news.mozilla.org, icon */

.tabmail-tab[type="folder"][IsServer="true"][ServerType="nntp"],
treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp) {
  list-style-image: url("http://www.google.com/favicon.ico") !important;
  -moz-image-region: rect(0 16px 16px 0) !important;
}

http://kb.mozillazine.org/UserChrome.css

Sorry, I'm not explaining this well.

I shouldn't have posted the folderMenus.css link since we only care about the folder pane and tab icons in the 3pane window.


Hello,
Sorry to come long later, this was quite self-explanatory once copied to userChrome.css :)
Nevertheless I wonder how to differentiate between the line of the server, and the ones of the newsgroups. While reading the style I thought "type=folder" would do it.

Return to Thunderbird Support


Who is online

Users browsing this forum: No registered users and 5 guests