Unterscheidung zwischen Tabs hervorheben

Zitat von chloroplast

Bitte reißt mir aber nicht den Kopf ab

Hallo und Willkommen hier im Forum. 😊

Keine Angst, das macht hier niemand.

Meinst du das so?

Wenn ja geht das mit einem CSS Code:

/*Aktiver Tab hover HG rot*/
.tabbrowser-tab:is([visuallyselected="true"]:hover, [multiselected]) > .tab-stack > .tab-background {
  background: red !important;
}

.tabbrowser-tab[visuallyselected="true"]:hover {
  color: white !important;
}

.tabbrowser-tab[visuallyselected="true"] {
  color: black !important;
  font-weight: bold !important;
}

/*Aktiver Tab HG orange*/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
  background: orange !important;
  box-shadow: none !important;
}

/*Inaktiver Tab hover HG blau*/
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
  background: blue !important;    
}

.tabbrowser-tab:not([visuallyselected="true"]):hover {
  color: white !important;
}

.tabbrowser-tab:not([visuallyselected="true"]) {
  color: black !important;
  font-weight: bold !important;
}

/*Inaktiver Tab HG hellgrau*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  background: lightgrey !important;  
}

Einzutragen in die userChrome.css

Sollte der Ordner chrome nicht vorhanden sein musst du ihn dir erst erstellen, und in ihm dann eine userChrome.css
Du mußt dir im Profilordner einen neuen Ordner chrome erstellen und in diesem dann eine Textdatei ( mit einem Editor ) in die du den Code kopierst, bzw. einträgst.

Dann schließt du die Datei und speicherst sie als userChrome.css ab.
Danach mußt du den Firefox neu starten.

PS:
Du musst dir dazu die versteckten Dateiendungen anzeigen lassen.

Um das einzustellen klickt man im Windows 10 Explorer (wenn man einen Ordner offen hat) erst oben links auf Ansicht..dann rechts oben auf

"Optionen" > "Ordner und Suchoptionen ändern" > "Ansicht"

und entfernt das Häkchen bei "Erweiterungen bei bekannten Dateitypen ausblenden"

Wo finde ich meinen Profilordner

Eine genaue Beschreibung dazu befindet sich auch unter diesem Link:

Videoanleitung für die userChrome.css und mehr

Zusätzlich muss in about:config der Eintrag:

toolkit.legacyUserProfileCustomizations.stylesheets

auf true stehen.

Oder auch so:

/*Aktiver Tab hover HG rot*/
.tabbrowser-tab:is([visuallyselected="true"]:hover, [multiselected]) > .tab-stack > .tab-background {
  background: red !important;
}

.tabbrowser-tab[visuallyselected="true"]:hover {
  color: white !important;
}

.tabbrowser-tab[visuallyselected="true"] {
  color: black !important;
  font-weight: bold !important;
}

/*Aktiver Tab HG lightgrey*/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
  background: lightgrey !important;
  border: 1px solid grey !important;
  box-shadow: none !important;
}

/*Inaktiver Tab hover HG blau*/
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
  background: blue !important;    
}

.tabbrowser-tab:not([visuallyselected="true"]):hover {
  color: white !important;
}

.tabbrowser-tab:not([visuallyselected="true"]) {
  color: black !important;
  font-weight: bold !important;
}

/*Inaktiver Tab HG hellgrau*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  border: 1px solid grey !important;
  background: white !important;  
  opacity: .8 !important;
}

Alternativ geht das auch mit einer Erweiterung:

ColorfulTabs – Holen Sie sich diese Erweiterung für 🦊 Firefox (de)

Laden Sie ColorfulTabs für Firefox herunter. The first addon you should be installing on a fresh Firefox install. A must have. The most beautiful yet the…

addons.mozilla.org

Zitat von chloroplast

Das Inspektor-Tool wird da ja warscheinlich nicht mehr wirklich weiterhelfen

Warum sollte es nicht weiterhelfen?

Ich kann bestätigen, dass es das sehr gut kann

Zitat von chloroplast

war genau das was ich gesucht habe

Freut mich

Zitat von chloroplast

Gibt es irgendwo eine Doku über die verwendeten CSS-Klassen?

Nicht das ich wüsste.

Zitat von chloroplast

Das Inspektor-Tool wird da ja warscheinlich nicht mehr wirklich weiterhelfen

Wenn dann nur das.

Beitrag

Anleitung zur Nutzung des Inspektors und der Stilbearbeitung aus den Entwicklerwerkzeugen

Firefox enthält eine ganze Reihe von Entwicklerwerkzeugen (englisch: developer tools), mit denen man HTML, CSS, JavaScript auf Webseiten und der Firefox-Benutzeroberfläche untersuchen, bearbeiten und nach Fehlern durchsuchen kann und in erster Linie für Webentwickler gedacht sind. Es gibt folgende Entwicklerwerkzeuge:

- Inspektor

- Konsole

- Debugger

- Netzwerkanalyse

- Stilbearbeitung

- Laufzeitanalyse (nur für Webseiten)

- Speicher

- Web-Speicher

- Barrierefreiheit

Dieser Beitrag beschränkt sich…

milupo

15. Februar 2020 um 15:48

Zitat von chloroplast

Danke für alles

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Zitat von chloroplast

Ich hatte nicht wargenommen das Browser-Werkzeuge etwas anderes sind als die Werkzeuge für Web-Entwickler.

Die Browser-Werkzeuge sind speziell für die Gestaltung der Firefox-Oberfläche, nicht für Webseiten. Bei Webseiten reicht ein Rechtsklick auf die entsprechende Stelle und dann Untersuchen auswählen. Dann werden dir ebenfalls die Entwicklerwerkzeuge angezeigt, die aber dann den Code für die Webseite zeigen.