1. Home
  2. News
  3. Download
    1. Thunderbird Release Version
    2. Thunderbird 128 ESR
    3. Thunderbird 115 ESR
    4. Thunderbird Beta Version
    5. Language Pack (User Interface)
    6. Dictionaries (Spell Check)
  4. Help & Lexicon
    1. Instructions for Thunderbird
    2. Questions & Answers (FAQ) about Thunderbird
    3. Help for this Website
  5. Forums
    1. Unresolved Threads
    2. Latest Posts
    3. Threads of the last 24 hours
  • Login
  • Register
  • 
  • Search
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Forum
  • Lexicon
  • Articles
  • Pages
  • More Options
  1. Thunderbird Mail DE
  2. Forum
  3. Hilfe zu Add-ons und manuellen Anpassungen
  4. Manuelle Anpassungen per CSS oder Script

Runde Ecken für Tabs

  • Bernhard12
  • November 12, 2018 at 12:06 AM
  • Closed
  • Thread is Resolved
  • Bernhard12
    Member
    Posts
    41
    Member since
    22. Jul. 2012
    • November 12, 2018 at 12:06 AM
    • #1

    In Firefox hab ich diesen Schnipsel in der userChrome.css, der für runde Ecken bei den tabs sorgt:

    #TabsToolbar .tabs-newtab-button,

    #TabsToolbar .tabbrowser-tab,

    #TabsToolbar .tabbrowser-tab .tab-stack,

    #TabsToolbar .tabbrowser-tab .tab-background,

    #TabsToolbar .tabbrowser-tab .tab-content {

    border-top-left-radius: 7px !important;

    border-top-right-radius: 7px !important;

    }

    #TabsToolbar .tabbrowser-tab .tab-line {

    visibility: hidden;

    }

    Wie geht das in TB?

  • Boersenfeger
    Senior Member
    Reactions Received
    115
    Posts
    1,523
    Member since
    3. Apr. 2005
    Helpful answer
    1
    • November 13, 2018 at 3:06 PM
    • #2

    Nutze einfach die Erweiterung CustomizeMyBird... dort ist unter anderem dies möglich...

    https://addons.thunderbird.net/de/thunderbird…customizemybird

    Windows 11 Pro 64bit

    Thunderbird 128.11.1 ESR 64bit

    Mein Windows 11 Sicherheitskonzept

    Probleme mit Firefox? Hier wird geholfen!

  • Bernhard12
    Member
    Posts
    41
    Member since
    22. Jul. 2012
    • November 14, 2018 at 10:32 AM
    • #3

    Das ist doch schon mal was!

  • Harff182
    Member
    Reactions Received
    6
    Posts
    89
    Member since
    20. Jun. 2015
    • September 22, 2019 at 12:05 AM
    • #4

    moin, moin...

    Da o.g. Add-On für TB 68.x nicht mehr funktionuckelt, meine Frage:

    Wie bekomme ich jetzt die eckigen Tabs per CSS schön rund , gleich groß, mit etwas Abstand und verschiedenen Hintergründen für Aktiv/Inaktiv?

    guuts Nächtle...

    Uli

    W11 Home 64bit - TB 128.x (64-Bit) Portable

  • hwww
    Member
    Reactions Received
    2
    Posts
    134
    Member since
    3. Aug. 2012
    • September 22, 2019 at 8:09 AM
    • #5
    Quote from Harff182

    Wie bekomme ich jetzt die eckigen Tabs per CSS schön rund , gleich groß, mit etwas Abstand und verschiedenen Hintergründen für Aktiv/Inaktiv?

    Hallo

    Habe TB 68.1.0 und diese Einträge in der "userChrome.css" und es funktioniert. Werte kann man was Farbe und Größe betrifft anpassen.

    CSS
    /************************************Tabs abgerundet**********************************************/
    
    .tabbrowser-tab:not([selected="true"]){
      border-radius:  7px !important; 
      border:1px solid black!important;
      margin-bottom:1px!important;
        }
    
    .tab-background[selected="true"] {
      border-radius: 7px !important; 
      border:1px solid black!important;
      margin-bottom:1px!important;
        }
    
    .tabbrowser-tab::after, .tabbrowser-tab::before {
        margin-inline-start: 0px!important;
        border-left: 0px solid!important;
        border-image:none!important;
        border-image-slice: 0!important;
        width: 0px!important;
        box-sizing: border-box;
        opacity: 0!important;
        }
        
    .tab-line { 
        display:none!important
        }
    Display More
    CSS
     /************************************ Schrift in Tabs *******************************************/
    
    
    tab .tab-text {
    font-size: 11,5px !important;
    font-weight: bold !important; }
    CSS
    /*************************** Hintergrundfarbe aktives Tab - grün ****************************/
    
    .tab-background[selected="true"] {
    background: #99ff66 !important; }
    
    
    /********************************* Hintergrundfarbe inaktive Tabs - gelb ********************/
    
    tab:not([selected="true"]) {
    background: #ffff00 !important; }

    Einfach mal testen.

    Thunderbird 138.0.1 64bit

  • edvoldi
    Moderator
    Reactions Received
    269
    Posts
    7,546
    Member since
    23. Dec. 2005
    Helpful answers
    32
    • September 22, 2019 at 9:52 AM
    • #6
    Quote from Harff182

    Wo kann ich abgucken, wie Du in TB die Tabs so schön rund und den Menüleisten-Inhalt hinbekommen hast?

    Hwww ha tDir ja schon eine Code oben angeboten.

    Ich habe den von Aris für Thunderbird und mich angepasst.
    hie mein Code:

    CSS
    /* Thunderbird userChrome.css tweaks ****************************************************/
    /* Github: https://github.com/aris-t2/customcssforfx ************************************/
    /* geändert am 12.08.2019 vom EDV-Oldie *************************************************/
    
    
    :root {
      --default_tab_border_roundness: 10px;
    }
    
    /* tab top border roundness */
    #tabmail-tabs .tabmail-tab,
    #tabmail-tabs .tabmail-tab .tab-stack,
    #tabmail-tabs .tabmail-tab .tab-background,
    #tabmail-tabs .tabmail-tab .tab-content {
      border-top-left-radius: var(--default_tab_border_roundness) !important;
      border-top-right-radius: var(--default_tab_border_roundness) !important;
      overflow: hidden;
    }
    
    #tabmail-tabs .tabs-newtab-button{
      border-top-left-radius: var(--default_tab_border_roundness) !important;
      border-top-right-radius: var(--default_tab_border_roundness) !important;
    }
    
    /* hide tab separators */
    .tabmail-tab::after,
    .tabmail-tab::before {
      opacity: 0 !important;
      border-image: unset !important;
      border-image-slice: unset !important;
      width: unset !important;
    }
    #tabmail-tabs[movingtab] > .tabmail-tab[beforeselected]:not([last-visible-tab])::after,
    .tabmail-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
    #tabmail-tabs:not([overflow]) > .tabmail-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
      content: unset !important;
      display: unset !important;
    }
    
    .tabmail-tab[selected] {
      color: white !important;
      border: 2px solid white !important;
    }
    
    .tabmail-tab:not([selected]) {
      color: black!important;
      border: 1px solid gray !important;
    }
    
    .tabmail-tab[selected] .tab-content { 
        background: darkgray !important;
    }
    .tabmail-tab {
        margin-left: 3px !important;
    }
    
    
    /* Tab-Icon etwas größer,
     * links weniger, unten etwas mehr Abstand zum TAB-Rand.
    
    #tabmail-tabs .tab-icon-image {
      height: 20px !important;
      width:  20px !important;
      margin-left: -3px !important;
      margin-bottom: 2px !important;
    }   */
    /* Tab-Schließen-Button:
     * Rechts weniger Abstand zum TAB-Rand, etwas größer,
     * Textfarbe (Kreuz)
     * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
     */
    /* #tabmail-tabs .tab-close-button {
      margin-right: -3px !important;
      padding: 0 !important;
      color: white !important;
      border-radius: 5px !important;
      border:2px solid lightgrey!important;
    }
    #tabmail-tabs .tab-close-button:not([selected="true"]) {
      height: 22px !important;
      width:  22px !important;
      background: red !important;
      border:2px solid lightgrey!important;
      border-radius: 5px !important;
    } */
    
    /* Tab-Schließen-Button bei angewähltem TAB (aktiv):
     * Hintergrundfarbe.
    
    #tabmail-tabs .tab-close-button[selected="true"] {
        border:2px solid lightgrey!important;
      background-color: red !important;
      border-radius: 5px !important;
    } */
        #tabmail-tabs .tab-close-button[selected="true"] {
        color: white !important;
    }
    Display More

    Viel Spaß beim testen


    Gruß
    EDV-Oldi

    WIN11 Home Version 24H2 (Build 26100.4351)

    Thunderbird 128.11.1esr (64-Bit)
    Thunderbird - Beta 140.0b1 (64-Bit)
    Thunderbird - Daily 141.0a1 (64-Bit)

    Firefox 139.0.4 (64-Bit)

    Thunderbird-Kalender: FAQ / Erweiterungen für den Kalender / Meine Erweiterungen

    Keine Forenhilfe per Konversation!

  • Harff182
    Member
    Reactions Received
    6
    Posts
    89
    Member since
    20. Jun. 2015
    • September 22, 2019 at 4:48 PM
    • #7

    :thumbup::thumbup:Mein Dank geht an Euch beide, wird Euch ewig verfolgen, aaaaber....

    ...letztendlich hab ich mich dafür entschieden, EDV-Oldis Code zu übernehmen und daran weiterzubasteln.

    Sieht schon ganz nett aus, aber Feinschliff dauert halt dann doch etwas.

    Eins ist mir aber schon aufgefallen:

    Das Grau des Bereiches, in dem die Tabs liegen gefältt mir garnicht:/

    Wie kann ich da die Farbe ändern?

    Im FF hab ich das mit so einer Zeile gelöst

    CSS
    #TabsToolbar {background: cyan !important;}

    Was muß ich hier im TB verwenden?

    Edith sagt: "#tabs-toolbar" statt "#TabsToolbar".

    Was so ein Bindestrich doch ausmachen kann ^^

    W11 Home 64bit - TB 128.x (64-Bit) Portable

    Edited once, last by Harff182: Lösung gefunden (September 22, 2019 at 5:07 PM).

  • Community-Bot September 3, 2024 at 8:40 PM

    Closed the thread.

Current app version

  • Thunderbird 139.0.2 veröffentlicht

    Thunder June 11, 2025 at 5:31 PM

Current ESR version

  • Thunderbird 128.11.1 ESR veröffentlicht

    Thunder June 11, 2025 at 5:27 PM

No Advertisements

There are no advertisements here. Maybe you give the website owner (Alexander Ihrig - aka "Thunder") instead something to be able to finance these sites in the long run. Many Thanks!

Thank you for the support!

Coffee to be spent?

Donate now via Paypal*

*Forwarding to PayPal.Me

Thunderbird Mail DE
  1. Imprint & Contact
  2. Privacy Policy
    1. Cookie Policy
  3. Terms of Use
  4. Donation Call for Thunderbird
Help for this website
  • All website support articles
  • How to use website search
  • How to create a forums user account
  • How to create and edit a forums thread
  • How to reset your forums password
Copyright © 2003-2025 Thunderbird Mail DE

You are NOT on an official page of the Mozilla Foundation. Mozilla®, mozilla.org®, Firefox®, Thunderbird™, Bugzilla™, Sunbird®, Seamonkey®, XUL™ and the Thunderbird logo are (among others) registered trademarks of the Mozilla Foundation.

Powered by WoltLab Suite™