Thunderbird: Change Line Height in Folder Tree and Mail List

at-sign I thought I’ll briefly write down a tip that helped me yesterday when I upgraded from Thunderbird 3.1 to the new version 5 (which also applies to Thunderbird 6 and also 7, 8, 9, 10, 11, 12, 13 and probably more, given this ridiculous version system) – on WIndows 7, by the way. (This problem might not exist on other systems in the same way.)

TB5 uses a slightly different display for the folder tree and the mail list with a slightly bigger line spacing (which might simply be a side effect of the Calibri font). This may result in slightly better readability, but it also means that there are less mails and folders displayed in the same screen real estate, and since I like to use quite a lot folders to organize my mail collection, this resulted in the fact that not all folders could fit on the screen anymore, and having to scroll is inconvenient – especially since it’s virtually guaranteed that the next incoming mail will be put in a folder that’s currently not visible…

So I quickly searched for a way to change the line height – which is of course possible with the userChrome.css file that’s located in the profile folder1, typically located in C:\Users\user name\AppData\Roaming\Thunderbird\Profiles\profile name\chrome. By default, it probably doesn’t exist, so just create it. And restart Thunderbird to apply any changes.

This CSS code reduces the height such that the display is pretty much like in TB3:

treechildren::-moz-tree-row {
    margin-bottom: -2px !important;
}

Update 23 Jul 14: Surprise! A change in Thunderbird 312 – there were some pixels added somewhere, now it’s -4px instead of -2px for the same effect.

Since this causes ugly lines to remain between the items when moving the cursor across the tree or list, we also add the following which only applies to highlighted lines:

treechildren::-moz-tree-row(hover),
treechildren::-moz-tree-row(selected) {
    margin-bottom: 0px !important;
}

That’s it. If you like, you can of course use just -1px to reduce the height by only one instead of two pixel rows. (Alternatively you could also split the 2 pixels between top and bottom (margin-top and margin-bottom with each -1px), but then the highlighted line “wobbles” a bit when passing over it.)

Update 6 Dec 2016: Roger (see below) mentioned that this also affects other lists such as the mail address selection when composing a mail – and makes things too cramped there. Solution: Only select the elements you want to change, which are the folder tree #folderTree and the mail/news list #threadTree. Then the code looks like this:

#folderTree treechildren::-moz-tree-row,
#threadTree treechildren::-moz-tree-row {
    margin-bottom: -4px !important;
}
#folderTree treechildren::-moz-tree-row(hover),
#folderTree treechildren::-moz-tree-row(selected),
#threadTree treechildren::-moz-tree-row(hover),
#threadTree treechildren::-moz-tree-row(selected) {
    margin-bottom: 0px !important;
}

(The aforementioned mail address selection can be accessed with #addressingWidget.)

And a little bonus tip, an entry that I already have for a long time to hide the folder pane header that switches between “all folders” and some other folder views which is useless for me:

#folderPaneHeader {
    display: none !important;
}

(And before you add this entry, make sure you switched to “all folders” because you won’t be able to once the header’s gone…)


Code highlighting with ixiter’s Highlighter

  1. more about its location in the mozillaZine []
  2. at least here with Windows 8.1.1 []

