Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K04

Joomla Logo flat

Template K04

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 840px. Als primären Font verwende ich Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container {width: 840px; margin:auto;} 

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein

body {text-align: center;}  

eingefügt werden. Dieses Template ist getestet mit Firefox 3 und dem IE 8. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

28 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K05

Joomla Logo flat

Dieses Template baut auf DIV-Container auf und besitzt eine feste Breite von 920px. Als primaeren Font verwende ich Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 920px; margin:auto;} 

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein

body{text-align: center;} 

eingefügt werden.

Die Eiganschaft „text-align“ wurde dann im #container wieder angepasst. Dieses Moeglichkeit des Zentrierens verhindert das Verschieben bei geringen Breiten oder Auflösungen, im Vergleich zu einer Zentrierung mit negativen Rändern. Die Farbdarstellung der Ränder erfolgt einmal im #footer mittels border-bottom sowie unter #smallbar mittels border-top. Für Änderungen an der index.php und an der CSS-Datei seid Ihr selbst verantwortlich.

Dieses Template ist getestet mit Firefox 2.0 und dem IE 6 bzw. 7. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

130 kB

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K07

Joomla Logo flat

Alle Angaben sind fix gesetzt, das sollte aber bei einer Auflösung von 1024 kein Problem darstellen.
Die Container bestehen aus einem Außen- und einen Innen-Container, um mehr Möglichkeiten zur Abgrenzung der Elemente zu erreichen.
Die wichtigsten Änderungen an den CSS Deklarationen sehen wie folgt aus.

Ich habe den oberen Bereich etwas zusammengefasst so das schon in der Startpage mehr Content auf dem Bildschirm zu sehen ist.
Die beiden Bilder in den Bereichen LatestNews und Popular habe ich aus der index.php in die CSS Datei gezogen.
Die CSS Deklaration des rechten Menüs ist nun auch validiert.

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K12

Joomla Logo flat

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px. Der primaere Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

Template – K12

#container{width: 980px; margin:auto;} 

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf „user4“, der banner auf „banner“, der newsflash auf „top“, latestnews auf „user1“ und mostread auf „user2“ Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

245 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K13

Joomla Logo flat

Template K13

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px. Der primaere Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 980px; margin:auto;} 

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf „user4“, der banner auf „banner“, der newsflash auf „top“, latestnews auf „user1“ und mostread auf „user2“ Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

433 kB

Kategorien
Joomla Templates

Joomla Template Reihe K21

Joomla Logo flat

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.

154 kB

Kategorien
Joomla Templates

Joomla Template Reihe K20

Joomla Logo flat

Dieses Template besteht aus zwei Containern die mittels >>float<< positioniert werden.

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K14

Joomla Logo flat

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 840px.
Als primaeren Font verwende ich Tahoma.
Das Zentrieren des Layouts erfolgt mittels automatischer Raender:

#container {width: 840px; margin:auto;}

Das funktioniert bei den meisten neueren Browsern, fuer den IE im Quirks-Modus sollte ein

body {text-align: center;} eingefuegt werden.

Dieses Template ist getestet mit Firefox und dem IE 11.

82 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Templates Reihe K15

Joomla Logo flat

Joomla Template K15

Dieses Template besteht aus zwei Containern die mittels „float“ positioniert werden.

Die CSS Deklarationen sehen wie folgt aus:

body 			{
			font:normal 12px/1.7em "Trebuchet MS",Arial,Helvetica,Geneva,sans-serif;
			margin: 0; padding: 0;
			background: #000000 url(../images/background.jpg) 0 0 fixed no-repeat;
			text-align:center;
			}
a:link          	{color:#F0F0F0;}
a:visited       	{color:#E2E2E2;}
a:hover         	{color:#7D1215;text-decoration:underline;} 
a:active        	{color:#FFFFCC;}
a               	{
			font-size:12px;
			text-decoration:none;
			font-weight:normal;
			}

a.urlextern
{
padding-right:10px;
background: url(../images/externallinks.gif) no-repeat right top;
}

a.urlextern:hover
{
padding-right:10px;
background: url(../images/externallinks-hover.gif) no-repeat right top;
}

.sitename		
{
margin:0;
padding:0;
text-align:left;
padding:24px;
color:#E0E0E0;
}
.sitename a, .sitename a:hover
{
margin:0;
padding:0;
text-align:left;
font-size:24px;
padding:20px;
color:#E0E0E0;
text-decoration:none;
}

p
{
font-size:12px;
padding: 5px;
margin: 0px;
line-height:150%;
}

strong
{
font-size:12px;
color:#7D1215;
font-weight:bold
padding: 5px 15px;
margin: 0px;
line-height:150%;
}

Warnhinweis – Diese Seiten benutzen bestimmte CSS-Definitionen, die von älteren Browsern nicht dargestellt werden können. (Transparenz und abgerundete Ecken)

Getestet habe ich dieses Template mit Firefox 3 und dem IE7. Anpassungen für andere Browser sind nicht explizit enthalten und auch nicht geplant.

138 kB

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K16

Joomla Logo flat

Dieses Template besteht aus vier Containern die absolut positioniert werden. Die Breite ist in Prozentwerten angegeben. Dadurch passt sich das Layout an eine veränderte Breite automatisch an. Es ist nur darauf zu achten das Bilder unter Umständen bei geringen Breiten aus den Boxen heraus laufen können.

Das Logo und das Topmenue werden ebenfalls absolute über den Containern positioniert. Hierbei ist der Abstand vom rechten Rand als Prozentwert angegeben und „schwimmt“ somit mit der Browserbreite mit.

Bei diesem Beispiel muss man ein wenig Rechnen. Die Summe der Breiten ergibt 98%. Der Abstand vom Body-Rand zur ersten Box, plus ihre Breite plus den Abstand ergibt die left-position der nächsten Box. (alles in %).

Wenn Du nun also unterschiedlich breite Boxen oder mehr Abstand möchtest, brauchst Du diese Werte nur gegeneinander zu verschieben.