Jahr: 2008

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

https://www.w3.org/Style/CSS/Overview.de.html

Zusammenfassung

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.

Joomla Templates sind Vorlagen, die das Erscheinungsbild und Layout einer Joomla-Website bestimmen. Sie bestehen aus einer Sammlung von Dateien. Damit wird das Design, die Struktur und das Verhalten einer Joomla-Website beeinflusst.

Im Grunde genommen ist ein Joomla Template wie eine Schablone oder ein Rahmen. Dieser Rahmen legt fest, wie eine Joomla-Website aussehen und funktionieren soll. Sie enthalten das Design, die Farben, das Layout, die Schriftarten und Bilder, die auf der Website angezeigt werden sollen.

Es gibt Tausende von kostenlosen und kostenpflichtigen Joomla Templates. Viele verschiedene Designer und Entwickler haben an der Erstellung mitgewirkt. Die meisten Templates sind anpassbar und können von Benutzern bearbeitet werden. Damit kann das Aussehen und die Funktionalität ihrer Website geändert werden.

Im Allgemeinen sollten Joomla Templates so gestaltet sein, dass sie das Erscheinungsbild der Website verbessern und eine bessere Benutzererfahrung bieten. Sie sollten auch mit den neuesten Webstandards und Technologien kompatibel sein, um sicherzustellen, dass die Website auf verschiedenen Geräten und Browsern gut funktioniert.

Das hier vorliegende Template besteht aus zwei Containern die mittels float positioniert werden. Das funktioniert gut, evtl. ist noch Anpassungsbedarf nötig, der ist aber von Fall zu Fall verschieden.

Die Erstellung eines Joomla-Templates erfordert ein gewisses Verständnis von HTML, CSS und PHP, sowie Kenntnisse der Joomla-Architektur und der Funktionsweise von Templates.

Es gibt viele weitere Details und Feinheiten, die berücksichtigt werden müssen, um ein qualitativ hochwertiges Template zu erstellen. Es ist ratsam, sich mit der Joomla-Dokumentation und den Entwickler-Communities zu befassen, um weitere Informationen und Unterstützung zu erhalten.

https://www.w3.org/Style/CSS/Overview.de.htm

Zusammenfassung

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, Chrome und IE. Anpassungen für andere Browser sind nicht explizit enthalten und auch nicht geplant.
Auf Grund des Alters dieses Templates müsst ihr die Installationsprozedur (index.php) anpassen.