I have been trying to find a way to preserve the font color even when an item is selected and/or hovered. (The font color depends on tag(s) applied.)

I have tried experimenting without the "!important" and with the css keywords "unset" and "revert." But I haven't had any luck yet.

Does anyone have any experience with this?

I think part of the problem was lost. When I mouse over any item in my list of emails, it turns dark (with white text). This is really bothering my eyes. Can I change it to not turn dark until I click it? Thanks. 78.3.3, Win 7

re :Which reminds me, Is there simple way to get to Config Editor Menu app icon > Options > General Scroll to the bottom to locate the 'Config Editor' button.

I have tried to get some interest in improving this 'Options/Preferences' layout. I created a bug with some structural ideas. https://bugzilla.mozilla.org/show_bug.cgi?id=1655250

If anyone could offer a comment to support what I requested it might get more interest from the developers to get on board as the intial design is full of good intentions but not so easy to locate stuff. I'm also asking for the 'Config Editor' to get it's own section - that would mean a bit of a rewrite as currently it is a sub window. But if you do not ask a reasonable request then it definately won't happen. At the moment I'm all on my own, so any help with comments supporting this bug, I would be grateful.

Thanks, toad-hall. Just updated to 78.4 and couldn't work out why the spacing had changed. Some others don't have the problem though, perhaps because I'm on W7 ? Got rid of the annoying double highlight select as well. Very happy :)

I have the double highlight still on 78.4.0, win 7. when i mouse over other email messages, they are black. Same for mail boxes. kind of irritating and confusing. can you eliminate this please (until I click them)?

I have the double highlight still on 78.4.0, win 7. when i mouse over other email messages, they are black. Same for mail boxes. kind of irritating and confusing. can you eliminate this please (until I click them)?

See my solution above for the double highlight. And yeah, I'd like to log a bug about it as well.

