Template - Grundlagen
1️⃣ Template-Verzeichnis anlegen
📁 Pfad
Mindeststruktur
│
├─ index.php
├─ templateDetails.xml
├─ error.php
├─ template_preview.png
├─ css/
│ └─ template.css
└─ html/ (für Overrides)
📌 Ohne index.php + templateDetails.xml kein Template
2️⃣ Entwurf erstellen (Planung)
Vor dem Coden klären:
- Header (Logo, Titel)
- Navigation
- Content-Bereich
- Sidebar (optional)
- Footer
📐 Grobes Layout:
Navigation
Systemmeldungen
Content
Footer
3️⃣ HTML-Grundgerüst erstellen
4️⃣ Kopf für Joomla 6 vorbereiten
Pflicht im <head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />
📌 Ohne diese:
- kein CSS
- kein JS
- SEO-Probleme
5️⃣ Komponenten einbinden
Hauptinhalt (Pflicht!)
📌 Komponenten liefern den Seiteninhalt
(z. B. Beiträge, Kontakte, Suche)
6️⃣ Modulpositionen kennzeichnen
<jdoc:include type="modules" name="footer" />
📌 name = Modulposition
7️⃣ Systemmeldungen einbinden
📌 Zeigt:
- Login-Meldungen
- Fehler
- Bestätigungen
8️⃣ Name der Website einbauen
➡️ kommt aus: pgsql Code kopieren
System → Globale Konfiguration → Website-Name
9️⃣ Link zur Startseite
📌 $this->baseurl = Domain + Unterverzeichnis
🔟 Statische Bilder einbinden
📁 Pfad:
/templates/mein_template/images/logo.png
HTML
1️⃣1️⃣ Eigene Fehlerseite (error.php)
📁 Datei:
1️⃣2️⃣ templateDetails.xml erstellen
Pfad:
/templates/mein_template/templateDetails.xml
1️⃣3️⃣ Template-Paket erstellen
- Ordner mein_template zippen
- Upload über:
1️⃣4️⃣ Template Overrides
📁 Pfad:
➡️ Überschreibt:
📌 Update-sicher
1️⃣5️⃣ Modul-Chrome (Modul-Layouts)
📁 Pfad:
Beispiel:
1️⃣6️⃣ Stylesheet einbinden
📁 Datei:
Automatisch geladen durch:<jdoc:include type="styles" />
Beispiel:
background-color: #2F4F4F; /* Dark Slate Gray */
color: #FFFFFF; /* White */
}
1️⃣7️⃣ Vorschaubild (Template Preview)
📁 Datei:
📌 Wird im Backend angezeigt
1️⃣8️⃣ Einzelne Elemente formatieren
main {
max-width: 1200px;
margin: auto;
}
footer {
background-color: #333333; /* Dark Gray */
color: #FFFFFF; /* White */
}
1️⃣9️⃣ Templates mit Parametern steuern
In : "templateDetails.xml:"
<fields name="params">
<fieldset name="basic">
<field name="bgcolor" type="color" label="Hintergrundfarbe" />
</fieldset>
</fields>
</config>
In :Datei "index.php"
<style>
body {
background-color: <?php echo $this->params->get('bgcolor'); ?>;
}
</style>