Schlagwort: WebDesign

Alle templatebezogenen Bilder und Grafiken sind selbst erstellt und bearbeitet.

Hier die Installationsdateien als ZIP zum downloaden. Viel Erfolg.

Zusammenfassung

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primäre Font ist Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder.

#rahmen {
width: 980px;
margin: 0 auto;
}
#top-aussen {
width: 960px;
height: 50px;
margin: 0;
background-color: #FFFFFF;
border-left: 20px solid #4040A0; /* 20px breiter Rand !!! */
}
#header-aussen {
width: 960px;
height: 180px;
margin: 0;
border-left: 20px solid #000000; /* 20px breiter Rand !!! */
background: #FFFFFF url(../images/bg-header-aussen.jpg);
}

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

Einfaches, übersichtliches Joomla Template in blau.
Das Header Image ist 1250 px breit – ihr könnt alles anpassen. Der hauptsächliche CSS Code ist hier gelistet.

* {
margin:0;
padding:0;
}
html {
margin:0;
padding:0;
color:#333333;
font:normal 12px/1.5em Arial,Helvetica,Geneva,sans-serif;
}
body {
margin:0;
padding:0;
text-align:center;
background:url(../images/bg_img_body.png) repeat-x;
}
a {text-decoration:none;}
a:link {color:#99CC33;text-decoration:none;}
a:visited  {color:#B5B5B5;text-decoration:none;} 
a:hover  {color:#FFCC00;border-bottom:1px dotted #FFCC00;} 
a:active  {color:#FFCC00;border-bottom:1px dotted #FFCC00;}
a:focus {color:#FFCC00;border-bottom:1px dotted #FFCC00;}

#container {
margin:0 auto;
margin-top:20px;
padding:10px;
width:1250px;
min-height:850px;
text-align:left;
background-color:#FFFFFF;
}
#topmenu {
margin:0 auto;
height:100%;
min-height:20px;
margin-bottom:5px;
text-align:left;
background-color:#FFFFFF;
border-bottom:1px solid #CCCCCC;
}
#header {
margin:0 auto;
height:100%;
min-height:250px;
text-align:left;
background:url(../images/bg_img_header.png) bottom right no-repeat;
}

Das Template wurde getestet mit allen gängigen Browsern.
Heißt nicht es ist fehlerfrei. Das müsstet ihr bei Bedarf anpassen. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.