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
  • Anmelden
  • Registrieren
  • 
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Forum
  • Lexikon
  • Artikel
  • Seiten
  • Erweiterte Suche
  1. Thunderbird Mail DE
  2. Forum
  3. Hilfe zu Add-ons und manuellen Anpassungen
  4. Manuelle Anpassungen per CSS oder Script

Symbolleiste - Button der Erweiterung PrintingTools NG Verändern

    • 115.*
    • Windows
  • Traube
  • 29. September 2023 um 09:32
  • Geschlossen
  • Erledigt
  • Traube
    Mitglied
    Beiträge
    11
    Mitglied seit
    1. Aug. 2023
    • 29. September 2023 um 09:32
    • #1

    Guten Tag

    ich habe die Buttons in der Symbolleiste geändert. Sieht jetzt nett aus. Der Bezeichner zum Button der Erweiterung PrintingTools NG habe ich nicht gefunden. Kann mir jemand helfen?

    Vielen Dank

    CSS
        /* ---Schaltfläche: Antworten,Junk,Drucken,Löschen,Adressbuch--- */
    #unifiedToolbarContent > li.reply > div > button,
    #unifiedToolbarContent > li.junk > div > button,
    #unifiedToolbarContent > li.print > div > button,
    #unifiedToolbarContent > li.delete > div > button,
    #unifiedToolbarContent > li.address-book > div > button {
        background-color: #383732!important;
        border-top: 1px solid #808080!important;
        border-left: 1px solid #808080!important;
        border-right: 1px solid #808080!important;
        border-bottom: 1px solid #808080!important;
        box-shadow: inset 0px 0px 5px 0px #808080!important;
    }
    #unifiedToolbarContent > li.reply > div > button:hover,
    #unifiedToolbarContent > li.junk > div > button:hover,
    #unifiedToolbarContent > li.print > div > button:hover,
    #unifiedToolbarContent > li.delete > div > button:hover,
    #unifiedToolbarContent > li.address-book > div > button:hover {
        background-color: red !important;
        border-top: 1px solid #F05342 !important;
        border-left: 1px solid #F05342 !important;
        border-right: 1px solid #F05342 !important;
        border-bottom: 1px solid #F05342 !important;
        box-shadow: inset 0px 0px 25px 0px #7A0603 !important;
    }
    Alles anzeigen
  • Bastler
    Gast
    • 29. September 2023 um 19:18
    • #2
    Zitat von Traube

    Der Bezeichner zum Button der Erweiterung PrintingTools NG habe ich nicht gefunden.

    Hallo,

    den gezielt anzusprechen, gestaltet sich bei meinen Versuchen auch noch zickig.

    Mit folgendem Code, spreche ich derzeit alle Buttons an, auch neu hinzugezogene, auch PT-NG.

    Er ist weniger aufwändig als Deiner.

    Wenn z.B. border: allseitig gleich sein soll, muss man nicht jede Seite einzeln definieren.

    CSS
    .unified-toolbar-button {
    appearance: none !important;
      border: 0.5px solid #555 !important;
    }
    .unified-toolbar-button:hover {
      background-color: #DADADA !important;
    }

    Einmal editiert, zuletzt von Bastler (29. September 2023 um 19:34) aus folgendem Grund: Zusatz

  • Traube
    Mitglied
    Beiträge
    11
    Mitglied seit
    1. Aug. 2023
    • 29. September 2023 um 19:42
    • #3

    Hallo und vielen Dank für die Mühe und Antwort

    Der folgende, nicht ganz saubere Code scheint zu funktionieren.

    (Es ist eine Mischung aus alt und neu)

    Liebe Grüsse

    CSS
    /* ---SYMBOLLEISTE---  */
    
        /* ---Schaltflächen: Grösse---  */
    .unified-toolbar-button {
    appearance: none !important;
      transform: scale(0.93, 0.93) !important;
    }
        /* ---Schaltflächen: Alle Buttons ändern---  */
    .unified-toolbar-button {
    appearance: none !important;
         background-color: #383732!important;
        border-top: 1px solid #808080!important;
        border-left: 1px solid #808080!important;
        border-right: 1px solid #808080!important;
        border-bottom: 1px solid #808080!important;
        box-shadow: inset 0px 0px 5px 0px #808080!important;
    }
    .unified-toolbar-button:hover {
    background-color: red !important;
        border-top: 1px solid #F05342 !important;
        border-left: 1px solid #F05342 !important;
        border-right: 1px solid #F05342 !important;
        border-bottom: 1px solid #F05342 !important;
        box-shadow: inset 0px 0px 25px 0px #7A0603 !important;
    }
        /* ---Schaltflächen: Abrufen,Verfassen--- */
    #unifiedToolbarContent > li.get-messages > div > button,
    #unifiedToolbarContent > li.write-message > div > button  {
        background-color: #1075BC!important;
        border-top: 1px solid #808080!important;
        border-left: 1px solid #808080!important;
        border-right: 1px solid #808080!important;
        border-bottom: 1px solid #808080!important;
        box-shadow: inset 0px 0px 25px 0px #04294A!important;
    }
    #unifiedToolbarContent > li.get-messages > div > button:hover,
    #unifiedToolbarContent > li.write-message > div > button:hover  {
        background-color: red !important;
        border-top: 1px solid #F05342 !important;
        border-left: 1px solid #F05342 !important;
        border-right: 1px solid #F05342 !important;
        border-bottom: 1px solid #F05342 !important;
        box-shadow: inset 0px 0px 25px 0px #7A0603 !important;
    }
    Alles anzeigen
  • milupo
    Gast
    • 29. September 2023 um 19:44
    • #4

    @Bastler Teste mal #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net Das ist eine Etage höher, die ID vom div-Element. Solche ID-Ungetüme kopierst du am besten aus dem Inspektor mit Rechtsklick --> Kopieren --> CSS-Selektor. Das hat den Vorteil, dass reservierte Zeichen automatisch maskiert werden, so wie das hier der Fall ist.

  • Bastler
    Gast
    • 29. September 2023 um 19:50
    • #5
    Zitat von milupo

    Teste mal #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net

    Hallo,

    habe ich in allen möglichen Facetten schon gemacht, irgendwie ist er zickig.

    Zitat von milupo

    Solche ID-Ungetüme kopierst du am besten aus dem Inspektor mit Rechtsklick --> Kopieren --> CSS-Selektor

    So mache ich das auch, zusätzlich auch noch Kopieren -> CSS Pfad., um den Zusammenhang zu beäugen.

  • Bastler
    Gast
    • 29. September 2023 um 19:53
    • #6
    Zitat von Traube

    Der folgende, nicht ganz saubere Code scheint zu funktionieren.

    Jeder Erfolg zählt!

    Verkürze mal die vielen border: Anweisungen. Beispiel habe ich gezeigt.

  • milupo
    Gast
    • 29. September 2023 um 20:08
    • #7
    CSS
    #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net {
    appearance: none !important;
    border: 2.5px solid #0F0 !important;
    }
    
    #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net:hover {
      background-color: #DADADA !important;
    }

    Basis Beitrag #2 - aber größere Rahmendicke und markantere Rahmenfarbe. Die Hintergrundfarbe bei Hover funktioniert auch.

  • Traube
    Mitglied
    Beiträge
    11
    Mitglied seit
    1. Aug. 2023
    • 29. September 2023 um 20:11
    • #8

    Die Zieladresse funktioniert. Die Buttonabmessung wird nicht übernommen.

    Bei hover aber schon

    CSS
    #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net {
        background-color: #383732!important;
        border-top: 1px solid #808080!important;
        border-left: 1px solid #808080!important;
        border-right: 1px solid #808080!important;
        border-bottom: 1px solid #808080!important;
        box-shadow: inset 0px 0px 5px 0px #808080!important;
    }
    
    #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net:hover {
        background-color: red !important;
        border-top: 1px solid #F05342 !important;
        border-left: 1px solid #F05342 !important;
        border-right: 1px solid #F05342 !important;
        border-bottom: 1px solid #F05342 !important;
        box-shadow: inset 0px 0px 25px 0px #7A0603 !important;
    }
    Alles anzeigen
  • milupo
    Gast
    • 29. September 2023 um 20:15
    • #9

    Traube Ich empfehle dir wie @Bastler nur border: zu verwenden, wenn du die gleichen Werte für alle vier Rahmenseiten verwenden willst.

  • Traube
    Mitglied
    Beiträge
    11
    Mitglied seit
    1. Aug. 2023
    • 29. September 2023 um 20:21
    • #10

    Ja, mit "border" hab ich übertrieben. Ist korrigiert.

  • Traube
    Mitglied
    Beiträge
    11
    Mitglied seit
    1. Aug. 2023
    • 29. September 2023 um 20:38
    • #11

    Ich hab den Code von Bastler übernommen. Er funktioniert, also alles i.O.

    Besten Dank an Bastler und Milupo

    CSS
    /* ---SYMBOLLEISTE---  */
    
        /* ---Schaltfläche: Alle Buttons ändern---  */
    .unified-toolbar-button {
        appearance: none !important;
        transform: scale(0.93, 0.93) !important;
         background-color: #383732!important;
        border: 1px solid #808080!important;
        box-shadow: inset 0px 0px 5px 0px #808080!important;
    }
    .unified-toolbar-button:hover {
        background-color: red !important;
        border: 1px solid #F05342 !important;
        box-shadow: inset 0px 0px 25px 0px #7A0603 !important;
    }
        /* ---Schaltfläche: Abrufen,Verfassen--- */
    #unifiedToolbarContent > li.get-messages > div > button,
    #unifiedToolbarContent > li.write-message > div > button  {
        background-color: #1075BC!important;
        border: 1px solid #808080!important;
        box-shadow: inset 0px 0px 25px 0px #04294A!important;
    }
    #unifiedToolbarContent > li.get-messages > div > button:hover,
    #unifiedToolbarContent > li.write-message > div > button:hover  {
        background-color: red !important;
        border: 1px solid #F05342 !important;
        box-shadow: inset 0px 0px 25px 0px #7A0603 !important;
    }
    Alles anzeigen
  • Bastler
    Gast
    • 29. September 2023 um 20:43
    • #12
    Zitat von Traube

    Ich hab den Code von Bastler übernommen. Er funktioniert, also alles i.O.

    Nun gut, freut mich.

    Hier habe ich inzwischen die konkrete Ansprache

    #tbButtonParentListenerDiv_PrintingToolsNG\@cleidigh\.kokkini\.net > button:nth-child(1)

    ----------------------------------

    Setze noch mit Doppelklick in das Kästchen unter dem Titel auf "Erledigt".

    Einmal editiert, zuletzt von Bastler (29. September 2023 um 21:06)

  • DarkCorri53i
    Mitglied
    Reaktionen
    11
    Beiträge
    147
    Mitglied seit
    19. Jul. 2023
    Hilfreiche Antworten
    2
    • 8. Januar 2024 um 16:39
    • #13

    @Bastler

    Hallo Bastler,

    ich möchte den Code aus Beitrag #11 auf die Toolbar für Verfassen anwenden, weiss aber nicht wie die Buttons dort angesprochen werden. Hier ein Screenschot:



    Kannst du helfen?


    Gruß

    Markus

  • Bastler
    Gast
    • 8. Januar 2024 um 17:03
    • #14
    Zitat von DarkCorri53i

    weiss aber nicht wie die Buttons dort angesprochen werden

    Hallo,
    was soll denn im einzelnen geschehen? Zumindest ein erster Ansatz zum Probieren:

    CSS
    /* ---Verfassen-Symbolleiste Buttons rahmen--- */
    #composeToolbar2 .toolbarbutton-1 {
    appearance: none !important;
    border: 0.5px solid #777 !important;
    border-radius: 4px !important;
    }
    /* ---Senkrechte Separatoren ausblenden--- */
    #composeToolbar2 toolbarseparator {
    display: none !important;
    }
  • DarkCorri53i
    Mitglied
    Reaktionen
    11
    Beiträge
    147
    Mitglied seit
    19. Jul. 2023
    Hilfreiche Antworten
    2
    • 8. Januar 2024 um 20:35
    • #15
    Zitat von Bastler

    was soll denn im einzelnen geschehen? Zumindest ein erster Ansatz zum Probieren:

    Vielen Dank Dir. Jetzt komme ich weiter. Es gibt nur noch ein Problem! Wie bekomme ich den kleinen grauen Rahmen in den beiden Buttons weg? Siehe Screenshot:


    Gruß

    Markus

  • Bastler
    Gast
    • 8. Januar 2024 um 21:37
    • #16
    Zitat von DarkCorri53i

    Wie bekomme ich den kleinen grauen Rahmen in den beiden Buttons weg?

    Bei solch einem Hintergrund braucht man Adleraugen oder Phantasie.
    Ich sehe keinen Rahmen, nur den Trennstrich zum Winkel (Breitpfeil), den gibt es bei Buttons mit Untermenü.

  • Bastler
    Gast
    • 8. Januar 2024 um 22:08
    • #17
    Zitat von DarkCorri53i

    den kleinen grauen Rahmen

    Versuche Folgendes gegen die Trennstriche im Button.

    CSS
    #spellingButton.toolbarbutton-1 dropmarker.toolbarbutton-menubutton-dropmarker:before,
    #button-save.toolbarbutton-1 dropmarker.toolbarbutton-menubutton-dropmarker:before,
    #button-attach.toolbarbutton-1 dropmarker.toolbarbutton-menubutton-dropmarker:before {
      appearance: none !important;
    content: none !important;
    }

    Einmal editiert, zuletzt von Bastler (8. Januar 2024 um 22:34) aus folgendem Grund: Code angepasst

  • DarkCorri53i
    Mitglied
    Reaktionen
    11
    Beiträge
    147
    Mitglied seit
    19. Jul. 2023
    Hilfreiche Antworten
    2
    • 9. Januar 2024 um 05:39
    • #18
    Zitat von Bastler

    Versuche Folgendes gegen die Trennstriche im Button.

    Hallo Bastler,

    hat leider keine Wirkung. Der graue Rahmen bleibt. Die Trennstriche die sichtbar sind, sind nur Teil des kleineren grauen Rahmens im Button. Man sieht ihn nur beim hovern vollständig. Noch eine idee?

    Gruß

    Markus

  • DarkCorri53i
    Mitglied
    Reaktionen
    11
    Beiträge
    147
    Mitglied seit
    19. Jul. 2023
    Hilfreiche Antworten
    2
    • 10. Januar 2024 um 20:37
    • #19

    Hallo Leute,

    hat wirklich keiner eine Idee wie ich den kleinen grauen Rahmen mit Trennstrich in den beiden Buttons mit Untermenue ausblenden kann!

    Gruß

    Markus

  • dharkness21
    Senior-Mitglied
    Reaktionen
    454
    Beiträge
    1.849
    Mitglied seit
    29. Jun. 2005
    Hilfreiche Antworten
    53
    • 11. Januar 2024 um 19:43
    • #20
    Zitat von DarkCorri53i

    hat wirklich keiner eine Idee wie ich den kleinen grauen Rahmen mit Trennstrich in den beiden Buttons mit Untermenue ausblenden kann!

    Teste bitte mal das ↓.

    CSS
    #composeToolbar2 .toolbarbutton-1:not(:hover, :active, [open], [checked]) > .toolbarbutton-menubutton-dropmarker::before,
    #composeToolbar2 .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker::before {
        background-image: none !important;
    }

    und wech

    Dharkness

Aktuelle Programmversion

  • Thunderbird 138.0.1 veröffentlicht

    Thunder 13. Mai 2025 um 23:25

Aktuelle ESR-Version

  • Thunderbird 128.10.1 ESR veröffentlicht

    Thunder 14. Mai 2025 um 21:50

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:

Per Paypal unterstützen*

*Weiterleitung zu PayPal.Me

Ähnliche Themen

  • Mailausdruck mit PrintingTools NG ohne zusätzliche Anhänge-Angabe am Ende des Ausdrucks

    • X-O
    • 8. September 2022 um 13:05
    • Allgemeines Arbeiten / Konten einrichten / Installation & Update
  • Button von addOn Farblichanpassen wie Junk ?

    • Tapo
    • 12. August 2022 um 21:21
    • Manuelle Anpassungen per CSS oder Script
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™