Startseite Joomla Template erstellen - MamboMango

Joomla Template erstellen

Die Layout Skizze:

Bevor wir anfangen können unser eigenes Template für das Content Management System (CMS) Joomla zu schreiben, sollten wir uns überlegen wie dieses eigentlich aussehen soll. Um das Tutorial nicht unnötig kompliziert zu machen, nehmen wir uns einen relativ einfachen Aufbau des Templates vor. Unsere Seite wird einen Header (mit Suchfeld), einen Contentbereich aus „left“, „content“ und „right“ sowie einen kleinen Footer haben.

Darüber hinaus werden wir in diesem Tutorial mit <div>-Layern und nicht mit Tabellen arbeiten. Die Einstellungen zu den <div>-Layern werden in einer seperaten css Datei vorgenommen.

Wer sich bis jetzt noch nicht mit css beschäftigt hat, sollte sich zuvor und auch während des Tutorials eine der folgende Seiten ansehen: www.selfhtml.org oder aber auch www.css4you.de . Dies ist zwar nicht zwingend notwendig, aber sehr hilfreich.

Das fertige Layout:

Nachdem wir das Tutorial abgeschlossen haben, sollte unser Layout wie auf dem Bild rechts dargestellt aussehen.

Tutorial Template erstellen – Der Aufbau

PDF

| Drucken |

Der Aufbau des Templates:

Damit unser Template später auch fehlerfrei installiert werden kann, muss es mindestens die fünf Grundkomponenten enthalten. Diese bestehen aus:

1. Dem Verzeichnis /images
2. Dem Verzeichnis /css
3. Der Datei index.php
4. Der Datei templateDetails.xml
5. Dem Bild template_thumbnail.png

In dem Verzeichnis images werden alle Bilder, die im Templates verwendet werden gespeichert. Das Verzeichnis css muss auf jeden Fall die Datei template_css.css enthalten, kann aber auch zusätzlich noch andere css Dateien enthalten. In der template_css.css sollten die Einstellungen zum Aussehen des Templates vorgenommen werden.

Die Datei index.php enthält den Quellcode, der den Grundaufbau des Templates bestimmmt. Einstellungen zu Farben, Größen, Schriftarten usw. werden aber in der template_css.css festgelegt.

Die XML Datei ist eine Art Zusammenfassung des Templates. In dieser wird angegeben wer der Autor des Templates ist, welche Dateien das Template beinhaltet und wie dessen Struktur aufgebaut ist.

Das Bild, die PNG Datei, ist ein Screenshot des Templates, das später unter anderem im Backend bei der Templateauswahl angezeigt wird.

Bevor wird jetzt mit der Erstellung unseres eigenen Templates erstellen, legen sich doch schonmal die benötigten Dateien und Verzeichnisse in einem Ordner mit dem Wunschnamen ihres Templates ab.

Tutorial Template erstellen – Die index.php

PDF

| Drucken |

Der <head> Bereich:

Eigentlich können wir die index.php frei nach unseren Vorstellungen gestalten, es gibt jedoch einige Codzeilen, die diese Datei unbedingt enthalten muss um später einwandfrei zu funktionieren. Öffnen Sie dazu am besten eine php Datei mit Ihrem Editor und löschen sie einfach den gesammten Quellcode. Fügen Sie dann den nebenstehenden Code ein.

Wichtig ist hier auch den Pfad in <link href=” <?php echo $mosConfig_live_site; ?>/templates/wunschname/css/ template_css.css” rel=”stylesheet” type=”text/css” /> entsprechend des Namens Ihres Templates zu ändern. In unserem Fall steht dort mambomango.

<?php

defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ );

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”>

<?php echo “<?xml version=\”1.0\”?>”; ?>

<head>

<?php

if ($my->id) {

include (“editor/editor.php”);

initEditor();

}

<?php mosShowHead(); ?>

</head>

Der <body> Bereich:

Nach dem <head> Bereich der Datei folgt nun der <body> Bereich. Dieser betimmt den Aufbau des Templates und kann von uns frei gewählt werden. An einzelnen Stellen werden wir jedoch bestimmte php Funktionen von Joomla aufrufen um z.B. das Hauptmenü, den Contentbereich oder auch Umfragen einbauen zu können. Die so bestimmten Bereiche beinhalten dann später die von Ihnen gewählten Module. In unseren Fall reichen uns erstmal 2 Bereiche (left und right) aus. Nun fangen wir also an, den Aufbau unseres Templates zu gestalten.

Dieser Code erzeugt als erstes einen Bereich mit dem Namen „container“, der die ganze Seite umschließt. Danach wird ein Bereich namens „title“ erstellt. Dieser ist der Header unserer Seite. Die php Variable $mosConfig_sitename enthält den Namen unserer Seite und <?php echo $mosConfig_sitename; ?> sorgt dafür, dass der Name im Header angezeigt wird. Das <h1> Tag bestimmt das Aussehen des Seitennamens. Die Einstellungen dazu werden in der template_css.css vorgenommen. Merken Sie sich jetzt schonmal, dass eigentlich alle Einstellungen, die das Aussehen des Templates betreffen wie z.B. Hintergrundfarbe, Schrifgröße, Schriftfarbe, Rahmen, Bilder usw. in der gerade genannten css Datei zu finden sind. Der Bereich „search“ ist ein Unterbereich des Headers und sorgt dafür, dass dort später das Modul angezeigt wird, das der Modulposition user4 zugewiesen ist. Das ist im Normalfall das Suchmodul. Die Funktion mosLoadModules ( “user4″ ) ruft dies auf und blendet es an der von uns gewählten Position ein.

<body>

</div>

Der Bereich „center_table“ umschließt die Bereiche „left“, „content“ und „right“. Dem Bereich „left“ wird durch den Aufruf der php Funktion mosLoadModules ( ‘left’ ) die Modulposition „left“ zugewiesen. Durch diese Zuweisung sorgen wir dafür, dass alle Module denen im Backend von Joomla diese Position zugewiesen wird, dort (auf der linken Seite des Templates) angezeigt werden. Im Normalfall ist das Login Modul mit Menü, Login und Syndicate dieser Position zugewiesen.

<?php mosLoadModules ( ‘left’ ); ?>

</div>

Nun legen wir den Bereich „right“ für die Modulposition „right“ fest. Die Funktion mosLoadModules ( “right” ) sorgt dafür, dass alle Module mit der Modulposition „right“ auf der rechten Seite unseres Templates angezeigt werden.

<?php mosLoadModules ( “right” ); ?>

</div>

Wir haben nun den Bereich „content“ erstellt. Die Funktion mosPathWay() sorgt dafür, dass der aktuelle Pfad des Benutzers oben im Contentbereich angezeigt wird. Die beiden <br/> Tags sorgen für den nötigen Abstand zum eigentlichen Inhalt.

Dieser wird mit der Funktion mosMainBody() aufgerufen und in der Mitte der Seite angezeigt. Mit </div> schließen wir den Bereich „content“ und mit dem folgenden </div> wird der Bereich „center_table“ geschlossen.

<?php mosPathWay(); ?><br/><br/>

<?php mosMainBody(); ?><br/><br/>

</div>

Dieser Bereich heisst „bottom“ und beinhaltet den Unterbereich „bottom_text“, der auch den Seitennamen beinhaltet. Dieser wird durch <a href=”<?php echo $mosConfig_live_site;?>” accesskey=”1″> <?php echo $mosConfig_sitename; ?> </a> als Link ausgegeben.

<a href=” <?php echo $mosConfig_live_site;?>” accesskey=”1″>

<?php echo $mosConfig_sitename; ?>

</a>

</div>

Der Aufbau unserer Seite ist nun abgeschlossen und wir können nun mit der eigentlichen Gestaltung des Templates beginnen. Dazu werden wir im nächsten Schritt die template_css.css mit Inhalt füllen.

</div>

</center>

</body>

</html>

Tutorial Template erstellen – Die template_css.css

PDF

