Menu Footer Farbe ändern bei Collapsible Dropdown

Dani74 · Screenshot 2026-07-26 105716.png

Hallo zusammen

Ich tu mich gerade schwer mit der user.css

Folgendes; ich verwende das Template Cassiopeia extended, davon habe ich ein Child-Template angelegt (cassiopeia_socialplus). Im Footer habe ich ein Footer-Menu angelegt mit Layout Collapsible Dropdown. Für das Dropdown möchte ich via user.css die Farben auf rot anpassen, Link Farbe und Hover weiss. Ich habe schon bei der Intelligenten- (KI) Tante Google nachgefragt und das Firefox Werkzeug für Web-Entwickler ausprobiert. Aber bei jedem Versuch hat sich nichts geändert (Browser Verlauf jedesmal gelöscht und aktualisiert)

Kann mir da jemand helfen? Ich bin sehr dankbar.

Stef

Hallo,

In deiner user.css

Code

.metismenu-item.item-300.level-2 {
  color: #a03535;
}

Arnulf

Hallo Dani74

Mit dem Bild ist klar, was du meinst: Footer und Hauptlinks sind bereits rot bzw. weiss, nur das aufgeklappte Dropdown unter "Member+" ist noch dunkelblau mit kaum lesbarer Schrift. Genau diese Fläche und deren Text willst du auf rot mit weisser Schrift bringen.

Versuch dafür mal folgende Regel in deiner user.css:

css

Code

.footer .dropdown-menu {
    background-color: #a63232; /* dein Footer-Rot */
}

.footer .dropdown-menu .dropdown-item {
    color: #ffffff;
    background-color: transparent;
}

.footer .dropdown-menu .dropdown-item:hover,
.footer .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
    background-color: #8a2727; /* etwas dunkleres Rot für den Hover */
}

Alles anzeigen

Den Rot-Wert #a63232 ersetzt du am besten durch genau den, den du auch für den restlichen Footer nutzt, dann wirkt es einheitlich.

Wenn sich damit nichts ändert, sind zwei Ursachen am wahrscheinlichsten:

Erstens, die user.css wird gar nicht geladen. Das testest du schnell, indem du testweise body { border-top: 5px solid lime; } einträgst. Kommt kein grüner Streifen, wird die Datei nicht eingebunden, dann stimmt der Pfad im Child-Template nicht (sie sollte unter templates/cassiopeia_socialplus/css/user.css liegen).

Zweitens, die Spezifität reicht nicht, weil Bootstrap die Farbe spezifischer setzt. Dann brauchst du den genauen Selektor: F12 drücken, mit dem Auswahl-Pfeil oben links direkt auf die blaue Fläche klicken, und rechts ablesen, welche Klasse dort die background-color vergibt. Poste den Selektor hier, dann bauen wir dir die Regel punktgenau.

Rolf Dautrich

Arnulf Ich muss Dich leider korrigieren: Der Pfad zur user.css muss media/templates/site/<template-name>/css sein (seit J4).

Dani74

Danke Arnulf

Funktioniert (noch) nicht 💁
Ich hatte auch schon im Verdacht dass die user.css nicht greift. Wenn ich mir jedoch den Seitenquelltext anzeigen lasse, sieht das eigentlich korrekt aus, oder?

Zeile 28; <link href="/media/templates/site/cassiopeia_socialplus/css/user.css?6cae9a" rel="stylesheet">

Arnulf

Danke Rolf für die Korrektur, das war tatsächlich noch der alte Pfad aus der J3-Zeit, seit J4 liegt das Verzeichnis wie du schreibst unter media/templates/site/.

Dani74, gut zu sehen, dass die Datei laut Quelltext korrekt eingebunden wird, das Ladeproblem ist damit ausgeschlossen. Dann bleibt tatsächlich die Spezifität übrig, und Stefs Klasse .metismenu-item.item-300.level-2 ist ein guter Ansatzpunkt. Probier mal diese kombinierte Regel:

css

Code

.footer .metismenu-item.level-2 {
    background-color: #a63232;
}

.footer .metismenu-item.level-2 a {
    color: #ffffff;
}

.footer .metismenu-item.level-2 a:hover,
.footer .metismenu-item.level-2 a:focus {
    color: #ffffff;
    background-color: #8a2727;
}

Alles anzeigen

Ich hab die item-300 bewusst rausgelassen, die ist vermutlich nur die zufällige ID deines konkreten Menüpunkts und würde die Regel unnötig auf genau diesen einen Eintrag einschränken, während level-2 alle Dropdown-Einträge gleichermassen erfasst.

Dani74 · Screenshot 2026-07-26 113417.png

Arnulf

Bitte schau dir mein neues printscreen an

Stef

Arnulf

