Cassiopeia: Footer Hintergrundfarbe und Höhe ändern

t-l

Hallo,

eigentlich dachte ich, dass das Ändern des Footers ein Leichtes ist, da ich mich an der Änderung der Hintergrundfarbe des Headers orientierte, aber ohne Erfolg.

Hatte diesen Code in die user.css eingegeben:

Code

/*Footer Hintergrundfarbe*/
.container-footer {
 background-color: #ab1717;
}

Was ist daran falsch?

Und wie kann ich die Höhe des Footers ändern?

Danke.

Grüße Tino

Stef

Suche nach "footer" in der CSS. Da ist noch ein background-image vorhanden.

t-l

Zitat von Stef

Suche nach "footer" in der CSS. Da ist noch ein background-image vorhanden.

Das müsste ich doch mit dem Code ausschalten können, aber keine Änderung.

Code

/*Footer Hintergrundfarbe*/
.container-footer {
  background-color: #ab1717;
  background-image: none;
}

Stef

Zitat von t-l
Das müsste ich doch mit dem Code ausschalten können, aber keine Änderung.
Code
/*Footer Hintergrundfarbe*/
.container-footer {
  background-color: #ab1717;
  background-image: none;
}

Background-image befindet sich nicht in .container-footer

t-l

Cache geleert, mit dem Code funktioniert es doch.

Stef

Kannst noch auf erledigt stellen, danke.

t-l

Wie bekomme ich die Höhe des Footers geändert?

drmenzelit

Die Höhe kannst du mit padding verändern

Code

.footer .grid-child {
   padding-block: 6rem;
}

padding-block ist die neue schreibweise für padding-top + padding-bottom

t-l

Ich stelle gerade ein merkwürdiges Verhalten des Footers fest.

Ich habe ja diesen Code in der user.css:

Code

/*Footer Hintergrundfarbe*/
.container-footer {
  background-color: #ab1717;
  background-image: none;
}

In der mobilen Ansicht wird diese Farbe so ausgegeben. Wenn ich jedoch die Seite auf dem Dektop ansehe, wird mir ein Blau mit Farbverlauf angezeigt, wie kommt das?

Stef

Habe ich doch im #2 und #4 geschrieben.

Sieger66

Zitat von t-l

...Wenn ich jedoch die Seite auf dem Dektop ansehe, wird mir ein Blau mit Farbverlauf angezeigt, wie kommt das?

Ursache siehe #35 dort: Cassiopeia Hamburger Menü nach oben, Hintergrundfarbe

Stef

Zitat von Sieger66

Ursache siehe #35 dort: Cassiopeia Hamburger Menü nach oben, Hintergrundfarbe

Mit deiner Antwort wird er nicht viel weiterkommen.

Ich denke, du verwechselst diesen Thread und deine Antwort mit völlig etwas anderem.

Sieger66

Nein, es ist keine Verwechselung. Da er meinen Code aus #34 in seine user.css übernommen hat ist nun aller nachfolgender Code in seiner user.css nur noch bei Screen mit gleich oder weniger als 992px wirksam...

Daher dann:

Zitat von t-l

...In der mobilen Ansicht wird diese Farbe so ausgegeben. Wenn ich jedoch die Seite auf dem Dektop ansehe, wird mir ein Blau mit Farbverlauf angezeigt...

Spezifischer wäre natürlich ohnehin z.B.:

Code

/*Footer Hintergrundfarbe*/
.footer.container-footer {
  background-color: #ab1717;
  background-image: none;
}

t-l

Zitat von Stef

Mit deiner Antwort wird er nicht viel weiterkommen.
Ich denke, du verwechselst diesen Thread und deine Antwort mit völlig etwas anderem.

Hallo, aber mit dem Hinweis und der hinzugefügten fehlenden Klammer im Code ist das Problem behoben. Jetzt wird der Footer in der gewollten Farbe und ohne Farbverlauf sowohl mobil als auch in der Desktop-Ansicht angezeigt.

Grüße Tino

Sieger66

Ja richtig, daher mein Hinweis in #11.

Der Farbverlauf und die Hintergrudfarbe kommt ja ursprünglich eigentlich aus:

Code

.footer {
 color:#fff;
 background-color:var(--cassiopeia-color-primary);
 background-image:linear-gradient(135deg,var(--cassiopeia-color-primary)0%,var(--cassiopeia-color-hover)100%);
 margin-top:1em
}

in der template.min.css bzw. template.css

Da der Footer in folgendem ist:

Code

<footer class="container-footer footer full-width">

ist .container-footer so spezifisch wie .footer und wirkt trotzdem weil die user.css nach der template.min.css geladen wird...

Stef

Sehe auf PC aber immer noch einen Farbverlauf.

Mit meinem Vorschlag im #2 ist nur diesen Code einzufügen und der Farbverlauf ist überall weg.

Code

.footer {
    background-image: none;
}

Sieger66

In #2 ist kein Code von dir.

footer.footer oder footer.container-footer wäre auch schon ein spezifischerer Selektor als nur .footer

Musst wohl Cache löschen...

Stef

Wünsche einen schönen Abend.