Eigene Joomla Templates erstellen

Joomla 1.7 TemplateSeit Joomla 1.6 hat sich auch so manches in der Templateentwicklung verändert. Während es bis Joomla 1.5 noch möglich war, einfach im /template Ordner seine Struktur anzulegen und im Backend lediglich zu aktivieren, ist es in den neueren Versionen nicht mehr ganz so einfach.
Grund hierfür ist, dass für alle Erweiterungen, und dazu zählen auch Templates, ein Eintrag in der Datenbank geschrieben wird. Ist dieser nicht vorhanden, erscheint das Template trotz vorhandenen Ordnern und Dateien nicht in der Auswahl.

Das brachte mich auf die Idee, ein einfaches, mehr oder weniger leeres Basistemplate zu erstellen, in welchem die wichtigsten Daten enthalten sind. Dies habe ich in eine ZIP Datei gepackt, welches ich einfach bei jedem neuen Template als erstes mal Installiere. Dadurch habe ich auch gleich meine Datenbankeinträge sowie die Ordnerstruktur und kann anschließend mit der Entwicklung beginnen.

Ich selbst begann vor ca. 3 Jahren eigene Joomla Templates zu schreiben. Mein erstes Design war Auto Reinwald in Ihrlerstein.

Vorraussetzungen um Templates für Joomla zu entwickeln:

Netbeans Logo

  • ein FTP Programm (ich selbst verwende Filezilla und bin seit langem absolut zufrieden)
  • ein Grafikprogramm (hier verwende ich GIMP)
  • einen Code-Editor (zu meinen Windows Zeiten war ich von Notepad++ überzeugt, heute arbeite ich mit Netbeans)
  • einen Browser (ich verwende Firefox mit er Erweiterung Firebug zum Testen der CSS Attribute)
  • je mehr Kenntnisse im Bereich HTML und CSS habt, umso besser. Kommen da noch JavaScript, PHP und MySQL Kenntnisse hinzu schadet das auf keinen Fall
  • ein installiertes und lauffähiges Joomla 1.7

Als erstes installiert euch das Basistemplate in eurem Joomla Backend. Alternativ könnt Ihr eure ZIP Datei auch nach dieser Anleitung erstellen.

NOTIZ: Frei wählbare Namen schreibe ich ab hier durchgehend GROSS!

Die Ordner- und Dateistruktur sollte/muss wie folgt aussehen:

- css
   - index.html
   - template.css
- images
   - index.html
- index.html
- index.php
- error.php
- templateDetails.xml
- favicon.ico (16x16 großes Bild)
- template_thumbnail.png (224x177 großes Bild)

Das Basistemplate beinhaltet 2 Ordner CSS und IMAGES, welches logischerweise die entsprechenden Daten beinhaltet. In jedem neu erstellten Ordner sollte der Sauberkeit halber eine leere index.html Datei enthalten sein. Dadurch wird bei eingeschaltetem Directory Listing der direkte Aufruf verhindert. Diese Dateien enthalten lediglich eine weiße Seit

<!--

/**  
   * @author      Roland Meier  
   * @package     Joomla!  
   * @subpackage  NAME DES TEMPLATES  
   * @link        http://medialekt.de  
   * @email       Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!  
   * @copyright   Roland Meier  
   *  
   * NAME DES TEMPLATES - Joomla! 1.7.x  
   * Copyright (C) 2011 Roland Meier  
   *
   **/
-->
<html>
   <body bgcolor="#FFFFFF">
   </body>
</html>

In der index.php steht das eigentliche Template, welches weiter unten ausführlicher beschrieben wird. Die error.php Datei wird dem Benutzer dann angezeigt, wenn er eine nicht erreibare Datei versucht anzusurfen. Sei es interne Verlinkungsfehler oder alte Beiträge, welche noch im Index der Suchmaschinen linken.

Die templateDetails.xml enthält alle wichtigen Informationen zum Template. Auch hier werde ich weiter unten noch genauer darauf eingehen.

Am Ende noch 2 Bilddateien, zum Einen das Favicon, welches links neben der Adresse im Browser angezeigt wird und das Template Vorschaubild im Backend von Joomla.

Eine ZIP Datei mit dieser Struktur kann im Backend schonmal anstandslos installiert werden. Vorraussetzung ist natürlich, dass die Dateien auch Inhalte haben.

Nun werde ich nach und nach auf die einzelnen Dateien weiter eingehn.

templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<!--
/**  
   * @author      Roland Meier  
   * @package     Joomla!  
   * @subpackage  NAME DES TEMPLATES  
   * @link        http://medialekt.de  
   * @email       Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!  
   * @copyright   Roland Meier  
   *  
   * NAME DES TEMPLATES - Joomla! 1.7.x  
   * Copyright (C) 2011 Roland Meier  
   *
   **/
