Die 3 Buttons schließen, verkleinern, minimieren vom FF einfärben

heiko

Hallo Forum,

ich habe die Menüleiste aktuell auf blau und nun sind die Buttons oben rechts schließen, verkleinern und minimieren nur sehr schwach zu sehen.

Daher wollte ich mal fragen, ob man diese 3 Buttons mit eigenen Wunschfarben umgestalten kann. Ideal wäre es, wenn man die Farbe für jeden Button festlegen könnte und vielleicht auch einen Hovereffekt beim überfahren mit der Maus erzeugen könnte.

Vielleicht hat jemand einen Code parat.

Herzlichen Dank

LG Heiko

Zitronella

Zitat von heiko

ich habe die Menüleiste aktuell auf blau

Bitte Code posten, mit dem du die blau gemacht hast.

Ich frage deswegen, da es manchmal ein anderes Verhalten ergibt, je nachdem wie der verwendete Code ist.

heiko

Ah ok, kein Problem.

Hier ist er

LG Heiko

CSS

/* Menüleiste (Beschriftung) */

menubar > *{ 
background-color: blue !important;
color: #ffff00 !important;
font-size: 15px !important; 
font-weight: bold !important;
}

/* Menüleiste (Farbe Zwischenraum bis minimieren) */

#toolbar-menubar {
background-color: blue !important;
}

Alles anzeigen

Dharkness

Hi heiko,

für die 3 Button fügst Du das ↓ in die userChrome.css ein.

CSS

#toolbar-menubar toolbarbutton.titlebar-min {
    background-color: orangered !important;
}
#toolbar-menubar toolbarbutton.titlebar-max {
    background-color: yellowgreen !important;
}
#toolbar-menubar toolbarbutton.titlebar-restore {
    background-color: lightslategray !important;
}
#toolbar-menubar toolbarbutton.titlebar-close {
    background-color: red !important;
}
#toolbar-menubar toolbarbutton.titlebar-min:hover,
#toolbar-menubar toolbarbutton.titlebar-max:hover,
#toolbar-menubar toolbarbutton.titlebar-restore:hover,
#toolbar-menubar toolbarbutton.titlebar-close:hover {
    background-color: skyblue !important;
}

Alles anzeigen

Die Farben * musst Du natürlich noch Deinem Geschmack entsprechend anpassen.

*Grafik/Farbe/Farbpaletten auf wiki.selfhtml.org

FuchsFan

Dharkness

Fehlt da hinter Zeile 15 ein Komma?

Dharkness

Hi FuchsFan,

Zitat von FuchsFan

Fehlt da hinter Zeile 15 ein Komma?

in der Tat, ist korrigiert.

2002Andreas

Zitat von heiko

verkleinern und minimieren nur sehr schwach zu sehen.

Teste bitte:

CSS

.titlebar-buttonbox-container {
  color: white !important;
}

/* Menüleiste (Farbe Zwischenraum bis minimieren) */

#toolbar-menubar{
background-color: blue !important;
}

#menubar-items {
  color: white !important;
}

Alles anzeigen

Dharkness

Hallo Andreas,

was ich nicht hin bekommen habe, sind die Icons in den 4 Button anzupassen, fill wirkt anscheinend nicht,geht da was?

Schon guckt man nochmal, findet man stroke, grml.

CSS

#toolbar-menubar toolbarbutton.titlebar-min {
    stroke: #FFF !important;
    background-color: orangered !important;
}
#toolbar-menubar toolbarbutton.titlebar-max {
    stroke: #FFF !important;
    background-color: yellowgreen !important;
}
#toolbar-menubar toolbarbutton.titlebar-restore {
    stroke: #FFF !important;
    background-color: lightslategray !important;
}
#toolbar-menubar toolbarbutton.titlebar-close {
    stroke: #FFF !important;
    background-color: red !important;
}
#toolbar-menubar toolbarbutton.titlebar-min:hover,
#toolbar-menubar toolbarbutton.titlebar-max:hover,
#toolbar-menubar toolbarbutton.titlebar-restore:hover,
#toolbar-menubar toolbarbutton.titlebar-close:hover {
    stroke: #000 !important;
    background-color: skyblue !important;
}

Alles anzeigen

Was ist der Unterschied zwischen strokeund fill?

heiko

Dharkness

2002Andreas

Herzlichen Dank. Beide funktionieren wunderbar. Ich finde beide sehr schön und werde mir beide auch mal sichern um einfach mal etwas flexibel zu sein. Echt gute Arbeit Jungs

Nochmal vielen Dank

Beste Grüße Heiko

Dharkness

Hallo heiko,

gerne doch.

2002Andreas

Zitat von Dharkness

was ich nicht hin bekommen habe,

Teste bitte:

CSS

#toolbar-menubar toolbarbutton.titlebar-min {
    color: white !important;
    background-color: orangered !important;
  
}
#toolbar-menubar toolbarbutton.titlebar-max {
    color:  white !important;
    background-color: yellowgreen !important;
}
#toolbar-menubar toolbarbutton.titlebar-restore {
    color: white !important;
    background-color: lightslategray !important;
}
#toolbar-menubar toolbarbutton.titlebar-close {
    color: white !important;
    background-color: red !important;
}
#toolbar-menubar toolbarbutton.titlebar-min:hover,
#toolbar-menubar toolbarbutton.titlebar-max:hover,
#toolbar-menubar toolbarbutton.titlebar-restore:hover,
#toolbar-menubar toolbarbutton.titlebar-close:hover {
    color: white !important;
    background-color: skyblue !important;
}

Alles anzeigen

Dharkness

Hi Andreas,

ich habe das zwischenzeitlich über stroke statt color gemacht, natürlich trotzdem Dankeschön für Deine mühe.

Auf den Verkleinern-Button wird gerade gehovert.

2002Andreas

Zitat von Dharkness

Was ist der Unterschied zwischen stroke und fill?

Evtl. hilft dir das weiter:

https://developer.mozilla.org/de/docs/Web/SV…lls_and_Strokes

Dharkness

Zitat von 2002Andreas

Evtl. hilft dir das weiter:

Hi,

verstehe ich das richtig, fill füllt etwas und stroke umrahmt etwas?

2002Andreas

So lese ich das auch.

Funktioniert aber wohl nicht mit jedem Icon.

Dharkness

Zitat von 2002Andreas

So lese ich das auch.
Funktioniert aber wohl nicht mit jedem Icon.

Eben, deshalb habe ich ja stroke statt fill verwendet, ich muss das also nicht wirklich auf color ändern, oder?

2002Andreas

Zitat von Dharkness

nicht wirklich auf color ändern, oder?

Wenn alles funktioniert...kannst du es so lassen.

Dharkness

Zitat von 2002Andreas

kannst du es so lassen.

Done.

Sören Hentzschel

Zitat von 2002Andreas

Funktioniert aber wohl nicht mit jedem Icon.

Das ist genau der Punkt: Was zu verwenden ist, hängt davon ab, wie die SVG-Grafik aufgebaut ist. Man kann die Farbe von nichts verändern, was in der Grafik überhaupt nicht existiert.

2002Andreas

Zitat von Sören Hentzschel

hängt davon ab, wie die SVG-Grafik aufgebaut ist.

Danke für die Erklärung

Die 3 Buttons schließen, verkleinern, minimieren vom FF einfärben

Ähnliche Themen

"verkleinern, vergrössern,schliessen" Buttons wurden verschoben