Joomla Templates

T I M E R AT E A G
Falkenstrasse 26
8008 Zürich
Tel 044 422 65 15
[email protected]
www.timerate.ch
Joomla Templates
Kursunterlagen
Joomla Templates
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.............................................................. 3
HTML-Container für Joomla ....................................................................... 4
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
Joomla Templates
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
 Zahlen von 0 bis 9
z oder A
bis
Z
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 UnixWebservern arbeiten.
Wir vergeben für Dateinamen und CSS-Definitionen ausschließlich
Kleinbuchstaben.
Wir verwenden kurze Dateinamen.
© TIMERATE AG
3
Joomla Templates
HTML-Container für Joomla
HTML-Container für Joomla
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
Joomla Templates
HTML-Container für Joomla
Übliche Positionsnamen in den Templates:





banner
hornav
syndicate
user3
user7





breadcrumbs
left
top
user4
user8









debug
right
user1
user5
user9
footer
search
user2
user6
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
Joomla Templates
HTML-Container für Joomla
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 -->
<link rel=“stylesheet“ href=“<?php echo $this->baseurl
?>/templates/system/css/system.css“ type=“text/css“ />
<link rel=“stylesheet“ href=“<?php echo $this->baseurl
?>/templates/system/css/general.css“ type=“text/css“ />
<!—Eigenes CSS -->
<link rel=“stylesheet“ href=“<?php echo $this->baseurl
?>/templates/ORDNERNAME/css/layoutscreen.css“ type=“text/css“ />
<link rel=“stylesheet“ href=“<?php echo $this->baseurl
?>/templates/ORDNERNAME/css/inhaltscreen.css“ type=“text/css“ />
 Bei Bedarf den Sitenamen ausgeben:
<?php echo $mainframe->getCfg('sitename');?>
© TIMERATE AG
6
Joomla Templates
HTML-Container für Joomla
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