-->
<extension version="1.7" type="template" client="site">          

   <name>NAME DES TEMPLATES</name>     
   <creationDate>ERSTELLDATUM</creationDate>    
   <author>Roland Meier</author>    
   <authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! </authorEmail>    
   <authorUrl>http://medialekt.de</authorUrl>     
   <version>VERSION</version>     
   <description>TEMPLATE BESCHREIBUNG</description>          

   <files>        
      <folder>css</folder>        
      <folder>images</folder>        
      <filename>index.php</filename>        
      <filename>index.html</filename>        
      <filename>favicon.ico</filename>        
      <filename>templateDetails.xml</filename>        
      <filename>template_thumbnail.png</filename>     
   </files>          

   <positions>        
      <position>headerLeft</position>        
      <position>headerRight</position>        
      <position>contentNavigation</position>        
      <position>contentSlider</position>        
      <position>contentBreadcrumbs</position>        
      <position>footer</position>     
   </positions>     

</extension>

In den ersten beiden Zeilen definier ich den XML- und Dokumenttyp. Gefolgt von meinem standard Header, welchen ich in jede meiner Dateien so einbinde. Die Informationen die hier stehen, können antürlich selbst gewählt werden. Ich habe mich auf oben gezeigte festgelegt.

Dann fängts langsam mit den eigentlichen Template Daten an, welche dann auch teilweise in die Datenbank geschrieben werden und im Backend eingesehen werden können. Die Version setz ich zu Beginn immer auf 0.1 und nach Abschluss auf 1.0. Jede einzelne Version speicher ich separat ab. So kann ich auf Wunsch die Version 0.4 wieder einsehen, wenn ich beispielsweise Funktionen etc. von früheren Versionen wieder benötige.

In die DESCRIPTION kopier ich meistens einfach den Template Namen nochmal.

Dann folgen die Ordner und Dateien, welche das Template beinhaltet.

Sofern hier eine Datei eingetragen ist, welche real aber nicht existiert, wird Joomla das Template NICHT installieren und mit einer Fehlermeldung, dass diese Datei nicht existiert abbrechen!

Aus diesem Grund liste ich Dateien in Unterordnern nicht mit auf.

Die POSITIONS sind WICHTIGE Punkte, da diese die einzelnen Modulpositionen eures Templates im Backend zur Verfügung stellen. Jede in der index.php vorhandene Position, MUSS hier eingetragen sein, da sie ansonsten im DropDown-Feld im Backend für die Modulposition nicht erscheint.

index.php

<?php

/**  
   * @author      Roland Meier  
   * @package     Joomla!  
   * @subpackage  NAME DES TEMPLATES  
   * @link        http://medialekt.de  
   * @email       Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!  
   * @copyright   Roland Meier
   *
   * NAME DES TEMPLATES - Joomla! 1.7.x  
   * Copyright (C) 2011 Roland Meier
   *
   **/
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xml:lang="<?php echo $this->language; ?>"
   lang="<?php echo $this->language; ?>"
   dir="<?php echo $this->direction; ?>" >          

  <head>     
   
      <?php        
      // uncomment following line if generator tag should be hidden
      // $this->setGenerator('');        
      ?>        

      <jdoc:include type="head" />        
     
      <link rel="stylesheet" href="/templates/namedestemplates/css/template.css" type="text/css" />        
      <!-- browser switch for internet explorer -->        
      <!--[if gte IE 7]>            
         <link rel="stylesheet" href="/templates/namedestemplates/css/template_ie_gte7.css" type="text/css" />        
      <![endif]-->     

   </head>          

   <body>               

      <div id="mainFrame">  
                      
         <div id="header">                
            <div id="headerLeft">
               <jdoc:include type="modules" name="headerLeft" style="xhtml" />
            </div>                
            <div id="headerRight">
               <jdoc:include type="modules" name="headerRight" style="xhtml" />
            </div>            
         </div>                        

         <div class="clear"></div>

         <div id="content">
            <div id="contentNavigation">
               <jdoc:include type="modules" name="contentNavigation" style="xhtml" />
            </div>                
            <div id="contentSlider">
               <jdoc:include type="modules" name="contentSlider" style="xhtml" />
            </div>                
            <div id="contentBreadcrumbs">
               <jdoc:include type="modules" name="contentBreadcrumbs" style="xhtml" />
            </div>                
            <div id="contentComponent">
               <jdoc:include type="component" style="xhtml" />
            </div>            
         </div>                        

         <div class="clear"></div>
              
         <!-- NOTE! please keep this link in order to appreciate my work. if you want to remove it, please contact the me. -->            
         <div id="footer">
            <jdoc:include type="modules" name="footer" style="xhtml" /> Design: <a href="http://medialekt.de"
               target="_blank">Medialekt</a>
         </div>     
               
      </div>             

   </body>     

