| Moduleigenschaften ändern | | Um die Darstellung der Module im Frontend zu ändern, kann man einige Sachen durch das Bearbeiten der Einstellungen zu den Modulen regeln.
Möchten wir z.B. die Überschrift über dem Hauptmenü ausblenden, müssen wir dazu nicht extra die CSS Eigenschaften des Templates bearbeiten. Es reicht aus die Moduleigenschaft des „Main Menus“ zu ändern. Dazu verfahren wir wie auf den Bildern 3 und 4.
Um den Titel, die Überschrift des Moduls auszublenden, wählen wir die Option „Show title“ und setzen diese auf „No“. Den Unterschied in der Darstellung sehen sie in den rechts abgebildeten Bildern (11 und 12).
Es ist möglich für jedes Modul einzeln zu wählen, ob eine Überschrift angezeigt wird oder nicht.
Joomla bietet seinen Anwendern aber noch weitere Möglichkeiten zur Gestaltung bzw. Darstellung seiner Module. Menüs können in dem jeweiligen Modulmenü (Bild 5) anders angeordnet (horizontal oder vertikal), umbenannt oder auch an andere Modulpositionen verschoben werden. Probieren Sie einfach mal ein bisschen aus. Sollte Ihnen eine Einstellung, die Sie gemacht haben nicht gefallen, machen Sie diese einfach rückgängig. Ein Tipp dazu: Drücken Sie nicht auf „Save“, sondern auf „Apply“. Sehen Sie sich Ihre Seite dann in einem anderen Fenster an und wenn Ihnen die Einstellung nicht gefällt, ändern Sie diese einfach wieder. Drücken Sie nach der Änderung „Save“.
| 
Bild 11 :"Show title:yes" 
Bild 12 :"Show title:no" | | CSS Eigenschaften ändern | | Die Einstellungen in der CSS Datei Ihres Templates bestimmten das eigentliche Aussehen Ihrer Seite. Auch Teile des Aufbaus (nicht nur Farben, Größen usw.) können in der CSS Datei geregelt werden. Die gilt vor allem für die Arbeit mit den bereits genannten <div> Layern. Sollte ein Template mit Tabellen arbeiten, wird der eigentliche Aufbau im der uns schon bekannten Datei index.php geregelt. Da wir in diesem Tutorial mit einer Vorlage arbeiten, die <div> Layer verwendet, können eigentlich alle Einstellungen auch in der CSS Datei vorgenommen werden.
Die Syntax von CSS Befehlen ist eigentlich recht leicht. Ein Bereich wird mit einer # gefolgt von seinem Namen („id“) angesprochen (Beispiel: #Bereich) und von geschweiften Klammern umschlossen ({}). In diesen Klammern stehen dann die verschiedenen CSS Befehle, die das Aussehen des Bereichs bestimmen. Einige dieser CSS Befehle lernen Sie im Laufe dieses Tutorials kennen, andere müssen Sie sich selbst aneignen.
Zuerst zeigen wir mal wie man überhaupt die Eigenschaften der CSS Datei ändern kann, d.h. wo genau man das eigentlich macht. Dazu betrachten Sie bitte die Bilder auf der rechten Seite.
Wählen Sie in auf dieser Seite bitte wieder das entsprechende Template aus („subway“) und klicken Sie in 2. nicht auf „Edit HTML“, sondern auf „Edit CSS“. Auf der folgenden Seite können Sie die dann das Aussehen Ihrer Seite verändern. Das ist der CSS Editor von Joomla. Hier können Sie wie bereits erwähnt die Eigenschaften zur Darstellung Ihrer Seite bestimmen.
Wir werden dies an einigen Beispielen verdeutlichen.
Zuerst werden wir mal das Hintergrundbild des Headers unserer Seite verändern. Erinnern Sie sich dazu bitte an das Kapitel 2, in dem wir kurz über die einzelnen Bereiche unserer Seite gesprochen haben. Der Header nennt sich in unserem Fall „top“. Wenn wir nun also dessen Eigenschaften verändern wollen, suchen wir in der CSS Datei (am besten im CSS Editor online öffnen) nach dem Bereich „top“.
So sehen die Einstellungen zum Bereich „top“ im Normalfall (für dieses Template) aus:
#top {
background-image: url(../images/top_left.gif); background-repeat:no-repeat;
background-color:#1D1812;
height:120px;
}
Um jetzt z.B. ein anderes Hintergrundbild zu verwenden, müssen wir den Code im Bereich „top“ ändern. Der Befehl „background-image: url(../images/top_left.gif); background-repeat:no-repeat;“ sorgt dafür, dass das Bild an der Stelle „(../images/top_left.gif)“ der Hintergrund des Bereichs wird. Das „background-repeat:no-repeat;“ lässt das Bild nur einmal ausgeben. Es wird also nicht wiederholt, falls noch Platz im Bereich ist, da das Bild kleiner ist als der Bereich. Wir arbeiten hier mit Größenangaben in Prozent, da kann man die Größe (Länge) des Headers nicht bestimmt. Unterschiedliche Benutzer verwenden z.B. unterschiedliche Bildschirmeinstellungen. Das Attribut „background-color:#1D1812;“ sorgt also dafür, dass der vom Bild nicht ausgefüllte Platz, die Farbe „#1D1812“ erhält. Sollten sie sich mit den Farbangaben noch nicht auskennen, besuchen Sie doch mal die Internetseite http://www.webmart.de . | 
Bild 13 
Bild 14 
Bild 15 
Bild 16
| Bild 17 zeigt wie die Seite aussieht, wenn wir den Code für den Bereich „top“ mal etwas anpassen. Sollten Sie ein anderes Hintergrundbild verwenden wollen, muss dieses sich auf Ihrem Webspace im Ordner „images“ des Templates befinden. Das Bild wird sonst nicht angezeigt. Hier jetzt also der veränderte Code:
#top {
background-image: url(../images/your_logo.gif); background-repeat:no-repeat;
background-color:#FCFCFC;
height:120px;
}
| 
Bild 17 | Nun wollen wir mal die Hintergrundfarbe bzw. das Hintergrundbild unserer Vorlage ändern. In Kapitel 2 haben wir schon über den Aufbau gesprochen. Der Bereich mit der Kennziffer 9. legt den Hintergrund fest. Diese Kennziffer gehört zum Bereich „body“. Wir suchen in der CSS Datei also nun nach dem Bereich „body“.
body{
margin-top:0px;
margin-bottom:0px;
background-image: url(../images/body_bg.gif);
text-align:left;
font-family:Verdana;
font-size:12px;
background-color:#FFFFFF;
}
Erläuterungen zum Code: „margin-top:0px;“ sorgt dafür, dass der Abstand des „bodys“ zum oberen Rand gleich Null ist. Das Attribut „margin-bottom“ regelt dies entsprechend für den unteren Rand. Den folgenden Befehl kennen wir bereits. Er weist diesem Bereich das Bild an der angegebenen Stelle als Hintergrundbild zu. Das Bild wird vertikal und horizontal wiederholt, da nichts anderes angegeben wurde. Danach wird der Text linksbündig angeordnet, die Schriftart Verdana ausgewählt, die Schriftgröße festgelegt und die Hintergrundfarbe für diesen Bereich bestimmt. Einstellungen zu Unterbereichen überschreiben diese Einstellungen. Sollte ein Unterbereich die Schriftgröße „15px“ verwenden, dann wird die Schrift in diesem Unterbereich „15px“ groß sein. | 
Bild 18 | Ändern wir nun mal den Hintergrund des Bereiches „body“. Wir weisen mal kein Bild zu, sondern legen schwarz (#000000) als Farbe fest.
Der neue Code:
body{
margin-top:0px;
margin-bottom:0px;text-align:left;
font-family:Verdana;
font-size:12px;
background-color:#000000;
}
Im Frontend sieht unsere Seite dann wie rechts (Bild 19) abgebildet aus. | 
Bild 19
| Verändern wir nun mal die Textfarbe des Textes im Bereich „path_text“. Bis jetzt sieht der Code dort wie folgt aus:
#path_text{
padding-top:12px;
padding-left:5px;
}
Der Befehl „padding-top:12px;“ sorgt für einen Abstand von „12px“ zum oberen Rand. Die Anweisung „padding-left:5px;“ weist dem Text einen Abstand von „5px“
zum linken Rand zu. Die Farbe ist die Farbe, die der unmittelbare Oberbereich, oder dessen Oberbereich zuweist. Dieser Bereich erbt also von einem seiner Oberbereiche.
Wir ändern jetzt einmal die Schriftfarbe in rot:
#path_text{
padding-top:12px;
padding-left:5px;
color:#ff0000;
}
| 
Bild 20 
Bild 21
| Zuletzt ändern wir mal die Breite unserer Seite:
#container {
width:80%;
background:#FCFCFC;
border-left:4px solid #E6E6E6;
border-right:4px solid #E6E6E6;
}
Der Befehl „width:80%;“ sorgt dafür, dass die Seite 80% des Browserfensters breit ist. Den folgenden Befehl kennen wir bereits. Die anderen beiden weisen dem Bereich Ränder (links und rechts) zu („4px“ breit in der Farbe „#E6E6E6“).
Wir machen die Seite mal ein wenig schmaler:
#container {
width:50%;
background:#FCFCFC;
border-left:4px solid #E6E6E6;
border-right:4px solid #E6E6E6;
}
Das waren jetzt mal einige wenige Beispiele wie Sie ein bestehendes Template ihren Vorstellungen entsprechend umgestalten können. Allgemein gilt, schauen Sie sich zuerst den Aufbau einer Seite an, wie heissen Tabellen, Tabellenzellen oder <div> Layer, wie sind diese aufgebaut und so weiter.
Gerade bei <div> Layern ist es für einen Neuling schwer den Aufbau zu verändern, aber trauen Sie sich ruhig mal ein bisschen auszuprobieren. Wenn Sie sich nicht sicher sind, ob Sie etwas löschen dürfen, verwenden Sie den Trick mit den Kommentaren (In HTML „<!--“ für den Anfang eines Kommentars und „-->“ für das Ende, in CSS „/*“ für den Anfang und „*/“ für das Ende).
Die Veränderung der Darstellung ist dagegen schon leichter. Ändern Sie Farben, Schriftgrößen, Hintergrundbilder usw. wie wir es Ihnen gezeigt haben. | 
Bild 22 
Bild 23 |
Weiter zum Abschluss
|