Search 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

TB 78 - how to change color of icon for contacts in Address Book

  • 10 replies
  • 1 has this problem
  • 1 view
  • Last reply by BillH

more options

I was wondering how I could change the color of the default icon on each contact in the Address Book. I had asked this question at the end of another thread about changing folder colors, but thought it would be more appropriate to have a separate topic.

I have been able to find how to use CSS code to change the default folder icon colors in the folder pane, on the tabs, and in the menus. I was hoping there was a also a way through CSS to change the color of the default icon on each contact in the Address Book, but have been unable to figure out how to do that.

Is that possible?

Thanks! Bill

I was wondering how I could change the color of the default icon on each contact in the Address Book. I had asked this question at the end of another thread about changing folder colors, but thought it would be more appropriate to have a separate topic. I have been able to find how to use CSS code to change the default folder icon colors in the folder pane, on the tabs, and in the menus. I was hoping there was a also a way through CSS to change the color of the default icon on each contact in the Address Book, but have been unable to figure out how to do that. Is that possible? Thanks! Bill

Chosen solution

Thanks for the idea. I didn't even know I could do that. I downloaded the Phoenity Icons installer, changed it to .zip, and opened it and poked around.

I found the icon that shows on each contact when Phoenity Icons is enabled. I found the reference to it in a file called cardDialog.css. This is the code:

.person-icon {

 margin: 3px;
 list-style-image: url("icons/abcard.png");

}

Since I don't want that icon and just want to change the color of the default icon, I added this to my userChrome.css file:

.person-icon {

 margin: 3px;
 color: red !important;

}

That didn't work. So, I'm thinking I need to tell it more info like maybe the window name or something? There are also files called abContactsPanel.css, abResultsPane.css, and addressbook.css. Do I need to add a reference to abContactsPanel, abResultsPane, or addressbook somehow?.

Edit:

I did more searching and found another reference to abcard.png. In the abResultsPane.css file it had this:

treechildren::-moz-tree-image(GeneratedName) {

 margin-inline-end: 2px;
 list-style-image: url("./icons/abcard.png");

}

I only wanted to change the color of the default icon, not use a new icon so I coded this in my userChrome.css:

treechildren::-moz-tree-image(GeneratedName) { color: red !important; }

This worked!

Thanks to everyone for their help on this and especially to @sfhowes for the idea of looking into the Phoenity Icons file.

Bill

Read this answer in context 👍 1

All Replies (10)

more options

I was looking into this but since the previous versions never had this, it has not been so easy to locate information.

more options

@Toad-Hall,

I figured you were probably looking into it from the other topic where I posted.

I thought I might be able to figure it out using the Developer Toolbox in TB, but didn't have any luck. I'm thinking there has to be element names for the address book and each contact and the icon, but who knows what they are and what syntax to use to change the values even if you know the element names.

I know the addon Phoenity Icons changes these so there must be a way.  :-)

Thanks! Bill

Modified by BillH

more options

If you download the Phoenity Icons installer xpi, change the extension to zip, open the archive and then the content\skin\addressbook folder, there might be some clues in the addressbook.css file.

more options

Chosen Solution

Thanks for the idea. I didn't even know I could do that. I downloaded the Phoenity Icons installer, changed it to .zip, and opened it and poked around.

I found the icon that shows on each contact when Phoenity Icons is enabled. I found the reference to it in a file called cardDialog.css. This is the code:

.person-icon {

 margin: 3px;
 list-style-image: url("icons/abcard.png");

}

Since I don't want that icon and just want to change the color of the default icon, I added this to my userChrome.css file:

.person-icon {

 margin: 3px;
 color: red !important;

}

That didn't work. So, I'm thinking I need to tell it more info like maybe the window name or something? There are also files called abContactsPanel.css, abResultsPane.css, and addressbook.css. Do I need to add a reference to abContactsPanel, abResultsPane, or addressbook somehow?.

Edit:

I did more searching and found another reference to abcard.png. In the abResultsPane.css file it had this:

treechildren::-moz-tree-image(GeneratedName) {

 margin-inline-end: 2px;
 list-style-image: url("./icons/abcard.png");

}

I only wanted to change the color of the default icon, not use a new icon so I coded this in my userChrome.css:

treechildren::-moz-tree-image(GeneratedName) { color: red !important; }

This worked!

Thanks to everyone for their help on this and especially to @sfhowes for the idea of looking into the Phoenity Icons file.

Bill

Modified by BillH

more options

deleted by author

Modified by BillH

more options

To change the colors of the address book and list icons in the Directory Pane, add similar code:

treechildren::-moz-tree-image(DirCol) {
color: blue !important;}

treechildren::-moz-tree-image(DirCol, DirCol, IsMailList-true) {
color: green !important;}

I tried to replace the address book icon with a custom png, but the following code doesn't work:

treechildren::-moz-tree-image(DirCol) {
  margin-inline-end: 2px;
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACYklEQVR4nI1TTWsTURQ9M5mJIVZD2yANxQ+oXxTU0nThIujKiBbcKkhxIYj4B7SC0GUV/AGi0IWuFKw24KKiiHQhgoILRVuwRDS1lab5mszHm/ee971JWhtEvPBmmDfvnHvuufcZ+DMm5KAB3JcSw/ifMLDbWv84NZs311am96YRu5Q10RUHhGwtOtnf3wuPAy4DFsrAzTnCcKQMZO/kDANPKGvvv5L1pBK4ff0EDh7I4MMycLkAxXzYMk3j4dFDO7bduJiFbRmgb0hiY6FEwDhcn8PxGO5Of8bVWy/w9N55mKSoHZYQMnPtwhBGBtMgJag3GTgncCDgBSEsy4RPRGOn9+HK5ByKPyqA3b1BoB7JRGTFVGEeDSKQVDhvLUV65vgexK2YPhMSubCxmYBUYLXqoVoPcO7kAHq2b9E/yzUfUzNfUHMCKlfqPS6i1Q5TswpB9QpN1BlkBzj5wVsoOgaqaLMCBY7bMdi2iQfPFtBWJQhNnup9xiIC1cqgk0A5zUKOY8MZOM1AZ2VUqwIpE8NQGRqhfJqDptlB4Lgh6g7Do+dftWmypUCZqMCjuV3aXBUNejmdBOpnhQwcze3EeotJBonSStaUwWSkiroPVNtWxeBqggrtqi7MvvkeEajxVW5LoRUc2Z/WHdFn6TVfi+yg9U0TLJdddCVtnM0PRCVI6GkMyXk1ka/elVD61dSoVdfE259wKNFjTBiBRYClwutiOjfUZxeXGjTKEYEC+2Si54VYLNXxcbGK+NYkXq6kXNrywDCuCPVlol7NUM825vNvEU8AI3m6VX3vCTVG2T+p7d8fNUSdHLU5bQAAAABJRU5Erk");
  -moz-image-region: auto !important;
}
more options

@sfhowes

I had found the code for the directory pane and made those changes as well. I am OK with the default icon as long as I can color it, so hadn't tried to use a custom png. I always put the .png files in the Chrome directory itself. This code worked for me:

treechildren::-moz-tree-image(DirCol) {

 margin-inline-end: 2px;
 list-style-image: url("xxxx.png") !important; 

}

Bill

more options

deleted by author

Modified by BillH

more options

Thanks, I omitted the all-important !important item. If the icons are stored in the icons subfolder of chrome, the code looks like:

treechildren::-moz-tree-image(DirCol) {
  margin-inline-end: 2px;
  list-style-image: url("./icons/addrbook.png") !important;}

treechildren::-moz-tree-image(DirCol, IsMailList-true) {
  margin-inline-end: 2px;
  list-style-image: url("./icons/ablist.png") !important;}
more options

@fshowes

That works great. I moved all my icons which helps make the chrome folder much less cluttered.

Thanks, Bill