Bitte oben vor deine Antwort einen Titel mit: Diese Antwort wurde mit KI-generiert.

Gemäss Forum-Regeln.

Zitat

Kennzeichnungspflicht: Jeder Beitrag, bei dem eine KI zum Inhalt beigetragen hat, muss eindeutig als "KI-generiert" gekennzeichnet werden. Unsere Moderatoren behalten sich das Recht vor, die Kennzeichnung “KI-generiert” hinzuzufügen, auch wenn der Nutzer dies nicht selbst getan hat.

Es ist nicht genug, es nur in der Signatur zu erwähnen. Die Signatur wird übrigens auf Mobile nicht angezeigt.

Beitrag

RE: Content Security Policy

[…]

Bestimmt nicht. Mach einfach was chatGPT sagt und trag die Konsequenzen.
Aber bitte beachtet die forenregeln:

Wir stellen fest, dass KI-Tools zunehmend genutzt werden. Diese Regel soll Transparenz gewährleisten und Missverständnisse vermeiden:

Kennzeichnungspflicht: Jeder Beitrag, bei dem eine KI zum Inhalt beigetragen hat, muss eindeutig als "KI-generiert" gekennzeichnet werden. Unsere Moderatoren behalten sich das Recht vor, die Kennzeichnung “KI-generiert” hinzuzufügen, auch wenn der

…

firstlady

23. Juli 2026 um 20:58

Stef

Dani74 Hast du die Antwort #2 nicht versucht?

Arnulf

Antwort mithilfe von KI erstellt.

Jetzt seh ich das Problem: Das ist gar kein Bootstrap-Dropdown, sondern die MetisMenu-Bibliothek (erkennbar an mm-collapse, mm-show), die für das Layout "Collapsible Dropdown" zum Einsatz kommt. Meine vorherige Regel mit .dropdown-menu/.dropdown-item zielte damit ins Leere, das war der falsche Klassenname für dieses Layout, sorry dafür.

Mit den Klassen aus deinem Screenshot sollte das jetzt greifen:

css

Code

.footer li.metismenu-item.level-2 {
    background-color: #a63232;
}

.footer li.metismenu-item.level-2 a {
    color: #ffffff;
}

.footer li.metismenu-item.level-2 a:hover,
.footer li.metismenu-item.level-2 a:focus {
    color: #ffffff;
    background-color: #8a2727;
}

Alles anzeigen

Falls das immer noch nicht greift: Klick in den Entwickler-Werkzeugen statt auf "Layout" auf den Reiter "Berechnet" (Computed) und such dort gezielt nach background-color. Dort steht dann auch die genaue Quelldatei und Zeile, aus der die aktuelle Blau-Färbung tatsächlich kommt, das zeigt uns, welche Regel wir noch überstimmen müssen.

Dani74

Ja, Antwort zwei ist online aber immer noch keine Änderung.

Habe ich generell einen Fehler in der user.css?

CSS

a:link, a:visited {
 text-decoration: none;
}
.container-bottom-a {
    flex-direction: column;
}
.cb_template .activityButtonMore {
    color: #fff;
    background-color: #ce3c37;
    border-color: #17a2b8;
}

.cb_template .activityButtonMore:hover {
    color: #fff;
    background-color: #832320;
    border-color: #117a8b;
}

.cb_template .activityButtonMore:not(:disabled):not(.disabled):active,
.cb_template .activityButtonMore:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #ce3c37;
    border-color: #10707f;
}

