Seite 1 von 2

[3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 16:52
von 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.

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:02
von 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.

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:07
von archivar
In welcher Datei muss ich dann wo und was erstellen oder einbinden?

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:10
von 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

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:19
von 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!

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:34
von Crizzo
Du kannst auch einen Button ohne eigene Klasse auch mit einem Attribute selector abgreifen, wie ich es mit Body vorgemacht habe.

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:41
von archivar
Crizzo hat geschrieben: 24.09.2020 17:02 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?

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 17:57
von Crizzo
archivar hat geschrieben: 24.09.2020 17:41 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
archivar hat geschrieben: 24.09.2020 17:41 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

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 24.09.2020 19:05
von 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.

Re: [3.3] Button farblich als aktiv darstellen

Verfasst: 25.09.2020 08:47
von Crizzo
Verlink mal dein Forum mit den Buttons.