Allgemeine Einstellungen:
Zuerst nehmen wir die Einstellungen zu den eben in der index.php definierten Bereichen vor. Die speziellen Einstellungen zu Joomla folgen dann danach.
| |
Hier sorgen wir zuerst dafür, dass der Hintergrund unseres Templates durch eine Bilddatei (bg.gif) etwas verschönert wird. Diese Grafik wird solange horizontal wiederholt, bis sie den Hintergrund komplett ausfüllt. Die Bereiche des Hintergrundes, die die Grafik nicht abdeckt, werden in der Farbe #F5F5F5 zu sehen sein. Dann sorgen wir noch dafür, dass Text, der an keiner anderen Stelle formatiert wird, den Schrifttyp Verdana hat und 11px groß ist.
| /*Allgemeine Einstellungen*/
body {
background-image: url(../images/bg.gif); background-repeat:repeat-x;
background-color: #F5F5F5;
font-family:Verdana;
font-size:11px;
}
|
Wird im Quelltext der index.php ein <h1>, <h2> oder <h3> Tag verwendet, sieht der Text dazwischen entsprechend den Einstellungen rechts aus. Text des Typs h1 ist, sofern für einzelne Bereich nicht anders bestimmt, 16px groß, hat die Farbe #638CB2 und hat auch noch die anderen genannten Eigenschaften.
| /*Einstellungen für die Anzeige der Überschriften*/
h1 {font-size:16px;color:#638CB2; margin-bottom:0px;text-shadow:#FFFFFF 2px;}
h2 {font-size:15px;color:#000000;}
h3 {font-size:14px;color:#000000;}
|
Hier werden die Einstellungen für die Anzeige der Links des Templates vorgenommen. Auch hier gilt, sind diese Eigenschaften für andere Bereiche nicht anders definiert worden, hat ein Link die rechts genannten Eigenschaften.
| /*Einstellungen für die Anzeige der Links*/
a:link, a:visited, a:active, a:hover{
text-decoration:none;
font-weight:bold;
color:#5F8AAF;
font-size:11px;
cursor:crosshair;
}
a:active, a:hover{
text-decoration:none;
color:#FE8B1F;
}
|
Wichtig ist hier eigentlich nur, dass wir die Breite der ganzen Seite auf 85% des Broswerfensters festlegen. Die Arbeit mit Prozentangaben sorgt dafür, dass unser Template auch bei anderen Bildschirmauflösungen immer gleich angezeigt wird.
| /*Der Container schließt die ganze Seite ein und bestimmt deren Breite*/
#container{
width:85%;
font-family:Verdana;
font-size:11px;
background-color:#FFFFFF;
}
|
Mit dem ersten Befehl des Bereichs „title“ sorgen wir dafür, dass auf der linken Seite unseres Headers eine Grafik eingeblendet wird. Das „no-repeat“ sorgt dafür, dass diese Grafik nur einmal angezeigt wird. Der Text dieses Bereiches wird zentriert. Die Höhe des Bereiches entspricht 116px und die eingebundene Grafik sollte auch nicht höher sein. Der Befehl „border-bottom:5px solid #F5F5F5“ sorgt dafür, dass ein Rahmen mit der Breite 5px um den Header herum angezeigt wird. Wichtig ist es an dieser Stelle noch zu erwähnen, dass das „padding-top:25px;“ im Bereich „title“ im Bezug auf h1 (also Überschriften) für den nötigen Abstand des Seitentitels zur Oberseite des Headers sorgt.
| /*In diesem Layer wird der Seitentitel ausgegeben*/
#title {
background:url(../images/top_left.gif) no-repeat;
background-color:#91B5CE;
text-align:center;
height:116px;
border-bottom:5px solid #F5F5F5;
margin-bottom:20px; /*Abstand zum Content Container*/
}
#title h1 {
padding-top:25px;
}
|
Das „float:right“ im Bereich „search“ sorgt dafür, dass dieser Bereich rechts neben dem Seitentitel steht. Bei Veränderung dieses Befehls kann es zu Layoutstörungen kommen und die Seite wird nicht wie gewünscht dargestellt. Die anderen Angaben haben wir schonmal besprochen. Bei Problemen mit css Befehlen besuchen Sie bitte eine der im Kapitel „Das Layout“ genannten Internetseiten.
| /*Einstellungen zum Suchmodul*/
#search {
float:right;
width:212px;
padding-right:2px;
}
#search table.moduletable {
padding-left:2px;
border:2px solid #91B5CE;
background-color:#F5F5F5;
}
#search .inputbox {
border:0px;
color:#000000;
background-color:#F5F5F5;
}
#search .button {
border:1px solid #D8E5EB;
color:#000000;
background-color:#F5F5F5;
}
|
Das „line-height:15px;“ sorgt dafür, dass eine Zeile genau 15px hoch ist. Der Befehl „width:14%“ lässt die Bereiche „left“ und „right“, in denen später verschiedene Module angezeigt werden, 14% des Containerbereiches breit sein. Die „float“ Befehle sorgen auch hier dafür, dass die Bereiche an ihrem richtigen Platz stehen. Auch hier wieder die Bitte, verändern Sie diese Befehle nicht, da das Layout sonst fehlerhaft dargestellt wird. | /*Einstellungen für den center_table*/
#center_table {
padding:2px;
}
Das „padding:2px;“ sorgt im Bereich center_table für einen Abstand von 2px zu anderen Elementen wie z.B. Login, Umfrage oder auch dem Menü.
/*Einstellungen für die beiden Layer neben dem Content*/
#left, #right {
line-height:15px;
}
#left {
width:14%;
float:left;
}
#right {
width:14%;
float:right;
}
|
Hier wird die Darstellung des Contentbereiches bestimmt. Wichtig ist hier vor allem der Befehl „overflow:hidden;“, der dafür sorgt, dass z.B. überlange Wörter das Layout nicht zerstören. Diese Wörter werden dann einfach am Seitenrand des Bereiches abgeschnitten.
Da in der index.php der gesammte Inhalt durch das <center> Tag zentriert wurde, formatieren wir den Text im Contentbereich durch den Befehl „text-align:left;“ linksbündig.
Die Einstellungen in #centent h1{} stehen über den Einstellungen der h1 der gesammten Seite. Die Überschriften im Contentbereich sehen also anders aus, als die Überschriften im Header oder Footer.
| /*Einstellungen für den Content Layer*/
#content {
float:left;
width:65%;
margin-left:3%;
text-align:left;
font-family:Verdana;
font-size:11px;
border: 1px dashed #C3C3C3;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
overflow:hidden; /*damit z.B. bei Suchabfragen überlange URL's nicht das Layout zerstören*/
background-color:#F5F5F5;
}
#content h1 {
font-weight:bold;
font-family:Verdana;
font-size:12px;
color:#FE8B1F;
}
|
Das „clear:both;“ sorgt hier mal wieder dafür, dass unser Layout wie gewünscht dargestellt wird. Mit dem darauf folgenden Befehl fügen wir eine kleine Grafik auf der rechten Seite des Footers ein.
Die Einstellung für den Bereich „bottom_text“ sorgt dafür, dass der Seitenname im „copyright“ einen kleinen Abstand zur Oberseite des Footers erhält.
| /*Einstellungen für den untersten Layer*/
#bottom {
clear:both;
background:url(../images/bottom_right.gif) no-repeat right;
background-color:#91B5CE;
height:34px;
border-top:4px solid #F5F5F5;
margin-top:20px;
vertical-align:bottom;
}
#bottom_text {
padding:7px;
}
|
Einstellungen für Joomla
Nachdem wir nun mit den Einstellungen für die von uns definierten Bereiche fertig sind, folgen die Einstellungen zu den einzelnen Joomla Modulen. Sehen Sie sich dazu bitte auch die Hilfsgrafiken am Ende dieses Kapitels an.
| /*Einstellungen speziell für Joomla*/
|
Die meisten der Befehle haben wir im Laufe des Tutorials schonmal gesehen. An dieser Stelle möchte ich jedoch noch auf ein paar von Ihnen eingehen.
Der Befehl „width:100%;“ sorgt dafür, dass die Modultabellen auch wirklich ihre maximale Breite haben und nicht einige weniger breit sind als andere. So halten wir die Darstellung unseres Templates einheitlich. Der Befehl „text-align:left;“ muss auch hier wieder genannt werden, da sonst der gesammte Text der Module auf Grund des <center> Tags in der index.php zentriert werden würde. Sie fragen sich jetzt vielleicht, warum wir das <center> Tag eigentlich überhaupt verwendet haben, wenn wir den Text jetzt für alle Bereiche wieder linksbündig anordnen. Dies ist ein kleiner Trick um dafür zu sorgen, dass der Containerbereich auch im Internet Explorer zentriert wird. Ohne diese Maßnahme würde dieser Bereich nämlich rechtsbündig angeordnet sein. Die anderen Befehle sollten Ihnen mittlerweile schon bekannt sein.
| /*Module*/
table.moduletable {
width:100%;
text-align:left;
font-family:Verdana;
font-size:11px;
border: 1px dashed #C3C3C3; /*Rahmen um die einzelnen Module (Menü, Poll, Suchen..) */
margin-bottom: 10px; /*Abstand zwischen den Modulen 10px*/
padding-left:1px; /*Abstand zum Rahmen*/
padding-right:1px;
background-color:#F5F5F5;
}
table.moduletable th { /*Modulüberschrift*/
text-align:left;
font-family:Verdana;
font-size:13px;
background-color:#648AAF;
background:url(../images/menu_top_bg.gif) repeat-x;
color:#FFFFFF;
}
table.moduletable td { /*Modultext, nicht Content*/
text-align:left;
font-size:11px;
font-family:Verdana;
}
|
Mit diesen Befehlen wird das Aussehen des Textes bzw. des Inhalts im Contentbereich festgelegt. Um welchen Text es sich dabei genau handelt, können Sie mit Hilfe der Grafiken am Ende des Kapitels erkennen.
| /*Content*/
td { /*Contenttext, nicht Modul*/
font-family:Verdana;
font-size:11px;
}
th {
font-family:Verdana;
font-size:11px;
}
p {
font-family:Verdana;
font-size:11px;
}
.contentheading, .componentheading {
font-weight:bold;
font-family:Verdana;
font-size:12px;
color:#FE8B1F;
}
.small {
font-family:Verdana;
font-size:11px;
color:#888888;
}
.createdate {
font-family:Verdana;
font-size:11px;
color:#888888;
}
|
Hier bestimmen wir das Aussehen der Links in den Menüs (Hauptmenü, Benutzermenü...). Auch hier helfen Ihnen die Grafiken am Ende des Kapitels weiter. Es bleibt jedoch noch zu sagen, dass „mainlevel“ sich auf die Links auf oberster Ebene eines Menüs bezieht. „Sublevel“ steht hingegen für die Unterlinks zu den gerade genannten Links. Ein Menü muss keine Sublinks enthalten. Wichtig ist hier zu nennen, dass der Befehl „display:block;“ dafür sorgt, dass unter anderem der „Hover“-Effekt bei allen Links (egal wie lang deren Beschriftung ist) gleich breit ist. Auch hier sollten Ihnen die anderen Befehle wieder bekannt vorkommen.
| /*Navigationsmenü*/
a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {
display:block;
background-color:#F5F5F5;
text-decoration:none;
font-weight:bold;
color:#5F8AAF;
font-size:11px;
}
a.mainlevel:active, a.mainlevel:hover, a.mainlevel:focus {
display:block;
background-color:#FE8B1F;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-weight:bold;
}
a.sublevel:link, a.sublevel:visited, a.sublevel:hover {
display:block;
background-color:#F5F5F5;
text-decoration:none;
font-weight:bold;
color:#5F8AAF;
font-size:11px;
}
a.sublevel:active, a.sublevel:hover, a.sublevel:focus {
display:block;
background-color:#FE8B1F;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-weight:bold;
}
|
Hier wird noch schnell das Aussehen der Buttons und der Felder bestimmt. Die einzelnen Befehle sollten Sie auch hier wieder kennen oder im Verlauf des Tutorials kennen gelernt haben. Wenn nicht, „background-color“ legt die Hintergrundfarbe fest, „color“ bestimmt die Farbe der Aufschrift des Buttons, „font-size“ die Größe dieser Aufschrift, „font-family“ die Schriftart und „border“ die Eigenschaften des Rahmens um den Button.
| /*Sonstiges*/
.button {
background-color:#628BB1;
color:#FFFFFF;
font-size:11px;
font-family:Verdana;
border: 1px solid #D8E5EB;
}
.inputbox {
border:1px solid #C3C3C3;
}
|
Hilfsgrafiken
Diese Grafiken sollen Ihnen helfen zu bestimmen, wie welcher Bereich von Joomla in der css Datei angesprochen werden kann.
Wollen Sie z.B. Änderungen an der Darstellung der Eingabefelder („inputbox“) vornehmen, sprechen Sie diese in der css Datei mit „.inputbox“ an und definieren Sie deren Eigenschaften in den {}-Klammern.
|  |
