1. Startseite
  2. Nachrichten
  3. Herunterladen
    1. Thunderbird Release-Version
    2. Thunderbird 128 ESR
    3. Thunderbird 115 ESR
    4. Thunderbird Beta-Version
    5. Sprachpaket (Benutzeroberfläche)
    6. Wörterbücher (Rechtschreibprüfung)
  4. Hilfe & Lexikon
    1. Anleitungen zu Thunderbird
    2. Fragen & Antworten (FAQ) zu Thunderbird
    3. Hilfe zu dieser Webseite
  5. Forum
    1. Unerledigte Themen
    2. Letzte Beiträge
    3. Themen der letzten 24 Stunden
  • Deutsch
  • Anmelden
  • Registrieren
  • 
  • Suche
Dieses Thema
  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
  • 12. November 2018 um 00:06
  • Geschlossen
  • Erledigt
  • Bernhard12
    Mitglied
    Beiträge
    41
    Mitglied seit
    22. Jul. 2012
    • 12. November 2018 um 00:06
    • #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-Mitglied
    Reaktionen
    115
    Beiträge
    1.523
    Mitglied seit
    3. Apr. 2005
    Hilfreiche Antwort
    1
    • 13. November 2018 um 15:06
    • #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.0b1 ESR 64bit

    Mein Windows 11 Sicherheitskonzept

    Probleme mit Firefox? Hier wird geholfen!

  • Bernhard12
    Mitglied
    Beiträge
    41
    Mitglied seit
    22. Jul. 2012
    • 14. November 2018 um 10:32
    • #3

    Das ist doch schon mal was!

  • Harff182
    Mitglied
    Reaktionen
    6
    Beiträge
    89
    Mitglied seit
    20. Jun. 2015
    • 22. September 2019 um 00:05
    • #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
    Mitglied
    Reaktionen
    2
    Beiträge
    134
    Mitglied seit
    3. Aug. 2012
    • 22. September 2019 um 08:09
    • #5
    Zitat von 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
        }
    Alles anzeigen
    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
    Reaktionen
    269
    Beiträge
    7.546
    Mitglied seit
    23. Dez. 2005
    Hilfreiche Antworten
    32
    • 22. September 2019 um 09:52
    • #6
    Zitat von 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;
    }
    Alles anzeigen

    Viel Spaß beim testen


    Gruß
    EDV-Oldi

    WIN11 Home Version 24H2 (Build 26100.4061)

    Thunderbird 128.10.1esr (64-Bit)
    Thunderbird - Beta 139.0b4 (64-Bit)
    Thunderbird - Daily 140.0a1 (64-Bit)

    Firefox 138.0.4 (64-Bit)

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

    Keine Forenhilfe per Konversation!

  • Harff182
    Mitglied
    Reaktionen
    6
    Beiträge
    89
    Mitglied seit
    20. Jun. 2015
    • 22. September 2019 um 16:48
    • #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

    Einmal editiert, zuletzt von Harff182 (22. September 2019 um 17:07) aus folgendem Grund: Lösung gefunden

  • Community-Bot 3. September 2024 um 20:40

    Hat das Thema geschlossen.

Aktuelle Programmversion

  • Thunderbird 138.0.2 veröffentlicht

    Thunder 20. Mai 2025 um 16:44

Aktuelle ESR-Version

  • Thunderbird 128.10.2 ESR veröffentlicht

    Thunder 20. Mai 2025 um 20:27

Keine Werbung

Hier wird auf Werbeanzeigen verzichtet. Vielleicht geben Sie dem Website-Betreiber (Alexander Ihrig - aka "Thunder") stattdessen etwas aus, um diese Seiten auf Dauer finanzieren zu können. Vielen Dank!

Vielen Dank für die Unterstützung!

Kaffee ausgeben für:

3,00 €
1
Per Paypal unterstützen*

*Weiterleitung zu PayPal.Me

Thunderbird Mail DE
  1. Impressum & Kontakt
  2. Datenschutzerklärung
    1. Einsatz von Cookies
  3. Nutzungsbedingungen
  4. Spendenaufruf für Thunderbird
Hilfe zu dieser Webseite
  • Übersicht der Hilfe zur Webseite
  • Die Suchfunktion benutzen
  • Foren-Benutzerkonto - Erstellen (Neu registrieren)
  • Foren-Thema erstellen und bearbeiten
  • Passwort vergessen - neues Passwort festlegen
Copyright © 2003-2025 Thunderbird Mail DE

Sie befinden sich NICHT auf einer offiziellen Seite der Mozilla Foundation. Mozilla®, mozilla.org®, Firefox®, Thunderbird™, Bugzilla™, Sunbird®, XUL™ und das Thunderbird-Logo sind (neben anderen) eingetragene Markenzeichen der Mozilla Foundation.

Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Forum
  • Lexikon
  • Artikel
  • Seiten
  • Erweiterte Suche
  • Deutsch
  • English
Zitat speichern