in Toolbar Button einzelnt ändern ?

Tapo

Hallo,

ich möchte in meiner Toolbar die buttons für Abrufen, Verfassen, Adressbuch je einzelnt ändern.

hiermit werden komplett alle buttons geändert die in der Toolbar sind

Code

.button.toolbar-button[open="true"],
.button.toolbar-button:not([disabled="true"]):hover,
.button.unified-toolbar-button:enabled:is([aria-pressed="true"], :hover) {
  color: var(--button-hover-text-color);
  background-color: var(--toolbar-button-hover-background-color);
  border-color: var(--toolbar-button-hover-border-color);
}

genau das selbe möchte ich aber für jeden einzelnen Buttonhaben damit ich z.B Abrufen Rot, verfassen in Grüm und Adressbuch in Pink bekomme.

wie mach ich das ohne den button zu vergrößern oder sonst in der Form zu ändern

dharkness21

Zitat von Tapo

genau das selbe möchte ich aber für jeden einzelnen Buttonhaben damit ich z.B Abrufen Rot, verfassen in Grüm und Adressbuch in Pink bekomme.

Teste bitte mal die anzupassende Rohversion, sprich die Farben musst Du noch anpssen.

CSS

/* Adressbuch */
#unifiedToolbarContent > li.address-book > div > button {
    background-color: #905B46 !important;
    color: #FFF !important;
}
/* Abrufen */
#unifiedToolbarContent > li.get-messages > div > button {
    background-color: #905B46 !important;
    color: #FFF !important;
}
/* Verfassen */
#unifiedToolbarContent > li.write-message > div > button {
    background-color: #905B46 !important;
    color: #FFF !important;
}

Alles anzeigen

Tapo

passt für mich.

anpassen der Farbe ist klar.

Danke

dharkness21

Zitat von Tapo

passt für mich.

War wie immer gerne geschehen.

Thomas will lernen

Wie kann man über die Farbe hinaus auch den Text des Buttons ändern?

Mein Ergebnis ist noch nicht optimal, weil der Button-Hintergrund beim Hovern nun viel kleiner ist, als beim unveränderten Button. Hier mein Versuch (gebastelt vor allem aus ChaosRacer's Lösung in einem anderen Thread):

CSS

.unified-toolbar .go-back .button-icon {
 color: black !important;
 position: absolute !important;
}
#unifiedToolbarContent > li.go-back > div > button {
 appearance: none !important;
 background-image: none !important;
 color: transparent !important;
 position: relative !important;
}
/* --- Content ersetzen, positionieren & einblenden --- */
#unifiedToolbarContent > li.go-back > div > button::after {
 appearance: none !important;
 content: 'Back' !important;
 color: #6b6b6b !important;
 position: absolute !important;
 left: 8px !important;
 right: -10px !important;
 padding: -10px !important;
}
#unifiedToolbarContent > li.go-back > div > button:hover::after {
 background-color: rgba(54, 54, 54, 0.1) !important;
}
/* --- Buttongröße an Content anpassen --- */
#unifiedToolbarContent > li.go-back > div > button {
 appearance: none !important;
 padding-inline-start: unset !important;
 padding-inline-end:  unset !important;
}

Alles anzeigen

dharkness21

Zitat von Thomas will lernen

Wie kann man über die Farbe hinaus auch den Text des Buttons ändern?
Mein Ergebnis ist noch nicht optimal, weil der Button-Hintergrund beim Hovern nun viel kleiner ist, als beim unveränderten Button. Hier mein Versuch (gebastelt vor allem aus ChaosRacer's Lösung in einem anderen Thread):

Meine Lösung für den Button war mal das ↓ CSS.

CSS

.unified-toolbar .go-back .button-icon {
    position: absolute !important;
    color: #FFF !important;
}
.unified-toolbar .go-back:hover .button-icon {
    color: #000 !important;
}
#unifiedToolbarContent > li.go-back > div > button {
    appearance: none !important;
    position: relative !important;
    transition: none !important;
    min-width: 44px !important;
    background-image: none !important;
    color: transparent !important;
}
#unifiedToolbarContent > li.go-back > div > button:hover {
    transition: none !important;
    background-color: #D1E2F2 !important;
    color: transparent !important;
}
#unifiedToolbarContent > li.go-back > div > button::after {
    appearance: none !important;
    position: absolute !important;
    transition: none !important;
    content: 'Back' !important;
    color: #FFF !important;
    left: 15px !important;
    right: 8px !important;
    padding: 0 !important;
}
#unifiedToolbarContent > li.go-back > div > button:hover::after {
    transition: none !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
}
#unifiedToolbarContent > li.go-back > div > button {
    appearance: none !important;
    padding-inline-start: unset !important;
    padding-inline-end:  unset !important;
}

Alles anzeigen

Thomas will lernen

Ah, wunderbar! Danke Dharkness!

Ich habe noch eine "border-color" hinzugefügt, die die Originale auch haben. Jetzt sehen die Buttons wirklich komplett identisch aus. Phuhh! Mann hey, was ein Akt, nur um den Button-Text zu ändern.

Danke nochmal!

CSS

#unifiedToolbarContent > li.go-back > div > button:hover {
    transition: none !important;
    background-color: #e6e6e6 !important;
    color: transparent !important;
    border-color: #c2c2c2 !important;
}

in Toolbar Button einzelnt ändern ?

Tapo 10. September 2023 um 18:50

Thunderbird 128.4.0 ESR veröffentlicht

Thunderbird 115.16.2 ESR veröffentlicht

Ähnliche Themen

Symbole in der Unified Toolbar färben

Button per Script aus FolderPane in UnifiedToolbar umhängen (cross-document)

toolbar button mit css anpassen ?

CSS-Code der Schließen-Button v91.+

Button Anordnung in der Nachrichtenansicht ändern möglich?