21 Comments

  1. R

    Was Du alles kannst und weißt! *bewunder*

    Weißt Du auch, warum plötzlich die Bilder auf dem PC nicht mehr umgedreht werden, obwohl es bei der Canon so eingestellt ist und dort auch funktioniert? Das wär doch mal ein cooler Tipp! :D

    • c

      “Auf dem PC” ist ein dehnbarer Begriff. Manche Programme achten auf die EXIF-Rotations-Daten, manche (z.B. der Windows-Explorer) nicht. Wobei m.W. die Bild-Importier-Funktion modernerer Windows-Versionen die Bilder beim Importieren entsprechend rotiert, sodass sie immer richtig rum erscheinen – aber nicht, wenn du andere evtl. manuell kopiert hast. Wobei ich nicht weiß, ob das wirklich jetzt das Problem ist…

      • R

        Ja, das mit dem manuell Kopieren ist mir bekannt. Ich importiere sie immer gleich mit dem MS-Scanner+Kameraass., indem ich die Speicherkarte in ein Hama-“Zwischenstück” stecke. (Die 4-GB-Karte wollte mein “alter” Aldi-PC nicht lesen…) Nun bin ich zwar im Urlaub fremdgegangen und hab das Teil in einen fremden Schlitz gesteckt :mrgreen: :P :lol: (das Notebook meiner Freundin), aber das kann doch nicht das Problem sein, oder?

        • c

          Der Kartenleser ist egal, das Importierprogramm ist entscheidend. Wenn’s nicht dasselbe war bzw. von einem zu alten Windows, kann das schon den Unterschied ausmachen.

          Ich dreh meine Bilder bei Bedarf immer mit der Lossless JPG Rotation (oder wie das heißt) von IrfanView.

  2. CD

    Much appreciate the feedback on use of userChrome.css file, have placed in C:\Users\user name\AppData\Roaming\Thunderbird\Profiles\profile name\chrome (profile name =4waqsn3h.default)
    and restarted TB, but still ugly line spacing.
    Although this seemed to be of assistance, I have only started on this yesterday, unless I am told stroke for stroke what to do, some thing will and has surely has gone wrong.
    If there are answers out there, sorry life is too busy to put more than 3-4 hours into line spacing!!
    It seems that recipients will receive margins and line spacing different to the way they appear on TB screen in drafts or template folder. That is 100% nuisance. First TB looses all the formatting when you save your work, so that formatting does not appear in its own template, draft or sent displays, then decides to transmit the formats to other more intelligent email servers who can read it properly when the mail is sent. I could only experiment with gmail so far, but that is what seems to happen.
    So unless you have another server open, usually another computer set up differently, which I don’t have at present, I don’t know how much of my good formatting is going to get through.
    I know there are other Adds-ons such as “Text Formatting Toolbar 0.1.4.10 by Michael B.”
    Which receive good write ups, but my TB version 10.0.2 downloaded only in Jan2012 cannot load it.
    Given that Mr Michael B. from Codefisher says “I am on an intense training course that will last till September 2012, till then I am going to be too busy to work on my extensions for reply to posts..” it looks as though TB text formatting may remain in the dark a bit longer. I don’t even know if his Add-on would solve this particular issue.
    Any feed back on where I have gone wrong, or where I should be looking is appreciated.
    :?

    • c

      If I understand you correctly, you want to change the line spacing inside your mails? Sorry, can’t help with that, my directions above are only for the display in the tree and the list of mails. You should ask in a Thunderbird-specific forum, there should ba one linked on Mozilla.org.

  3. j

    Thanks!!!
    I’d updated to 12 a while back and quickly rolled back to 3.1 since I too use lots of folders and prefer the compressed look.
    I adjusted the first setting to -8px though it’s probably cuz of my resolution, screen size, etc.
    I’m getting some ‘wobble’ on highlight scrollover. any suggestions?

  4. j

    update:
    used the below and it’s almost smooth.
    good enough
    THanks again!!!

    treechildren::-moz-tree-row {
    margin:-4px 0 -4px 0;
    }
    treechildren::-moz-tree-row(hover),
    treechildren::-moz-tree-row(selected) {
    margin:0;
    }

  5. t

    Danke.

  6. L

    First, I want to thank the folks who posted above for pointing me in the right direction for fixing the annoying left over lines problem. I upgraded to Thunderbird 31.6 running on Win 7 and ran into the left over grey lines talked about above. My screen res is 1920 x 1080. The existing userChrome.css file was located in the (C:Usersuser nameAppDataRoamingThunderbirdProfilesprofile name) folder. After editing it a couple of times and getting nowhere I decided to creat a Chrome sub-directory and copy the .css file into it. That did it, now changes were appearing in TB. To make a long story short here’s the code I ended up with in ver 31.6 to get rid of the leftover grey lines.

    treechildren::-moz-tree-row(hover),
    treechildren::-moz-tree-row(selected) {
    margin-top: +1px !important;
    }
    treechildren::-moz-tree-row(hover),
    treechildren::-moz-tree-row(selected) {
    margin-bottom: +1px !important;
    }

  7. N

    Re: cimddwc – Thunderbird line spacing. Please forward!

    Thanks for the tips in this article. I too almost despaired of the sparse nature of the listings. I modified your code in userChrome.css to handle the line problem as follows (I am using TB 38.2.0):

    treechildren::-moz-tree-row {
    margin-bottom: -4px !important;
    }

    treechildren::-moz-tree-row(hover),
    treechildren::-moz-tree-row(selected) {
    margin-bottom: 0px !important;
    }

    treechildren::-moz-tree-row(hover),
    treechildren::-moz-tree-row(selected) {
    margin-top: 2px !important;
    }

    The captur on his contact page isn’t working!

    • c

      Thanks, and sorry for the contact form problems; the captcha should work again now. (And I moved your comment here, where it fits better.)

  8. R

    The issue I have found is that the drop down list for email addresses is affected also, any way to set them separately? thanks…

  9. T

    The v78 update to TB killed a lot of my long-truted installed Add-ons forver including Account Colors which used to also handle font sizing and spacing in threads and folders. I do wish the Moz devs would stop breaking so many wonderful trusted add-ons – it’s making loads of those Add-on developers totally give up!

    I just found your notes here from a few years ago and I was able to adapt them to do what I needed for v78 and now I can fit a lot more on screen again – thanks!

    I found adding a additional height declaration brought things together quite a bit more than without, but the margin-bottom declaration (if set to a minus figure) causes some overlap of rows and cuts off letters with descenders (g, p, q, j, etc) depending on the direction of mouse hover over the message/folder list, up or down. (This is all in Win10)

    For my folder tree area on the left, I am fine with the overlap and now I can squeeze a lot more in at -4px. For my messages list I’ve set it at 0px and the height of 8pt tightens things quite a lot more than the TB default.

    I found that I could also adjust the font size (smaller or larger than what seems to be a TB default of 8pt) by using the .tree-rows declaration (shown commented out below), but no matter what I tried I could not get the line spacing to go below 8pt. 8pt font is fine for me so I have left things commented out for that but include it here in case it’s of use to someone else (NB it may alter something else in TB that I haven’t noticed so far but it seemed okay when testing).

    Hope this is useful to you/someone:

    /*
    .tree-rows {
    font-size: 6pt !important;
    }
    */

    #folderTree treechildren::-moz-tree-row {
    height: 8pt !important;
    margin-bottom: -4px !important;
    }

    #threadTree treechildren::-moz-tree-row {
    height: 8pt !important;
    margin-bottom: 0px !important;
    }

    /* This stops annoying lines when hovering over items */
    #folderTree treechildren::-moz-tree-row(hover),
    #folderTree treechildren::-moz-tree-row(selected),
    #threadTree treechildren::-moz-tree-row(hover),
    #threadTree treechildren::-moz-tree-row(selected){
    margin-bottom: 0px !important;
    }

  10. T

    Hi again,

    The latest, TB update to v78.3.2 killed the compact layout again!!! Apparently the use of larger row icons for things like Star, Junk, Attachments, etc were also given more space/padding which causes things to go wrong (as far as I was concerned).

    So, after much experimentation I found the perfect combination of things to make it work again – basically adding a balancing margin-top declaration makes things work as desired, helping suck up all that extra space they seem to think we all need whilst showing us less at the same time. Below is my complete userChrome.css and it works well for me on Win10.

    NB for anyone trying this for the first time, a change is also needed in the TB Config Editor. Details on how are in another support forum on this same problem and can be found here:
    https://support.mozilla.org/en-US/questions/1307570

    —————My full userChrome.css Code————-

    /* 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 */

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

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

    /* Tweaking the below px values may stop any annoying thin blue row lines remaining after hovering over items */
    #folderTree treechildren::-moz-tree-row(hover),
    #folderTree treechildren::-moz-tree-row(selected){
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    }
    #threadTree treechildren::-moz-tree-row(hover),
    #threadTree treechildren::-moz-tree-row(selected){
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    }

    ———————————–

    NB – I have no idea what the (supposedly required) top #namespace url… line does? With or without it the file seems to work as far as I can tell.

  11. Update: sells59 has posted an excellent userChrome.css here which deals with most of the issues of changed and overly spaced-out layout, see:
    https://support.mozilla.org/en-US/questions/1307570?page=2#answer-1357759

    To close up the row spacing of the folder tree, change the following section to your desired px spacing: (I added margin-top and margin-bottom) -2px makes it really close and there’s a slight overlap of small icons but change it to what works for you)

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

    To get slightly more thread/message rows showing on the page, I also decreased the margin spacing to -4, that gets it just about as tight as possible.

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

    I also removed the bolding of the folder selected item:

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

Leave a Reply to Ruthie

All inputs are optional. The e-mail address won't be published nor shared.

  • Moderation: Comments from first-time commentators must be approved manually before they appear.
  • Behave yourself! No insults, no illegal content, etc.! Should go without saying, don't you agree...?
  • Website: I don't mind blogs with ads, but purely commercial links are not welcome and will be deleted. Just like pure spam comments.
  • E-mail notification on new comments: You will have to activate this function once with a link in an automatically sent confirmation mail. These notifications can be disabled again with the link in every mail, of course.
  • Twitter: If you got a Twitter account, you can enter your Twitter name (with or without the @, doesn't matter) which will then be displayed next to any comment (including old ones) that contain the same e-mail address. (Which also means that you must fill in that e-mail field.)
  • Allowed HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <sub> <sup> <big> <small> <u>