Kategorie: Joomla Templates

Templates für Joomla

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.

Weiterlesen „Joomla Template Reihe K07“
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.

Weiterlesen „Joomla Template Reihe K20“
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.

Weiterlesen „Joomla Template Reihe K16“
Kategorien
Joomla Templates Stylesheets

Joomla Template Reihe K17

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 herauslaufen 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.

Weiterlesen „Joomla Template Reihe K17“
Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K18

Joomla Logo flat

Dieses Template wurde für Joomla 1.5 erstellt.

Dieses Template unterliegt der GNU/GPL Lizenz.

Ich stelle euch dieses Template kostenfrei zur Verfügung und als Gegenleistung freue ich mich wenn ihr einen Backlink setzt.

Der Backlink verweist auf http://www.whiteberry.de und befindet sich oberhalb der Menueeintraege. Dieses Template besteht aus zwei Containern die mittels float positioniert werden.

Weiterlesen „Joomla Template Reihe K18“