CSS Anpassungen Cassiopeia

taolight

Hallo,

FRAGE 1

ich suche eine Möglichkeit, den im Footer befindlichen DIV-Content etwas breiter zu verteilen ... mehrere Anläufe sind aber gescheitert ... der Content soll die Breite des statischen Artikels darüber nutzen ... der Hintergund soll die ganze Bildschirmbreite nutzen, so wie umgesetzt auf der Seite ...

<footer class="container-footer footer full-width">
<div class="grid-child">
<div class="mod-custom custom banner-overlay" id="mod-custom113">
<div class="overlay">
<div class="row border-bottom pb-3 d-flex justify-content-center">
<div class="col col-12 col-sm-6 col-lg-3 ">Text</div> <div class="col col-12 col-sm-6 col-lg-3 ">Text</div> <div class="col col-12 col-sm-6 col-lg-3 ">Text</div> <div class="col col-12 col-sm-6 col-lg-3 ">Text</div>
</div>
<div class="row p-4">
<div class="col-12 text-center" style="width:100%; font-weight: 100; font-size: 0.8rem;"><a href="/index.php/impressum">Impressum</a><br>© Manuela Haase 2025</div>
</div>
</div>
</div> </div>
</footer>

FRAGE 2

Modulposition Bottom-B möchte ich gern als container-fluid darstellen, um ein Bild zu platzieren, das bis an den Bildschirmrand geht - ohne Abstände - was ist da zu tun?

Dankende Grüße ...

drmenzelit

Du hast ein Modul erstellt und HTML-Code reingeschrieben, kann man machen, muss man aber nicht In der nächsten Ausgabe des Joomla Magazine wird ein Artikel von mir über den Footer-Bereich erscheinen

Du kannst momentan dem Modul die Klasse "col" geben, dann wird es die ganze Breite einnehmen.

Frage 2:

Code

.container-bottom-b {
	grid-column: full-start/full-end;
 	overflow: hidden;
 }

nicht ganz die feine Art, aber es funktioniert. Alternativ erstellst du ein Child-Template, machst eine Kopie der index.php und fügst die Klasse "full-width" im Container.

taolight

Liebe Viviana, herzlichen Dank ... Frage 2 ist also geklärt ... SUPER!

Frage 1 klappt nicht so wie ich es verstanden und umgesetzt habe ... liegt sicher an mir ... siehe Bild ...

drmenzelit

Du musst unter Modulstil "html5" wählen (und dann den Titel des Moduls verstecken)

taolight

Leider kann ich nicht beide Antworten als "Hilfreichste" markieren ... VIELEN HERZLICHEN DANK!!

Stef

Noch ein zusätzlicher kleiner Tipp, und es ist nur meine Meinung.

Ich denke, es braucht viel Glück, dass jemand auf das kleine Dreieck rechts neben "ANGEBOTE" klicken wird.

Ich würde es so wie "INFOTHEK" und "ÜBER UNS" machen, also als Titel.

taolight

vielen Dank ...

am liebsten hätte ich ja die alte Variante ... dass sich also beim drüber gehen das submenu direkt öffnet ... ist das unkompliziert machbar?

MBSR Achtsamkeitskurs

Von Krankenkassen bezuschusste MBSR Kurse ~ in Unna, Bochum und online ~ mit erfahrenen Trainerinnen ~ weil das Leben kostbar ist ...

achtsamkeitskurs.de

drmenzelit

Zitat von taolight

ist das unkompliziert machbar?

Das kann man mit CSS lösen:

Code

@media (min-width: 992px) {
  .mod-menu.is-hoverable > li:hover > .mm-collapse:not(.mm-show) {
    display: block;
  }
  .mod-menu.is-hoverable > li:hover > .mm-toggler:after {
    transform: rotateX(-180deg);
  }
}

Stef

Zitat von taolight

... ist das unkompliziert machbar?

Soviel ich weiss, ist es mit dem Cassiopeia Template nicht möglich.

Hoverable schon wie im #8 aber nicht das Big Menü wie in deinem Beispiel.

taolight

@ Viviana - perfekt! DANKE - ich bin beeindruckt!

@ Stef - hat geklappt ...

taolight

Gibt es vielleicht noch einen Tip - ich hänge schon wieder am Zentrieren eines Inhaltes ... Banner ... Content soll mittig ...

MBSR Kurs - Erfahrungen

Und das Hintergundbild kriege ich auch nicht "background-size: cover;" ???

drmenzelit

Ergänze die Klasse d-flex hier

Nur so als Hinweis: mit CSS Klassen zu arbeiten ist fein, zu viel HTML-Code sollte man vermeiden. Und Inline-Style ist eigentlich böse

taolight

ich bin sicher, da gibt es vieles zu lernen ... ich bemühe mich ... aber bei einer kleinen Seite wie meiner darf man bestimmt auch mal "böse" Dinge einbauen, oder?

noch eine Idee, wie ich das Hintergrundbild auf ganze Breite bekomme?

vielen Dank für die Unterstützung! wirklich von Herzen! ... jetzt mach ich erstmal, was ich vmtl. besser kann ... unterrichten ...

taolight

oder ganz generell, wie kann man denn Hintergundbilder ansteuern mit CSS, wenn man sie im Modul einstellt ...

drmenzelit

Ideen für den Footer: https://magazine.joomla.org/all-issues/apr…-minimal-coding

Tags