userChrome: keep selected special folder icons from changing

[Shemja]

I installed my own folder icons and a different "selected" folder icon. These overrode the special folder icons so I made my own and installed them. The special icons work great until I click on one. Then they revert to my general "selected" icon. I want my special folder icons to remain the same when selected.

I moved the "selected" code down to follow the special folders code and put it back up above them, but it still overrides the special folder icons when I click them. I also tried adding code for selected icons of special folders following other code patterns that work, but since I really don't understand CSS I'm just guessing. I've customized a lot of my TB that way, but not surprisingly, this attempt did not work. Here's what I tried (pls ignore my ignorance):

Code: Select all

/* Spam Folder  */
.tabmail-tab[type="folder"][SpecialFolder="Spam"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Spam),
treechildren::-moz-tree-image(folderNameCol, specialFolder-Spam, selected) {
	list-style-image: url("Envelope JUNK Flame_Teal_CyanFill.svg") !important;
	height: 20px !important;
	width: 24px !important;
}

and

Code: Select all

/* Spam Folder  */
.tabmail-tab[type="folder"][SpecialFolder="Spam"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Spam),
.tabmail-tab[type="folder"][SpecialFolder="Spam"], treechildren::-moz-tree-image(folderNameCol, specialFolder-Spam, selected) {
	list-style-image: url("Envelope JUNK Flame_Teal_CyanFill.svg") !important;
	height: 20px !important;
	width: 24px !important;
}

I searched the web and this forum for help, but didn't find anything that helped. Anyone know the best way to keep my special folder icons from changing to the selected main folder icon without disabling that?

Also, the following refuses to change the account icon, and it doesn't matter in what order I put it. Ideas?

Code: Select all

/* ACCOUNT FOLDER ICONS */
/* Doesn’t work */
#folderTree > treechildren::-moz-tree-image(folderNamCol, isServer-true) {
	list-style-image: url("FileFolder_Teal_CyanFill.svg") !important;
	height: 16px !important;
	width: 20px !important;
}

[morat]

Isn't it Junk, not Spam?

i.e. specialFolder-Junk and [SpecialFolder="Junk"]

Reference
http://searchfox.org/comm-esr102/search ... e&path=css
http://searchfox.org/comm-esr102/search ... e&path=css

Maybe use selected and focus, instead of selected only.

[Shemja]

Good idea, but it doesn't work. And yeah, I have both spam and junk folders.

[morat]

The specialFolder-Spam property and [SpecialFolder="Spam"] selector don't exist in the source.

I can style the drafts folder.

Examples:

Code: Select all

/* Drafts */
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
  list-style-image: url("https://bugzilla.mozilla.org/favicon.ico") !important;
}
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts, selected, focus) {
  list-style-image: url("https://forum.mozilla-russia.org/uploaded/custombuttons_button.png") !important;
}

Code: Select all

/* Drafts */
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts),
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts, selected, focus) {
  list-style-image: url("https://forum.mozilla-russia.org/uploaded/custombuttons_button.png") !important;
}

Code: Select all

/* Drafts */
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts),
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts, selected, focus) {
  list-style-image: url("chrome://messenger/skin/icons/junk.svg") !important;
  fill: none !important;
  stroke: none !important;
}

Maybe use a png file instead of a svg file. You don't have to deal with fill and stroke with a png file.

Maybe there is a problem with the svg file. Open the svg file using the error console as a test.

Code: Select all

(function () {
  document.getElementById("tabmail").openTab("contentTab", {
    url: "chrome://messenger/skin/icons/junk.svg",
  });
})();

note: use uri scheme like "file:///C:/.../chrome/FileFolder_Teal_CyanFill.svg"

[Shemja]

I cannot stylized TB, and I have no clue why. I tried the above code and it does not work. I made my SVG files. They're flat and should work, but just to be sure, I swapped it for PNG. Still can't make it stick to my special icons when selected-focused. I'm baffled why the selected/focus icon change is overriding everything so I'm just disabling it. I still have text highlighting that works when selected.

I'm having a similar issue with my message header view. It will not resize the subject line with code that works for others. I'm beginning to wonder if it's because I'm on a Mac. My TB version now is 102.7.1. Mac 12.6.

[morat]

Nothing works? Even a style like...

Code: Select all

* { background-color: orange !important; }

Or just icon styles for the folder pane aren't working?

Are you using a theme addon like Phoenity Icons? Try disabling your addons.

Phoenity Icons
http://addons.thunderbird.net/thunderbird/addon/986685

Troubleshoot userChrome.css
http://forums.mozillazine.org/viewtopic ... #p14887480

[Shemja]

I should have been clearer. I did not mean nothing works in all TB stylizing, just preventing the icon itself from changing to the selected-focused icon. I'm guessing the selected-focused icon setting overrides all other icon settings, even if I try to add an additional selected-focused code after it.

I can add the background color that stays the same regardless of selection. I'm not using an icon theme add-on, just my own icons I put in the Chrome folder.