Thank you. I do not know CSS. However, I did create a chrome folder to remove the folder icons recently. This appears to be the CSS to eliminate the black mouse overs. But I am not sure how to implement it. Do I just add it to my "chrome" folder file userChrome.css after the existing CSS code? (I don't want to cause TB to crash and burn!). Thanks!

1. folderTree treechildren::-moz-tree-row {

height: 8pt !important; margin-bottom: -4px !important; }

1. threadTree treechildren::-moz-tree-row {

height: 8pt !important; margin-bottom: 0px !important; } /* This stops annoying lines when hovering over items */

1. folderTree treechildren::-moz-tree-row(hover),
2. folderTree treechildren::-moz-tree-row(selected),
3. threadTree treechildren::-moz-tree-row(hover),
4. threadTree treechildren::-moz-tree-row(selected){

margin-bottom: 0px !important;

Hi Tim,

If ever TB crashes and burns from some weird css you put in to the userChrome.css file, then just quit TB, make some edits (or temporarily remove the file from that folder) and things should go back to normal. Any errors in the file won't corrupt TB in any way.

If you want to add any new css to what's already in there from something else you've done, just add it before or after what is already there. Remember that if you have two bits of css code trying to alter the same thing (the stuff outside of curly brackets), then the last instance will take precedence thus overriding anything that went before.

Just in case you haven't worked it out yet for CSS, then anything written between a slash-asterisk and asterisk-slash will be totally ignored and is way for us to add comments and notes as reminders and to help others. That method is called commenting out and can also be used to exclude some css from doing its thing or that you don't want (without having to delete it in case you want to try it again later or remembering it for another time).

I attach a sample image of how my TB setup looks - I have everything to do with row heights set really close (adjust to your own taste) and my highlight colour for the active folder or email thread is orange (and the font switches to white and is not bolded as some users seem to like to do for active items). Hovering over emails (threads) or the folders gives a light grey background on everything except the current active folder or email. It seems this doesn't necessarily work the same for everyone but I have no idea why, playing around with the css is all I can suggest but I wonder if Windows theme colours play some role?

By not bolding the text at all when hovering or selecting it avoids any test jiggling around in what I see, everything just stays the same unless I click on it to activate it where it is enhanced just by colour and doesn't confuse me when a folder is already shown bold or not depending if there are unread or read emails in there.

My css code is as follows (below) and still works after an update again to TB v78.4.0 (32-bit) on Win10 Pro (64bit).

NB 1 - I read a good way to show code here and not have it mucked up by the commenting system (that might otherwise interpret it as code to change these very webpages) is to put a space in front of every line (including blank lines) - I don't think is this standard across all commenting systems but it seems to work well here by making it look different and seems to stay exactly as I paste/enter it.

NB 2 - just in case anyone is confused about how to create a userChrome.css file, it's just an ordinary text file (with .txt on the end) created in a basic text editor like Notepad (not things like Word), personally I use a free program called Notepad++, it really is useful and helps colour code .css files so you can see what's going on more easily. Your starter text/css file can be called whatever you like but when you put it in the specially named chrome folder (which at first you have to create in your TB profile folder), then you change it to userChrome.css - only then will TB recognise it (to see the file extensions, such as .txt or .css, then you also have to ensure that you have set Windows to show them (they are stupidly often off by default) - These notes differ for Mac/Linux users.

NB 3 - I actually have several test userChrome.css files in my chrome folder left over from trying things out. I just add something like -backup1 or -myoriginalTest to end of the filename and TB safely ignores them, useful while trying different versions of things out.

My current css code (with thanks to all those above):

/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* NB - I suppose the above line should always be kept at the top if you */
/* already have some other css present */

/* ----------------- FOLDER PANE ----------------- */

/* row height in folder pane */
#folderTree treechildren::-moz-tree-row {
height: 8pt !important;
margin-top: -2px !important;
margin-bottom: -2px !important;
}

/* remove thin blue row line artifacts remaining after hover in folder pane */
#folderTree treechildren::-moz-tree-row(hover),
#folderTree treechildren::-moz-tree-row(selected){
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* hovered item background color in folder pane, default #0A246A */
#folderTree treechildren::-moz-tree-row(hover){
-moz-appearance: none !important;
background-color: #EEEEEE !important;
}

/* hovered item text color in folder pane, default #FFFFFF */
#folderTree treechildren::-moz-tree-cell-text(hover){
color: #000000 !important;
}

/* selected item background color in folder pane, default #0A246A (dark blue)*/
#folderTree treechildren::-moz-tree-row(selected){
-moz-appearance: none !important;
background-color: #FF8000 !important;
}

/* selected item text color in folder pane, default #FFFFFF */
#folderTree treechildren::-moz-tree-cell-text(selected){
/*font-weight: bold !important;*/
color: #FFFFFF !important;
}

/* ----------------- THREAD PANE ----------------- */

/* row height in thread pane */
#threadTree treechildren::-moz-tree-row {
height: 8pt !important;
margin-top: -4px !important;
margin-bottom: -4px !important;
}

/* remove thin blue row line artifacts remaining after hover in thread pane */
#threadTree treechildren::-moz-tree-row(hover),
#threadTree treechildren::-moz-tree-row(selected){
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* hovered item background color in thread pane, default #0A246A */
#threadTree treechildren::-moz-tree-row(hover) {
-moz-appearance: none !important;
background-color: #EEEEEE !important;
}

/* hovered item text color in thread pane, default #FFFFFF */
#threadTree treechildren::-moz-tree-cell-text(hover){
color: #000000 !important;
}

/* selected item background color in thread pane, default #0A246A (dark blue) */
#threadTree treechildren::-moz-tree-row(selected) {
-moz-appearance: none !important;
background-color: #FF8000 !important;
}

/* selected item text color in thread pane, default #FFFFFF */
#threadTree treechildren::-moz-tree-cell-text(selected) {
-moz-appearance: none !important;
color: #FFFFFF !important;
}

