Ugly rounded tabs in Thunderbird… and how to change it !

After I resigned the Opera Browser („Made in Norway… Ha Ha!“) I am using Firefox and Thunderbird again — and only after half a second after the Thunderbird window appeared I knew again why I hate this program.

The design and the layout is completely ill-favored. The line height is to small, the window search box to wide, filter box to small and some more issues. But at the frist glance you will see the deformed tabs at the top of the window.

Thunderbird-deformed-Tab-Design

They do not fit to anything. Somewhere I read that you can get rid of this design by installing another theme and this is also completely insane. There are no themes where I would say: „Well made, guys!“ This way it can only be worse.

So, how you can get rid of this crappy design?

This is only relevant for Windows users because Mac and Linux users should not have this problem. If you are smart you should handle this in two minutes.

  1. Start the Explorer and type %appdata% in the address bar and Enter
  2. Open the folder Thunderbird
  3. Open the folder Profiles
    If there are one or more folders which are ending with .default you are in the right neighbourhood
  4. Right-click on an empty area, select New following New Folder
  5. Rename the new Folder to chrome
  6. Right-click on an empty area, select New following New Text Document
  7. Open the new text file (.txt) and copy the CSS Code below into the document, save the file and close it
  8. Rename the new file to userChrome.css and confirm the warning for renaming the file .
    If you do not get this message, sorry,  you do not know what you are doing right from the beginning. In this case you should have unchecked the Explorer option „Hide extensions for known file types“
  9. Move the .css-file to the folder chrome
  10. Move or copy the folder chrome into your profile folder with the ending .default.
    If you have already a folder named chrome in your profile it is your desicion — backup them first, integrate or overwrite them directly. Do not select the option to keep both folders because this will not work.
  11. Restart Thunderbird.

From my point of view a plug-in would be more complicated — for me — than to copy a file into the profile folder. I enhanced the style to this:

Thunderbird-optimized-Tab-Design-Version-1

I tried to reduce the padding and add a shadow but it did not work well. I need the layout code structure for this — and I am as incapable to find these lines as these heroes who made this dire tab design for Thunderbird.

/* CSS Code /
/
Location: %appdata%\Thunderbird\Profiles\xxxxxxxx.default\chrome\userChrome.css
/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabmail-tab {
-moz-appearance: none !important;
margin: 2px 0px 0px !important;
padding: 0px !important;
-moz-transition: all 830ms linear !important;
transition: all 830ms linear !important;
}
.tabmail-tab * {
outline: 0px none rgba(0,0,0,0) !important;
}
.tab-background {
background-image: none !important;
border: 1px solid threedshadow !important;
border-bottom: none !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
-moz-margin-start: 0px !important;
-moz-margin-end: 2px !important;
background-color: threeDshadow !important;
background-image: -moz-linear-gradient(rgba(208,222,235,1) 25%, rgba(183,195,207,1)) !important;
}
.tabmail-tab:not([selected]):not(:hover) + .tabmail-tab:not([selected]):not(:hover)::before, .tabmail-tab:last-child:not([selected]):not(:hover)::after {
background: none !important;
}
.tabmail-tab:hover .tab-background, .tabmail-tab[selected] .tab-background {
background: -moz-dialog !important;
background-image: -moz-linear-gradient(rgba(255,255,255,1) 15%, rgba(237,244,252,1)) !important;
}
.tabmail-tab:not([selected]):hover .tab-background {
background-image: -moz-linear-gradient(rgba(237,244,252,1) 25%, rgba(208,222,235,1)) !important;
}
.tabmail-tab:hover .tab-text, .tabmail-tab[selected] .tab-text {
color: black !important;
opacity: 1 !important;
}
.tabmail-tab:last-child:not([selected]):not(:hover)::after {
-moz-margin-start: 0px;
-moz-margin-end: 2px;
}
/
CSS Code END */

The original post is here: https://getsatisfaction.com/mozilla_messaging/topics/ugly_rounded_tabs_in_new_thunderbird_15_how_to_change_it

Advertisements

Hinterlasse eine Nachricht | Leave a Message

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s