Einige Tabs nach aufgerufenen Websites einfärben.

Dharkness

Hallo zusammen,

ich will mit folgendem CSS-Schnipsel einige Tabs farblich anpassen.

CSS

/* remove default tab colors */
.tabbrowser-tab,
.tabbrowser-tab .tab-content {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Geizhals */
.tabbrowser-tab[label*=" - geizhals.de"][selected="true"] .tab-content {
  background-image: linear-gradient(to top, #005599 0%, #005599 85%, #12A102 85%, #12A102 100%) !important;
}

.tabbrowser-tab[label*=" - geizhals.de"]:not([selected="true"]) .tab-content {
  background-image: linear-gradient(to top, #005599 0%, #005599 85%, #005599 85%, #005599 100%) !important;
}
.tabbrowser-tab[label*=" - geizhals.de"]:not([selected="true"]):hover .tab-content,
.tabbrowser-tab[label*=" - geizhals.de"][selected="true"]:hover .tab-content {
  background-image: linear-gradient(to top, #D1E2F2 0%, #D1E2F2 85%, #005599 85%, #005599 100%) !important;
}
/* Geizhals */

Alles anzeigen

Hier als Beispiel der Tab von Geizhals.de, es funktioniert aber nur der .tabbrowser-tab[label*=" - geizhals.de"][selected="true"] .tab-content Eintrag. Die Hover-Einträge und der .tabbrowser-tab[label*=" - geizhals.de"]:not([selected="true"]) Eintrag funktionieren allerdings nicht, wo muss ich schrauben?

2002Andreas

Damit:

Code

.tabbrowser-tab[label*=" - geizhals.de"]

funktioniert es hier gar nicht.

Der Tabtext lautet hier:

Code

Geizhals Deutschland

Mit diesem Code:

CSS

/* remove default tab colors */
.tabbrowser-tab,
.tabbrowser-tab .tab-content {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Geizhals */
.tabbrowser-tab[label*="Geizhals Deutschland"][selected="true"] .tab-content {
  background-image: linear-gradient(to top, #005599 0%, #005599 85%, #12A102 85%, #12A102 100%) !important;
}

.tabbrowser-tab[label*="Geizhals Deutschland"]:not([selected="true"]) .tab-content {
  background-image: linear-gradient(to top, #005599 0%, #005599 85%, #005599 85%, #005599 100%) !important;
}
.tabbrowser-tab[label*="Geizhals Deutschland"]:not([selected="true"]):hover .tab-content,
.tabbrowser-tab[label*="Geizhals Deutschland"][selected="true"]:hover .tab-content {
  background-image: linear-gradient(to top, #D1E2F2 0%, #D1E2F2 85%, #005599 85%, #005599 100%) !important;
}
/* Geizhals */

Alles anzeigen

sieht es dann so aus:

milupo

Zitat von 2002Andreas

Der Tabtext lautet hier:

So ist es. Der Zuweisungsoperator *= besagt, dass der in den nachfolgenden Anführungszeichen stehende Text im Text enthalten sein muss, egal ob am Anfang, in der Mitte oder am Ende. Es muss auch nicht der vollständige Text angegeben werden, aber es muss immer Text angegeben werden, den es auch gibt. Und - geizhals.de gibt es im Tabtext nicht.

Dharkness

Hallo,

hier gibt es den angegebenen Teil sehr wohl, das fügt hier eine Erweiterung ein, nur leider funktionierte mein CSS-Schnipsel bei mir nicht, bzw. eben nur Teilweise. Ich habe den Fehler jetzt allerdings gefunden, es war ein Uralt-Eintrag vorhanden, der hier quer geschossen hat, auskommentiert, neu gestartet und siehe da, es funktioniert nun wieder ohne Probleme.

2002Andreas

Zitat von Dharkness

das fügt hier eine Erweiterung ein

Und woher sollen wir das dann wissen?

Aber schön wenn dein Problem behoben ist.

Dharkness

Hallo Andreas,

jupp, es wäre wohl sinnig gewesen, das zu erwähnen, ich gelobe Besserung.

2002Andreas

Zitat von Dharkness

ich gelobe Besserung.