End of my css (don't copy this line).

Toad-Hall said earlier:

I have tried to get some interest in improving this 'Options/Preferences' layout. I created a bug with some structural ideas. https://bugzilla.mozilla.org/show_bug.cgi?id=1655250

If anyone could offer a comment to support what I requested it might get more interest from the developers to get on board....

I have now added my two-pence worth and hope others do to - TB needs to be clearer in its use and configuration allowing users to know it well and to be in charge - at the moment, with TB's adoption and evolution towards newer standards, I fear it is failing and I want to see TB winning again. If you have found answers to your problems here, please also add a chime in at the bugzilla page to encourage change for the better.

On a slightly different line of complaint, but definitely still related to this extra white spacing issue, I recently discovered to my horror that the Tools>Account Settings page got an unwanted makeover. Not just moving it to a TB tab instead of its own more convenient pop-up compact (crucially resizable) window, but suddenly, due to a massive increase in pointless extra line spacing I now have to scroll pages and pages down to go through my approx 15 various email accounts (I do web dev work and need all those, sometimes more) (oh please can we have the ability to deactivate some accounts instead of deleting).

Sometimes I like to be able to have the Accounts Settings window open at the same time as seeing emails come in. With a tabbed view, seeing both things at once can no longer happen. I can partially solve the annoying tabbed page by dragging the tab out as a new window and resizing that (but it's still much wider!), but how on earth do I find the targets to adjust the CSS to bring everything back into a controllable and viewable general overview?

I wish they'd stop enlarging everything by spacing it out or at least allow us to control it, and do we really need to tab everything these days? With tabs it's either one or the other, not several things at once, so much for multitasking. I still hate the newer Options for throwing me over to a new tab and if an email pings in I have to keep clicking back and forth if I want to deal with things as they arise and often lose my train of thought when they disappear under another tab. Having a separate window instead of tabs keeps all those things alive in my mind and all visible at the same time.

Any pointers on finding the css targets for Account Settings anyone?

re :NB 2 - just in case anyone is confused about how to create a userChrome.css file, it's just an ordinary text file (with .txt on the end) created in a basic text editor like Notepad.

Just so everyone is clear....It is absolutely vital that the 'userChrome.css' file is NOT saved as 'userChrome.css.txt'. It must be saved as a CSS (Cascading Style Sheet Document), so it only has .css as the extension. If it gets saved as a Text file with a .txt extension then it will not work.

It can be difficult sometimes knowing what you have created because Windows has a habit of automatically not displaying some common extensions. If you sellect the 'View' tab in Explorer window to show 'Details', you will see the 'Type' column and it will state the type of format used. The 'View' tab also allows you to select the checkbox 'file name extensions', so you can see all the extensions. Finally, right click on the 'user Chrome.css' file and select 'Properties' option, this will tell you more information such as 'Type of file'; it should be Cascading Style Sheet Document (.css) and it opens with a text editor program like Notepad.

But what should you do if it has the wrong extension eg: 'user Chrome.css.txt' and 'Type' column says it is 'Text Document' and so does the 'Properties' information? Right click on the user Chrome.css.txt' file and choose to 'Rename'. When you remove the .txt part, you might get a warning about changing the file type, but you do want to change it, so select 'Yes'. Now the file should be correctly called 'user Chrome.css'.

re :Any pointers on finding the css targets for Account Settings anyone? Can we please keep this forum question on topic. The conversation has already attempted to stray a few times. The discussion must be relevant to original question or be something that would naturally be asked at same time, such as what effects the line height eg: font size and icon size, margins. I can understand why the hovering issue was also mentioned as css code was involved and it was part of original quesion.

But it is important to not stray off topic - this line spacing issue is for the 'Thread Pane'.

Account Settings is a completely different discussion, not even remotely connected and would require a new question being asked. Thanks.

My apologies Toad-Hall - I did ask myself if it was relevant and then evidently made the wrong decision - I felt the added white space being added generally in TB was an associated issue but yes, it's not as per the 'Thread Pane' title and perhaps deserves it's own new topic.

Also, great that you added the extra info on how to show file extensions in Windows. I touched on it by saying they are often off by default but for full clarity for those unaware I should have added how to check/activate.

Thank you Art!! I used your code and changed the colors for the folder and panes. I am using a light gray color for mouse over on both. I also added the code to remove the folder icons. Works great and looks great now.

Tim, I'd be interested in seeing your code to remove the folder icons.

Here is all the code I used to modify the folder and mail panes, including mouse-over colors. The last item is "remove folder icons and reduced margin". I did not write this, but rather got it from this support group. I do not know CSS, so please forgive any minor syntax errors. It works. It is stored in my user name, "chrome" folder (that I created, note lower case "c") as "userChrome.css". Be sure that it is saved as .css not .txt.

/* Do not remove the @namespace line -- it's required for correct functioning */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* NB - I suppose the above line should always be kept at the top if you */ /* already have some other css present */

/* ----------------- FOLDER PANE ----------------- */

/* row height in folder pane */

1. folderTree treechildren::-moz-tree-row {

height: 8pt !important; margin-top: -2px !important; margin-bottom: -2px !important; }

/* remove thin blue row line artifacts remaining after hover in folder pane */

1. folderTree treechildren::-moz-tree-row(hover),
2. folderTree treechildren::-moz-tree-row(selected){

margin-top: 0px !important; margin-bottom: 0px !important; }

/* hovered item background color in folder pane, default #0A246A (USE GRAY) */

1. folderTree treechildren::-moz-tree-row(hover){

-moz-appearance: none !important; background-color: #A0A4AF !important; }

/* hovered item text color in folder pane, default #FFFFFF (USE WHITE) */

1. folderTree treechildren::-moz-tree-cell-text(hover){

color: #FFFFFF !important; }

/* selected item background color in folder pane, default #0A246A (USE BLUE)*/

1. folderTree treechildren::-moz-tree-row(selected){

-moz-appearance: none !important; background-color: #0A246A !important; }

/* selected item text color in folder pane, default #FFFFFF (USE WHITE) */

1. folderTree treechildren::-moz-tree-cell-text(selected){

/*font-weight: bold !important;*/ color: #FFFFFF !important; }

/* ----------------- THREAD PANE ----------------- */

/* row height in thread pane */

1. threadTree treechildren::-moz-tree-row {

height: 8pt !important; margin-top: -4px !important; margin-bottom: -4px !important; }

/* remove thin blue row line artifacts remaining after hover in thread pane */

1. threadTree treechildren::-moz-tree-row(hover),
2. threadTree treechildren::-moz-tree-row(selected){

margin-top: 0px !important; margin-bottom: 0px !important; }

/* hovered item background color in thread pane, default #0A246A (USE GRAY) */

1. threadTree treechildren::-moz-tree-row(hover) {

-moz-appearance: none !important; background-color: #A0A4AF !important; }

/* hovered item text color in thread pane, default #FFFFFF (USE WHITE) */

1. threadTree treechildren::-moz-tree-cell-text(hover){

color: #FFFFFF !important; }

/* selected item background color in thread pane, default #0A246A (USE BLUE) */

1. threadTree treechildren::-moz-tree-row(selected) {

-moz-appearance: none !important; background-color: #0A246A !important; }

/* selected item text color in thread pane, default #FFFFFF (USE WHITE) */

1. threadTree treechildren::-moz-tree-cell-text(selected) {

-moz-appearance: none !important; color: #FFFFFF !important; }

/* Remove folder icons */ /*

• Do not remove the @namespace line -- it's required for correct functioning

*/

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

/* removed Folder Pane icons and reduced margin*/

1. folderTree treechildren::-moz-tree-image{

list-style-image: none !important; margin-left: -20px; }

I answered a question to do with icons in the Folder Pane. First method is setting a manual colour, second is setting automatic colours, but the last method is how to get back all the original icons back. If interested try info here: https://support.mozilla.org/en-US/questions/1309818

Thanks Tim, wow - so much nicer without any folder icons at all, cleaner, less cluttered and makes my closed up rows much better to look at whilst not affecting function.

BTW, for anyone seeing Tim's code, it is shown on screen a bit wrong (the result of pasting straight into these forum posts with code) (to make code come out right put a space in front of each line of code including empty lines and use the preview button to check what it will look like). Basically wherever Tim's code says something like 1. folderTree treechildren::-moz-tree-image{, it should actually be a hash sign (#) instead or the 1. (and then no space after it). So the code for removing folder icons should look like this :

/* Remove Folder Pane icons and reduce margin*/
#folderTree treechildren::-moz-tree-image{
list-style-image: none !important;
margin-left: -20px;
}

Also Tim, you don't need the second entry for the "Do not remove the @namespace...." and "@namespace url..." lines (it won't matter that it's there though). Those line are already specified at the top of the css file (where it should be). And the line(s) I added as a note for you are not standard and can be removed:, e.g. remove:

/* NB - I suppose the above line should always be kept at the top if you */
/* already have some other css present */ 

In fact, I have found that the top @Namespace url line (and its comment) don't need even need to be in the css file at all (at least for me on Windows 10). Everything works fine without the namespace line when I delete it but I have kept it in for good measure, it may just be a lingering hang over from older times.

You probably have a better idea of css than you realise - for the userChrome.css changes we have been making it's actually not so awful once you know the basics (that's if we can actually find or be told the name of the target for a style change!).

There are three basic rules:

• anything between /* and */ is a just note and won't be read as css
• the #folderTree.... part is the thing or things you want to target (in this case the folder tree and its children) with some style changes (in more advanced way of using css code there are other ways to specify things to style and they don't all start with a #)
• and the bits between the curly brackets are the actual style changes and what to do with them.

The actual way css is laid out into a few lines can be confusing, but it's done for clarity when editing. In effect the css can be written all as one long line and then perhaps the logic becomes clearer, e.g. for the remove folder icons the code could look like this

#folderTree treechildren::-moz-tree-image{list-style-image:none!important;margin-left:-20px}

When you see !important it just means it should force itself over anything else in css code that may be being used elsewhere in the program/webpage that might normally be controlling the intended target.

Inside the curly brackets, the colon has the element to change before it (e.g. the folder icon which in this case is list-style-image, and after the colon is what to do with it (none means don't show it).

Two or more style changes are separated with the semi-colon, so the second one in your example means reduce the left margin (now that the icon has gone) by 20 pixels. That's it, 'simples' as they say!

Thank you Art. I really appreciate the hints and will be more diligent next time. I enjoy learning new stuff, even at my advanced age. Sometimes I rush too much so I did not even notice the "1." in front of the code. I started on a Mainframe and wrote 7 languages at one time, but CSS escapes me.

@Toad-Hall So, per your instructions in your comment of 10/7/20, 10:02 AM "I've checked the code and there was an alteration. You can fix by doing the following....."

So in the "userChrome.css" FILE we paste your 10 lines of 'gatekeeper' text starting with '/*' and ending with '}', and ONLY those 10 lines of text (includes the 'empty' lines)?

Also, your 2nd image shows a file labeled "userContent.css" in this same folder but there is no explanation of what it is or what we are supposed to do with it (if anything). I'm going to ASSUME it is irrelevant for the original more space between lines problem cited in this thread?

This did not work for me...and I did change my "toolkit.legacyUserProfileCustomizations.stylesheet" boolean value from 'false' to 'true'

Thanks in advance of a 'yes' or 'no' answer.

(edited to include name of the boolean rather than just referring to it indirectly)