TIMERATE AG Tel Falkenstrasse Zürich Joomla Templates Kursunterlagen

Transkript

1 TIMERATE AG Tel Falkenstrasse Zürich Joomla Templates Kursunterlagen

2 Ordnerstruktur in Joomla Inhaltsverzeichnis Ordnerstruktur in Joomla... 3 Ordnerstruktur... 3 Dateistruktur... 3 Dateinamen im Internet für CSS & HTML... 3 Erlaubte Zeichen... 3 Verbotene Zeichen... 3 Gross- und Kleinschreibung Container... 4 Joomla Platzhalter... 4 Joomla Platzhalter für den Inhalt... 4 Joomla Platzhalter für andere Module... 4 Übliche Positionsnamen in den Templates:... 5 Beispiel... 5 Namen der div-tags oder Container... 5 Container»ausrichtung«... 5 Details über den Aufbau von jdoc... 5 Weitere Inhalte in der Datei index.php... 6 XML-Datei erstellen... 7 Wichtiges über den Inhalt... 7 TIMERATE AG 2

3 Ordnerstruktur in Joomla Ordnerstruktur in Joomla Ordnerstruktur Eigenes Template in separaten Ordner unterhalb /joomla/templates kopieren, also /joomla/templates/ordnername Dateistruktur In diesem Ordner gibt es fünf Komponenten, welche nicht fehlen dürfen: 1. ein Verzeichnis /images 2. ein Verzeichnis /css 3. die Datei index.php 4. die Datei templatedetails.xml 5. das Bild template_thumbnail.png in der Grösse 206 x 150 Pixel Dateinamen im Internet für CSS & HTML Da wir im Internet in gemischten Hard- und Softwareumgebungen (z.b. Windows, Unix, Macintosh, Linux etc.) arbeiten, dürfen nicht beliebige Dateinamen vergeben werden. Es gelten die folgenden Regeln: Erlaubte Zeichen Buchstaben a bis z oder A bis Z Zahlen von 0 bis 9 Verbotene Zeichen Europäische Sonderzeichen (z.b. ä, ö, ü, é, à, è, ç etc.) Leerzeichen Sonderzeichen (z.b. Punkt,?, $ etc.) Gross- und Kleinschreibung Windows und Macintosh unterscheiden nicht zwischen Gross- und Kleinschreibung in Dateien. Das heisst, die Dateien «produkte.htm» und «Produkte.htm» sind identisch für Windows und Mac. Linux und Unix unterscheiden zwischen Gross- und Kleinschreibung. Das heisst, die Dateien «produkte.htm» und «Produkte.htm» sind für Linux und Unix nicht identisch. Dies ist in der Praxis wichtig, weil sehr viele Provider mit Linux- und Unix- Webservern arbeiten. Wir vergeben für Dateinamen und CSS-Definitionen ausschließlich Kleinbuchstaben. Wir verwenden kurze Dateinamen. TIMERATE AG 3

4 Die Webpage wird in einzelne Container aufgeteilt. Diese entsprechen Strukturelementen: Die Container entsprechen Strukturelementen wie Logo, Hauptnavigation, Fusszeile etc. Mit Vorteil wird für jedes gewünschte Strukturelement ein eigener Container erstellt. Container Die Container werden im HTML als div-tag bezeichnet. Jeder Container braucht eine eindeutige Bezeichnung oder id, diese ist vergleichbar mit der AHV-Nummer: <div id= inhalt >An dieser Stelle setzt Joomla den Inhalt</div> Joomla Platzhalter Damit Joomla weiss, wo welcher Inhalt platziert wird müssen wir im Template Platzhalter setzen. Joomla ersetzt die Markers dann mit dem eigentlichen Inhalt. Joomla Platzhalter für den Inhalt Der Inhalt wird immer angegeben mit: <jdoc:include type= component /> Joomla Platzhalter für andere Module Im body-bereich werden die Platzhalter mit dem jdoc-befehl festgelegt. Im Beispiel die Platzhalter top, left, right und breadcrumbs: <jdoc:include type= module name= breadcrumbs style= xhtml /> <jdoc:include type= modules name= top style= xhtml /> <jdoc:include type= modules name= left style= xhtml /> <jdoc:include type= modules name= right style= xhtml /> TIMERATE AG 4

