Template für ein Restaurant erstellen
Wir erstellen ein Joomla-6 Template für ein Restaurant mit Reservierung + Online-Bestellung + Speisekarte und nur 3 zentral änderbaren Farben (deutsche Variablennamen)
Richtiger Speicherort (dein Projekt) Alle Styles gehören hierhin:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Das ist deine Haupt-Stylesheet Datei → wird in index.php geladen
1. Voraussetzungen (Windows 11 Pro)
Lokaler Webserver (XAMPP empfohlen)
Download: https://www.apachefriends.org/de/download.html
Installationspfad (unbedingt so lassen): C:\xampp\
Danach starten:
C:\xampp\xampp-control.exe
Starten:
- Apache
- MySQL
Test im Browser: http://localhost/
2. Joomla 6 installieren
Download:
ZIP entpacken nach: C:\xampp\htdocs\restaurants\
Dann im Browser:
http://localhost/restaurant6
Datenbank anlegen
Neue DB:
restaurant6_db
Installation durchlaufen lassen.
3. Template anlegen (wichtigster Teil)
Joomla Template liegt hier:
C:\xampp\htdocs\restaurant6\templates\
Neuer Ordner:
restaurant_ihk
Struktur erstellen:
│ index.php
│ templateDetails.xml
│
├── css
│ style.css
│
├── js
│ script.js
│
├── html
│
└── images
4. templateDetails.xml (Pflichtdatei)
Datei:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\templateDetails.xml
5. index.php (Template Grundstruktur)
Speicherort index.php
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\index.php
Link zum Aufruf der CSS-Datei
6. CSS mit 3 Farben (deutsche Variablen!)
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Farben später nur hier ändern — gesamtes Design passt sich an.
Datei: user.css
:root{
--hauptfarbe: dunkelrot;
--nebenfarbe: creme;
--akzentfarbe: olivgruen;
}
/* globale Einstellungen */
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:var(--nebenfarbe);
}
/* Kopfbereich */
.kopf{
background:var(--hauptfarbe);
color:white;
padding:20px;
}
.navigation a{
color:white;
text-decoration:none;
margin:10px;
}
/* Hero Bereich */
.hero{
background:var(--akzentfarbe);
color:white;
padding:80px;
text-align:center;
}
/* Hauptbereich */
.hauptbereich{
display:flex;
}
.inhalt{
width:70%;
padding:30px;
}
.seite{
width:30%;
background:#f2f2f2;
padding:20px;
}
/* Footer */
.fuss{
background:var(--hauptfarbe);
color:white;
padding:20px;
text-align:center;
}
7. Template installieren
Zip erstellen aus:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk
Backend öffnen:
http://localhost/restaurant6/administrator
Gehe zu:
System → Installieren → Erweiterungen
Zip hochladen → dann:
System → Templates → Site → restaurant_ihk → Standard
8. Menüstruktur für Restaurant
Backend:
Menüs → Hauptmenü
Anlegen:
| Menüpunkt | Typ |
|---|---|
| Startseite | Einzelner Beitrag |
| Speisekarte | Kategorie Blog |
| Reservierung | externer Link / Komponente |
| Online Bestellung | Komponente |
| Kontakt | Kontakte |
9. Reservierungssystem installieren
Professionell & kostenlos:
DPCalendar (Tischreservierung geeignet)
Download:
https://joomla.digital-peak.com/download/dpcalendar
Installieren über:
System → Installieren → Erweiterungen
Dann:
Komponenten → DPCalendar → Kalender → Neuer Termin
Beispiel:
Dauer: 2 Stunden
Max Teilnehmer: 6
Frontend nutzbar als Reservierung.
10. Online Bestellung (Restaurant Bestellung)
Empfehlenswert: JoomShopping + Restaurant Addon
Download:
https://www.webdesigner-profi.de/joomla-webdesign/joomshopping
Installieren, dann Produkte anlegen:
Komponenten → JoomShopping → Produkte
- Kategorie: Pizza
- Kategorie: Getränke
- Kategorie: Dessert
Jetzt hat das Restaurant:
✔ Online Bestellung
✔ Warenkorb
✔ Kundenkonto
11. Speisekarte darstellen (optisch schön)
Kategorie erstellen:Inhalte → Kategorien → Speisekarte
Pizza Margherita
Preis: 9,50€
Zutaten: Tomate, Mozzarella, Basilikum
Kategorie Blog
Weitere Gerichte eingeben, jetzt automatische Restaurantkarte.
12. Modul Positionen belegen
Backend: Inhalt → Module
| Position | Inhalt |
|---|---|
| logo | Bild Modul (Logo) |
| menue | Menü Modul |
| hero | Willkommenstext |
| sidebar | Öffnungszeiten |
| footer | Adresse + Telefon |
13. Ergebnis
Du hast jetzt:
✔ Eigenes Template
✔ 3 zentrale Farbvariablen
✔ Speisekarte
✔ Tischreservierung
✔ Online Bestellsystem
✔ Modulpositionen wie echtes Projekt