</html>

Hier beginnt dann auch langsam die eigentliche Arbeit.

Die ersten Zeilen sind wieder mein besagter Header, gleich gefolgt von der ersten Sicherheitsabfrage, welche den direkten Aufruf der PHP Datei verhindert. Diese Zeile sollte zu Beginn in JEDER PHP-Datei stehen!

Dann wieder meine Dokumententyp und HTML Definitionen.

Mit der Zeile $this->setGenerator(''); kann ich einen Leeren Tag erzeugen. Normalerweise steht hier Joomla und die Version dabei, was wie im Sicherheitsbeitrag schon erwähnt ist, ein Sicherheitsfaktor sein kann. Mit den beiden Schrägstrichen hab ich die Zeile hier lediglich auskommentiert und wird somit ignoriert. Soll der Tag so genutzt werden, kann er hier einfach wieder eingebunden werden, indem die beiden Schrägstriche entfernt werden. Die Zeile darüber ist lediglich eine Kommentarzeile.

Dann binde ich den normalen Joomla Kopf ein.

Anschließend kommen meine CSS-Dateien. Hier muss der genaue Name des Templateordners eingetragen werden. Alternativ kann der natürlich auch ausgelesen werden, aber hier will ichs einfach halten.

Hier habe ich auch eine Abfrage mit einem Conditional Comment, welchen nur die Internet Explorer Browser lesen können. Wird die entsprechende Version festgestellt, leitet er automatisch auf die entsprechende CSS Datei um. In diesem Fall GTE IE7 = greater than else IE7. Wenn die Version größer oder gleich Internet Explorer 7 ist, binde diese CSS Datei mit ein.

Im BODY Tag sind dann meine eigentlichen Ebenen und Modulpositionen vorhanden. Als erstes erstelle ich ein mainFrame, da ich die ganze Seite zentriert mit einer festen Breite haben möchte. Darin habe ich weitere Ebenen für den HEADER, den eigentlichen CONTENT und den FOOTER.

Den Header habe ich wiederum unterteilt ind Links und Rechts. Hier habe ich auch die Modulpositionen gesetzt. Der NAME muss hier den Namen in der XML Datei entsprechen.

Den Content habe ich in 4 weitere Ebenen unterteilt, für die Navigation, einen Slider, der Breadcrumb-Leiste und den eigentlichen Inhalt. (COMPONENT)

Abschließend noch einen Footer und fürs erste ist auch die index.php fertig.

Zwischen den Ebenen habe ich eine CLEAR Ebene, welche mir diverse CSS Positionierungen wieder zurücksetzt.

template.css

/**
 
   * @author      Roland Meier  
   * @package     Joomla!  
   * @subpackage  NAME DES TEMPLATES  
   * @link        http://medialekt.de  
   * @email       Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!  
   * @copyright   Roland Meier  
   *  
   * NAME DES TEMPLATES - Joomla! 1.7.x  
   * Copyright (C) 2011 Roland Meier  
   *
   **/

/********************************************************/
/*****      BASIC SETTINGS                          *****/
/********************************************************/
* {     
   margin: 0px;     
   padding: 0px;
}
body {   
   font-family: sans-serif, Arial, helvetica;     
   font-size: 12px;     
   color: #000;     
   background-color: #fff;
}

/********************************************************/
/*****      FRAMES                                  *****/
/********************************************************/
#mainFrame {     
   border: 1px solid #000;     
   margin: auto;     
   width: 1024px;   
   z-index: 1;
}
#header {    
   border: 1px solid blue;     
   height: 100px;
}
#headerLeft {    
   border: 1px solid red;     
   width: 500px;     
   float: left;
}
#headerRight {    
   border: 1px solid green;     
   width: 500px;     
   float: right;     
   text-align: right;
}
#content {    
   border: 1px dashed yellow;
}
#contentNavigation {    
   border: 1px dashed blue;    
   height: 50px;
}
#contentSlider {    
   border: 1px dashed green;    
   height: 200px;
}
#contentBreadcrumbs {    
   border: 1px dashed red;
}
#contentComponent {    
   border: 1px dashed blue;
}
#footer {    
   border: 1px dashed blue;    
   text-align: center;
}
.clear {     
   clear: both;
}
#errorFrame {
}

/********************************************************/
/*****        FORMAT OF ELEMENTS                    *****/
/********************************************************/

