Icon replacement (using userChrome.css)

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

Icon replacement (using userChrome.css)

Post by oceanmonkey »

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: 6408
Joined: February 3rd, 2009, 6:29 pm

Re: Icon replacement (using userChrome.css)

Post by morat »

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: 17
Joined: February 27th, 2009, 12:47 am

Re: Icon replacement (using userChrome.css)

Post by oceanmonkey »

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: 6408
Joined: February 3rd, 2009, 6:29 pm

Re: Icon replacement (using userChrome.css)

Post by morat »

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: 17
Joined: February 27th, 2009, 12:47 am

Re: Icon replacement (using userChrome.css)

Post by oceanmonkey »

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.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Icon replacement (using userChrome.css)

Post by patrickjdempsey »

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: 6408
Joined: February 3rd, 2009, 6:29 pm

Re: Icon replacement (using userChrome.css)

Post by morat »

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

Re: Icon replacement (using userChrome.css)

Post by oceanmonkey »

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: 17
Joined: February 27th, 2009, 12:47 am

Re: Icon replacement (using userChrome.css)

Post by oceanmonkey »



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: 6408
Joined: February 3rd, 2009, 6:29 pm

Re: Icon replacement (using userChrome.css)

Post by morat »

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: 17
Joined: February 27th, 2009, 12:47 am

Re: Icon replacement (using userChrome.css)

Post by oceanmonkey »

Thanks! It works for me :D
Gloops
Posts: 106
Joined: April 19th, 2006, 6:12 am

Re: Icon replacement (using userChrome.css)

Post by Gloops »

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.
Post Reply