| Drucken |

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.

Tutorial Template erstellen – Die template_thumbnail.png

PDF

| Drucken |

Diese Datei sollte 250px breit, 150px hoch und ein Screenhot des jeweiligen Templates sein. Sie muss im png Format in der obersten Ebene des Templates gespeichert werden.

Ein Screenshot erstellt man unter Windows unter anderem mit Hilfe der Druck Taste. Laden Sie einfach das Layout Ihres Templates in einen Broswer. Drücken Sie Alt+Druck, öffnen Sie Paint und fügen Sie dann die Daten aus der Zwischenablage ein.

Tutorial Template erstellen – Die templateDetails.xml

PDF

| Drucken |

Für eine fehlerfreie Installation des Templates sollten hier alle vom Template benutzten Dateien wie Bilder, php Dateien oder auch css Dateien angegeben werden.

Die Datei templateDetails.xml sollte nach ihrer Fertigstellung zusammen mit der index.php und der template_thumbnail.png auf oberster Stufe der Templatestruktur gespeichert werden. Diese sollte in unserem Fall wie folgt aussehen:

Ein Ordner mit dem Namen mambomango, der die Unterordner images und css enthält. In images sind alle vom Template verwendeten Bilder abgespeichert. Im Ordner css befindet sich mindestens die template_css.css. Im Ordner mambomango befinden sich die Dateien index.php, template_thumbnail.png und templateDetails.xml.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

<name>mambomango</name>

<author>Michael Sommerfeld</author>

<copyright>Michael Sommerfeld</copyright>

<authorEmail> info@mambomango.com</authorEmail>

<authorUrl>http://www.mambomango.com</authorUrl>

<description>Tutorial Template von mambomango.com</description>

<files>

<filename>index.php</filename>

<filename>template_thumbnail.png</filename>

</files>

<filename>images/bg.gif</filename>

<filename>images/bottom_right.gif</filename>

<filename>images/menu_top_bg.gif</filename>

<filename>images/top_left.gif</filename>

</images>

<css>

<filename>css/template_css.css</filename>

</css>

</mosinstall>

Tutorial Template erstellen – Abschluss und Installation

PDF

| Drucken |

Sie sollten nun eine Ordnerstruktur haben, die der am Ende des vorherigen Kapitels entspricht. Nun ist es wichtig, dass Sie diese noch in ein zip Archiv packen. Entweder haben Sie winzip installiert und erstellen das Archiv auf diese Weise oder Sie klicken unter Windows XP mit der rechten Maustaste auf den Templateordner und wählen „Senden an“ –> „Zip-komprimierten Ordner“ und das Archiv wird automatisch erstellt.

Wollen Sie das Template nun installieren, loggen Sie sich bitte ins Backend Ihrer Joomla Installation ein und wählen den Menüpunkt „Site“ –> „Template Manager“ –> „Site Templates“ und klicken auf „New“ oben rechts in der Ecke. Nun klicken Sie auf „Durchsuchen“, wählen das Archiv von Ihrer Festplatte aus und klicken dann auf „Upload File & Install“.

Das Template sollte nun erfolgreich installiert werden. Sollte es zu Fehlern kommen, überprüfen Sie bitte zuerst ob auch alle Dateien im Archiv sind. Ist dies der Fall, überprüfen Sie auch bitte die XML Datei. Sollte die Installation dennoch nicht klappen, kann dies auch mit den Einstellungen des Servers ihres Internetspeicherplatzes zu tun haben.

Das hier erstellte Template wurde von mir mit verschiedenen Joomla Installationen getestet und ließ sich fehlerfrei installieren. Sie können es auch auf www.mambomango.com herunterladen. Sollten Sie Fehler im Code finden oder Vorschäge zur Verbesserung des Templates haben, melden Sie sich bitte.

Ich hoffe dieses Tutorial hat Ihnen dabei geholfen Ihre Joomla Installation persönlicher zu gestalten.

Empfehlen Sie uns bitte weiter www.mambomango.com . Unser Template können Sie hier herunterladen .