/********************************************************/
/*****        LINKS                                 *****/
/********************************************************/
a:link, a:visited, a:active {     
   color: #666;     
   text-decoration: underline;
}
a:hover {     
   color: #333;
}
#contentNavigation ul {    
   margin: 0px;   
   padding: 0px;
}
#contentNavigation ul li {    
   display: inline;    
   list-style-type: none;
}
#contentNavigation ul a {    
   display: block;    
   float: left;    
   padding: 6px 12px;
}

/********************************************************/
/*****        TEXT                                  *****/
/********************************************************/
h1 {
}
h2 {
}
h3 {
}
.errorText {
}

In dieser Datei steckt die meiste Arbeit und Erfahrung. Ihr werdet sie Lieben und Verfluchen gleichzeitig.

Zu Beginn wieder unser Header. Dann hab ich mir angewohnt, dass ich alle Klassen und Elemente sauber unterteile. In den Basic Settings hab ich ganz grundlegende Attribute festgelegt, wie Schriftart und Größe, Schriftfarbe (COLOR) und Hintergrundfarbe (BACKGROUND-COLOR)

Dann liste ich sämtliche Ebenen auf, welche ich im Template so verbaut habe. Dies mache ich über IDs (desshalb auch #) da diese nur von den entsprechenden Positionen benötigt wird. Weiter unten verwende ich dann auch Klassen (das währ dann der Punkt .) für Dinge, die öfters benötigt werden.

Kommentare werden in CSS mit /* dies ist ein Kommentar */ gemacht. Attribute welche ich schnell mal aktivieren/deaktivieren will, kommentier ich einfach enstprechende Zeile ein oder aus.
In den Ebenen sind überall farbige RAHMEN (BORDER) gesetzt, da dies für die Entwicklung hilfreich ist, um die genauen Positionen der jeweiligen Ebenen auf anhieb zu sehen. In der Regel kommentier ich sämtliche BORDER in den Ebenen nach der Entwicklung aus oder lösche sie heraus.

Beachtet, dass für die Ebenen vermutlich erstmal nur Linien angezeigt werden, solange Ihr im Backend der Position keinen Inhalt zuweist! AUßER ihr gebt eine FESTE Höhe mit (HEIGHT).

Gerade zum AUSPROBIEREN gewisser Attribute ist an dieser Stelle die Firefox Erweiterung FIREBUG absolut GOLD wert.

In die genauen CSS Attribute werde ich hier an dieser Stelle nicht näher eingehen, da es da bereits unzählige Beiträge im Netz zu finden gibt. Eine Anlaufstelle währ in jeden Fall www.css4you.de.

Sobald die Entwicklungen abgeschlossen sind und die Seite euren Wünschen entspricht, seht sie unbedingt noch in anderen Betriebssystemen und vor allem Browsern an. Wenn ihr unter Firefox entwickelt habt und in CSS noch nicht so viel Erfahrung habt, werdet Ihr vermutlich beim ersten Besuch mit dem Internet Explorer, vor allem bei älteren Versionen eine böse Überrauschung vorfinden.

KLEINER TIP:

Ruhig bleiben und die Sache mit Verstand angehn. Meistens hatten schon irgendwelche anderen Leute genau das gleiche Problem insofern ist Google eure erste Anlaufstelle. Und solltet Ihr dennoch mal ganz Außergewöhnliche Dinge haben, bleiben immer noch ettliche Foren oder Ihr könnt mir einfach eine Nachricht schreiben. Habt aber bitte Verständnis, wenn ich Anfragen nicht sofort beantworte oder bei zu komplexen Dingen auf meine Webdesign Firma Medialekt in Saal verweise.

Demnächst werde ich dann die ersten Arbeiten mit dem Template im Joomla Backend noch etwas beschreiben, damit Ihr auch das Template sauber nutzen könnt. Ihr könnt natürlich auch gleich damit beginnen, eure Modulpositionen zu füllen. Wichtig sind lediglich die Namen der Positionen und dass ihr diesen eben auch die entsprechenden Module zuweist.

Diese Vorlage darf frei (un-/kommerziell) verwendet werden. Ich würde mich freuen, wenn Ihr den Backlink im Footer belasst oder mir eine Nachricht schreibt, sofern Ihr vorhabt, ihn zu entfernen.

Außerdem habe ich eine erste Version des Handbuchs angefertigt, welches zeigt, wie Ihr das Template mit Inhalt füllt.

Anhänge:
Diese Datei herunterladen (base-template-17.zip)Joomla Template 1.7[ ]5 kB
Diese Datei herunterladen (Joomla 1.7 Basis Template.pdf)Joomla Template 1.7 Handbuch[ ]3289 kB

Kommentare   

 
0 #2 kay 2012-01-27 11:07
sehr schön super Beschrieben
Zitieren
 
 
+2 #1 Chris 2011-09-09 10:55
nur weiter so :lol:
Zitieren
 

 

http://www.mehrfans.de