.cb_template .activityButtonMore:focus,
.cb_template .activityButtonMore.focus {
    color: #fff;
    background-color: #ce3c37;
    border-color: #117a8b;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
.container-footer .navbar-toggler {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}
@media (min-width: 992px) {
    .hidden-desktop {
        display: none !important;
    }
  /* Cassiopeia Sandwich Menü näher an den Header bringen */
@media only screen and (max-width: 992px) {
  .container-header {
    padding-top: 0 !important;  /* Kleinerer Abstand oben */
    padding-bottom: 0.5rem; /* Kleinerer Abstand unten */
  }
  
.footer .metismenu-item.level-2 {
    background-color: #832320;
}

.footer .metismenu-item.level-2 a {
    color: #ffffff;
}

.footer .metismenu-item.level-2 a:hover,
.footer .metismenu-item.level-2 a:focus {
    color: #ffffff;
    background-color: #8a2727;
}

Alles anzeigen

Stef

Zitat von Dani74

Ja, Antwort zwei ist online aber immer noch keine Änderung.

Habe ich generell einen Fehler in der user.css?

CSS

a:link, a:visited {
 text-decoration: none;
}
.container-bottom-a {
    flex-direction: column;
}
.cb_template .activityButtonMore {
    color: #fff;
    background-color: #ce3c37;
    border-color: #17a2b8;
}

.cb_template .activityButtonMore:hover {
    color: #fff;
    background-color: #832320;
    border-color: #117a8b;
}

.cb_template .activityButtonMore:not(:disabled):not(.disabled):active,
.cb_template .activityButtonMore:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #ce3c37;
    border-color: #10707f;
}

.cb_template .activityButtonMore:focus,
.cb_template .activityButtonMore.focus {
    color: #fff;
    background-color: #ce3c37;
    border-color: #117a8b;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
.container-footer .navbar-toggler {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}
@media (min-width: 992px) {
    .hidden-desktop {
        display: none !important;
    }
  /* Cassiopeia Sandwich Menü näher an den Header bringen */
@media only screen and (max-width: 992px) {
  .container-header {
    padding-top: 0 !important;  /* Kleinerer Abstand oben */
    padding-bottom: 0.5rem; /* Kleinerer Abstand unten */
  }
  
.footer .metismenu-item.level-2 {
    background-color: #832320;
}

.footer .metismenu-item.level-2 a {
    color: #ffffff;
}

.footer .metismenu-item.level-2 a:hover,
.footer .metismenu-item.level-2 a:focus {
    color: #ffffff;
    background-color: #8a2727;
}

Alles anzeigen

Sehe in deiner user.css diesen Code nicht:

Code

.metismenu-item.item-300.level-2 {
  color: #a03535;
}

Bei @media fehlen jeweils am Ende noch einen " } "

Richtig ist zum Beispiel:

CSS

@media (min-width: 992px) {
    .hidden-desktop {
        display: none !important;
    }
    }

firstlady

In deiner user.css fehlt eine schließende Klammer. Deshalb wird alles was ddanach kommt ignoriert.

CSS

/* Cassiopeia Sandwich Menü näher an den Header bringen */
@media only screen and (max-width: 992px) {
 .container-header {
   padding-top: 0 !important;  /* Kleinerer Abstand oben */
   padding-bottom: 0.5rem; /* Kleinerer Abstand unten */
 }
}

EDIT: zu langsam ...

Dani74

firstlady so simpel aber mit grosser Auswirkung. Vielen Dank, funktioniert wie gewünscht

Arnulf auch dir ein grosses dankeschön, dein Code funktioniert wunderbar

Vielen Dank an alle beteiligten, ich wümsche euch allen einen schönen Sonntag

Dani74

Hallo zusammen

Ich sende hier nochmal meinen aktuellen Code. Grundsätzlich funktioniert er dank euch sehr gut. Jedoch habe ich noch den Schönheitsfehler dass es im Mobile noch nicht funktioniert.

Dektop = super!
Mobile = ist der Fehler noch da (siehe Printscreen vom Handy)

Kann mir da bitte nochmal jemand helfen?

Lg Dani

CSS

a:link, a:visited {
 text-decoration: none;
}
.container-bottom-a {
    flex-direction: column;
}
.cb_template .activityButtonMore {
    color: #fff;
    background-color: #ce3c37;
    border-color: #17a2b8;
}

.cb_template .activityButtonMore:hover {
    color: #fff;
    background-color: #832320;
    border-color: #117a8b;
}

.cb_template .activityButtonMore:not(:disabled):not(.disabled):active,
.cb_template .activityButtonMore:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #ce3c37;
    border-color: #10707f;
}

.cb_template .activityButtonMore:focus,
.cb_template .activityButtonMore.focus {
    color: #fff;
    background-color: #ce3c37;
    border-color: #117a8b;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
.container-footer .navbar-toggler {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}
@media (min-width: 992px) {
    .hidden-desktop {
        display: none !important;
    }
  /* Cassiopeia Sandwich Menü näher an den Header bringen */
@media only screen and (max-width: 992px) {
  .container-header {
    padding-top: 0 !important;  /* Kleinerer Abstand oben */
    padding-bottom: 0.5rem; /* Kleinerer Abstand unten */
  }
 } 
.footer li.metismenu-item.level-2 {
    background-color: #832320;
}

.footer li.metismenu-item.level-2 a {
    color: #ffffff;
}

.footer li.metismenu-item.level-2 a:hover,
.footer li.metismenu-item.level-2 a:focus {
    color: #ffffff;
    background-color: #8a2727;
}

Alles anzeigen

christine2

Hallo,

In der user.css fehlt in der Zeile 42 eine schließende Klammer (media queries).

(Bezieht sich nicht auf die CSS Zeilen in #15), sondern derzeitige Ausgabe.

Liebe Grüße
Christine

Dani74

christine2 Danke, habe es gesehen und verstanden. Funktioniert jetzt auch Mobile.

Ich wünsche dir einen schönen Tag