[3.3] Button farblich als aktiv darstellen

[archivar]

Ich habe mir in der navbar_header.html einige Button erstellt, welche mit verschiedenen Themen verlinkt wurden. Dafür habe ich die class:“ button“ aus der color.css verwendet.

Code: Alles auswählen

<a class="button" href="/viewtopic.php?f=1&t=1" title="Team">Team</a>

Wie bekomme ich es nun noch hin, dass wenn man auf einen dieser Button klickt dieser farblich als aktiv dargestellt bleibt bis man wieder auf einen anderen Button klickt und dieser dann farblich als aktiv dargestellt bleibt? Ähnlich wie im persöhnlichen Bereich.
Bei Bedarf kann ich den Link zur betreffenden Seite zur Verfügung stellen.

[Crizzo]

Hi,

wir lösen das im Moment so (Ausschnitt aus der ganzen CSS-Regel)

Code: Alles auswählen

body[class~="section-index"] .phpbbde_navigation .mainnavi li.but-community { 
 /* Dein CSS Code hier */
 }

D.h. du kannst einfach die Unique-Infos raussammeln, die die Seite als solche identifizieren und dann per CSS-Selektor die Erscheinung ändern.

[archivar]

In welcher Datei muss ich dann wo und was erstellen oder einbinden?

[Crizzo]

In einer CSS-Datei deiner Wahl, die zu deinem Style passt.

Ich hab hier für die Navigation einfach eine eigene gemacht: phpbbde-navigation.css

[archivar]

Ich habe für die Buttons keine eigene Classe erstellt, sondern habe diese aus der color.css übertragen.
Wie könnte der Code für die neue ???.css ausehen?
Und wie könnte der html-Code für diese Buttons in der navbar_header.html aussehen?
Ein Beispiel hierfür wäre für mich sehr hilfreich!

[Crizzo]

Du kannst auch einen Button ohne eigene Klasse auch mit einem Attribute selector abgreifen, wie ich es mit Body vorgemacht habe.

[archivar]

Hi,

wir lösen das im Moment so (Ausschnitt aus der ganzen CSS-Regel)

Code: Alles auswählen

body[class~="section-index"] .phpbbde_navigation .mainnavi li.but-community { 
 /* Dein CSS Code hier */
 }

D.h. du kannst einfach die Unique-Infos raussammeln, die die Seite als solche identifizieren und dann per CSS-Selektor die Erscheinung ändern.

Welchen Code muss ich hier einfügen?:

/* Dein CSS Code hier */

Und wo muss ich den "Attribute selector" eintragen?

[Crizzo]

Welchen Code muss ich hier einfügen?:

Naja, was du halt mit dem Button machen willst.

Z. B. ne andere Farbe https://wiki.selfhtml.org/wiki/CSS/Eige ... rung/color

Und wo muss ich den "Attribute selector" eintragen?

Anstelle des li.button-community, wenn der keine Klasse hat. https://wiki.selfhtml.org/wiki/CSS/Sele ... ektor/Wert

[archivar]

Es tut mir leid, aber ich bekomme es nicht hin.
Und noch einmal zum besseren Verständnis:
Die von mir (wie im ersten Beitrag schon beschrieben) eingefügten Buttons (z.B. Schrift braun) funktionieren - auch die Button-Hover-Farbe (z.B. Schrift rot) und auch die eingefügten Links zum entsprechenden Thema.
Der aktive Button soll aber die Hover-Farbe (z.B. Schrift rot) solange zum verlinkten Thema beibehalten wie ich mir das Thema ansehe.
Erst dann, wenn ich einen anderen Button anlicke um mir ein anderes Thema anzusehen, soll dann der inaktive Button automatisch seine Ursprungsfarbe (z.B. Schrift braun) wiedererhalten, so wie es bei den Tabs im persönlichen Bereich der Fall ist.

[Crizzo]

Verlink mal dein Forum mit den Buttons.