Module mit abgerundeten Ecken

Abgerundete Ecken sind leichter, als es den Anschein hat, denn Joomla bringt da schon was mit, was für uns Templatebastler die Sache etwas vereinfacht. Nichts desto Trotz kann es nicht schaden, ein paar Kenntnisse in CSS zu haben und ein wenig grafisches Können, um die Ecken abzurunden wird natürlich auch benötigt.

Ich habe zwei Grafiken erstellt. Eine für den oberen Teil des Menümoduls und eines für das untere Teil des Moduls:

Name der Grafik: abgerd_oben.jpg

Name der Grafik: abgerd_unten.jpg

Ich habe mit Absicht zwei verschiedene Farben gewählt. Der obere Bereich soll als Überschrift, der untere als Abschluss des Moduls dienen. Dazwischen legen wir eine Farbe im Farbton der Abschlussgrafik.

Damit wir das alles in unserem Design entsprechend verarbeiten können, müssen wir zunächst in der index.php des betreffenden Templates die Modulpositionen mit dem Zusatz style="rounded" versehen:

<code class="cdchilicode php"><jdoc:include type="modules" name="left" style="rounded" /></code>

Joomla legt jetzt um das Modul mehrere DIVs an, die wir für unser Vorhaben nutzen können. Zur Laufzeit wird nun an Stelle des Platzhalters für das Modul dieses ausgegeben:

<div class="module">
 <div>
 <div>
 <div>
 <h3>Modultitel</h3>
 Der eigentliche Inhalt des Moduls
 </div>
 </div>
 </div>
</div>

Jetzt beginnt die Arbeit an der template.css:

Zunächst gebe ich dem ganzen Modul erst einmal meine Hintergrundfarbe. Also die des Abschlussstückes, das etwas hellere Blau:

.module {
background-color: #41a0d1;
}

Nun haben wir zwar ein blaues Modul, aber zum einen mit einer Farbe und mit sehr eckigen Ecken.
Um das Ganze nun etwas netter zu gestalten, lege ich beim Modultitel einfach den oberen Teil der abgerundeten Ecken in den Hintergrund. Damit wird die Farbe, die bislang an dieser Stelle steht, einfach mit der Grafik überschrieben. Die Farbe verschwindet und statt dessen taucht unsere Hintergrundgrafik auf:

.module div div div h3 {
 background: url(../images/abgerd_oben.jpg) no-repeat;
 }

Die Grafik muss vorher in das image-Verzcihnis des Templates geladen werden: /templates/MeinTemplate/images/abgerd_oben.jpg
Und das gleiche mit der zweiten Grafik: abgerd_unten.jpg

Wir greifen mit der Verschachtelung oben direkt auf den Titel des Moduls zu, der in h3 formatiert ist. Durch die Verschachtelung mit den vielen DIVs wird sicher gestellt, dass die obere Grafik auch wirklich nur im Titel erscheint und nicht woanders im Modul. Das "no-repeat" sorgt dafür, dass die Grafik nicht wiederhiolt wird, falls das Modul breiter oder länger sein sollte.

Mit weiteren Angaben wie Höhe und Abstände und der Schriftgröße kann nun eine individuelle Modul-Titelüberschrift fomatiert werden.

Um den Abschluß des Moduls herzustellen - also unten auch die abgerundeten Ecken hin zu bekommen, sprechen wir einfach den inneren DIV-Bereich an und platzieren unsere Abschlussgrafik ans Ende des Moduls:

.module div div div {
background:url(../images/abgerd_unten.jpg) no-repeat center bottom;
}

center richtet unsere Grafik horizontal in der Mitte aus und bottom vertikal am Fuß unseres Moduls. In unserem Fall könnten wir center auch weglassen.

Eigentlich wars das schon.
Die Abstände stimmen so noch nicht und wird das einfach so eingebaut, dann wirkt auch alles ein wenig fad und gequetscht. Es muss nun mit padding und margin gearbeitet, die Schrift muss angepasst werden und eine Breite und Höhe kann man auch vergeben.

Links habe ich ein Beispielmenü mit den abgerundeten Ecken eingefügt. Im Modul habe ich in den erweiterten Parametern unter Module-Class-Suffix -rund eingtragen. Das deshalb, weil meine anderen Menüs ja anders aussehen und ich nur das Beispielmenü mit der "runden Formatierung" habe.
Der komplette CSS-Code:

/* Abgerundete Ecken */
.module-rund {
background-color: #41a0d1;
width:166px;
margin-top:10px; /* damit bringe ich etwas Abstand zur gelben oberen Linie */
}

.module-rund div div div h3 {
 background: url(../images/abgerd_oben.jpg) no-repeat;
padding-left:20px;
color:white;
}

.module-rund div div div {
background:url(../images/abgerd_unten.jpg) no-repeat center bottom;
padding-bottom:20px;
width:167px;    
/* wobei diese Breitenangabe eher mein schlechtes grafisches Talent widerspiegelt. 
Wer besser Zeichnen kann, als ich, der braucht hier keine Breitenangabe */
}

Wem das mit der Modul-Class-Suffix unklar ist, der kann dieses Tutorial lesen: Menu Class Suffix / Modul Class Suffix

Wer Defizite in CSS hat, dem lege ich meine Seite mit den Nützlichen Links ans Herz - dort findest sich vieles, was des Webdesigners Herz begehrt