5 Übliche Positionsnamen in den Templates: banner breadcrumbs debug footer hornav left right search syndicate top user1 user2 user3 user4 user5 user6 user7 user8 user9 Beispiel <div id= ausrichtung > <div id= logo ><jdoc:include type= module name= user1 style= xhtml /></div> <div id= sn > <jdoc:include type= module name= top style= xhtml /></div> <div id= bn > <jdoc:include type= module name= breadcrumbs style= xhtml /></div> <div id= hn > <jdoc:include type= modules name= left style= xhtml /></div> <div id= inhalt ><jdoc:include type= component /></div> <div id= fuss ><jdoc:include type= modules name= footer style= xhtml /></div> </div> Namen der div-tags oder Container Die Container, also die <div> Tags werden wie folgt bezeichnet (bitte unbedingt Gross- und Kleinschreibung beachten): Name Class im div-tag Positionsname in Joomla Hauptnavigation <div id = hn > left Servicenavigation <div id = sn > top Logo <div id = logo > user1 Inhalt <div id = inhalt > type= component Ausrichtung <div id = ausrichtung > -- Breadcrumb- oder Pfadnavigation <div id = bn > breadcrumbs Fuss <div id= fuss > footer Container»ausrichtung«Der Container ausrichtung hat keinen eigentlichen Inhalt, sondern beinhaltet andere Container. Er wird benutzt, um die Breite, Höhe und Ausrichtung der Website fest zu legen. Details über den Aufbau von jdoc Allgemeine Form des jdoc Codes: <jdoc:include type="module" name="user1" style="xhtml" /> style fügt zusätzliche HTML-Codes hinzu. Es gibt tables, horiz, rounded, outline, xhtml und none. Empfehlung: xhtml verwenden. TIMERATE AG 5

6 Weitere Inhalte in der Datei index.php Die Datei index.php braucht folgenden Eintrag ganz am Anfang: <?php?> // no direct access defined( _JEXEC ) or die( Restricted access ); Im head-bereich gehört folgender Eintrag: <jdoc:include type= head /> Die im Ordner /images liegenden Bilder werden wie folgt eingebunden: <img src= <?php echo $this->baseurl?>/templates/ordnername/images/logo.gif /> Bei Bedarf den Sitenamen ausgeben: <?php echo $mainframe->getcfg( sitename );?> Die im Ordner /css liegenden CSS-Dateien wie folgt einbinden: <!-- Standard Joomla CSS -->?>/templates/system/css/system.css type= text/css />?>/templates/system/css/general.css type= text/css /> <! Eigenes CSS -->?>/templates/ordnername/css/layoutscreen.css type= text/css />?>/templates/ordnername/css/inhaltscreen.css type= text/css /> Bei Bedarf den Sitenamen ausgeben: <?php echo $mainframe->getcfg('sitename');?> TIMERATE AG 6

7 XML-Datei erstellen Sämtliche Informationen, die das Template betreffen müssen sich in der Datei templatedetails.xml befinden. Die Datei beginnt mit einem allgemeinen Teil, der Details zum Autor und dem Template enthält. Es folgt eine Liste der Dateien, die mit dem Template zusammenhängen. Dabei findet eine Unterteilung in Dateien, Bilder und CSS statt: <files> <filename>index.php</filename> <filename>template_thumbnail.png</filename> </files> <images> <filename>images/logo.gif</filename> </images> <css> <filename>css/layoutscreen.css</filename> <filename>css/inhaltscreen.css</filename> </css> <positions> <position>left</position> <position>user1</position> <position>top</position> <position>breadcrumbs</position> <position>footer</position> </positions> Wichtiges über den Inhalt Normalerweise ist der Inhalt in Tabellen platziert. Abhilfe: kopieren des ganzen Ordners html vom Beez-Template in den eigenen Template Ordner. Beez ist ein modernes Template, welches den Inhalt mit CSS statt mit Tabellen ausgibt. TIMERATE AG 7