Header mit unterschiedlichen Hintergründen je Position (topbar, below-top, menu) mit Cassiopeia

Hallo liebe Joomla-Community,

mein Name ist Dominic und ich bin Joomla-Wiedereinsteiger. Ich habe damals noch mit Joomla 2 einiges gemacht und bin jetzt gebeten worden, eine Seite in Joomla 4 umzusetzen.

Nun zu meiner Frage:

Ich würde gerne eine ähnliche Menüstruktur wie auf joomla.org realisieren. Dort sind nach meinem Verständnis drei verschiedene Bereiche (Menüs und Logo) in drei unterschiedlichen Blautönen. In den Standardeinstellungen von Cassiopeia ist der gesamte Header-Bereich über die gesamte Seitenbreite blau. Ich kann die Hintergrundfarbe des gesamten Headers per css ändern.

.container-header {
  background-color: white;
  background-image: none;
}

Allerdings scheitere ich daran, unterschiedliche Farben für den Bereich below-top, menu usw zu realisieren. Versuche ich es über die Container, kann ich die Farbe zwar anpassen, die Anpassung gilt dann aber nur für den Inhaltsbereich und nicht für die gesamte Seitenbreite.

.container-below-top {
  background-color: #222255;
}

Ich gehe davon aus, dass die Container auf den Inhaltsbereich beschränkt sind. Ich möchte die Hintergründe jedoch für die gesamte Fensterbreite einstellen. Ich habe gesucht und gesucht, aber ich finde einfach keinen Lösungsansatz. Ich würde mich freuen, wenn mir hier jemand weiterhelfen könnte.

Ich bedanke mich schon mal ganz herzlich und wünsche noch schöne Ostern!

Liebe Grüße

Dominic

Vielen Dank schon mal für die Antworten. Das hat mir gute Hinweise gegeben, wonach ich suchen muss. Also wenn ich es richtig verstanden habe, gibt es einfach Positionen, die über die gesamte Breite gehen und welche, die in der Breite begrenzt sind. (siehe https://slides.woluweb.be/docs…/cassiopeia-positions.jpg)

Ich kann den Header weiß färben und die "topbar" sowie den "footer" über die ganze Breite z.B. Blau zu färben. Das Menü unter dem Logo ("container-nav") kann ich dann auch färben, aber eben nur auf Breite des Inhalts.

.header {
  background-color: #f4f6f7;
  background-image: none;
}

.site-grid {
  background-color: #f4f6f7;
  background-image: none;
}

.container-nav {
 background: #213060; 
}

.container-footer {
  background-color: #213060;
  background-image: none;
}

.container-topbar {
  background-color: #213060;
}

Hier mal eine Testseite ohne große Struktur und Inhalt:

Das ist zwar nicht exakt, was ich mir vorgestellt habe, aber so wie ich es verstehe, ist es aufgrund der hinterlegten div Klassen eben einfach nicht möglich die Menüleiste auf ganzer Seitenbreite zu färben. Alternativ würde ich gern die Fußzeile genau so breit färben wie das Menü, Wenn ich es richtig verstehe wird dafür aber das div "grid-child" genutzt, das auch an Stellen im Header vorkommt. Wenn ich dort den Hintergrund färbe ist es in der Fußzeile richtig, aber dann ist der Header daneben...

.container-footer {
  background-color: white;
  background-image: none;
}

.grid-child {
  background-color: #213060;
}

Die erste Version ist aber auch nicht so weit weg von dem gewünschten und ich könnte damit ganz gut leben. Aber eines verstehe ich noch nicht so richtig:

Wieso habe ich zwischen "site-grid" (grau) und "footer" (blau) einen großen leeren weißen Bereich. Laut der Übersicht ist doch zwischen "site-grid" und "footer" keine Position mehr. Guckt hier einfach der "body" durch, weil nicht genug Inhalt vorhanden ist, um die Lücke zu füllen (Der Header klebt oben, der Footer unten und site-grid ist eben nur so groß wie benötigt)?

Dominic

Danke für die Rückmeldung. In dem Fall ist der gesamte Header in Blau wie in der beschriebenen Ausgangssituation mit der Standardeinstellung von Cassiopeia. Ich sehe zumindest keinen Unterschied.

Da das Logo, welches ich bekommen habe, zwingend in eine weiße Zeile soll, da es sonst nicht gut aussieht, sollte der Header dreigeteilt sein: oben blau, dann weiß mit Logo und dann blau mit Menü. Das war in meinem Text vielleicht etwas missverständlich, das tut mir leid. Ich weiß auch nicht, warum ich nicht gleich daran gedacht habe, eine Beispielgrafik zu erstellen. Das hole ich hiermit nach. Also auf die Reihenfolge blau, weiß, blau im Header und blau als Footer habe ich wenig Einfluss. Die Frage ist letztlich: Schafft man es mit Cassiopeia, dass alle Bereiche gleich breit sind. Entweder Fensterbreite (im Bild links) oder Textbreite (Bild rechts). Ich scheitere jeweils an einem Element (siehe mein vorheriger Beitrag).

Liebe Grüße

Dominic

Vielen Dank! Das funktioniert super. Und ich habe gleichzeitig noch einiges für die Zukunft gelernt!

Liebe Grüße

Dominic