1. Was ist ein Override?
Ein Override ist eine Kopie einer Core‑Ausgabe, die im Template liegt und das Original ersetzt, ohne Core‑Dateien zu verändern.
Vorteile:
- Updatefest
- Volle Design‑Kontrolle
- Saubere Trennung von Core & Design
2. Arten von Overrides (Überblick)
| Typ | Zweck | Typischer Einsatz |
|---|---|---|
| Layout‑Override | HTML‑Struktur ändern | Modul neu aufbauen |
| Template‑Override | Komponenten & Module | Beitrags‑, Modul‑Ausgabe |
| CSS‑Override | Optik | Farben, Abstände |
3. Wo liegen Core‑Layouts? (Referenz)
Beispiel: Menü‑Modul
Core‑Pfad: /modules/mod_menu/tmpl/default.php
Beispiel: Artikel‑Kategorie‑Modul
/modules/mod_articles_category/tmpl/default.php
⚠️ Diese Dateien niemals direkt bearbeiten!
4.1 Override im Backend erstellen
Backend‑Pfad:
System → Templates → Site‑Templates → Cassiopeia → Overrides
Schritte:
- „Neuen Override erstellen“
- Modul auswählen (z. B. Menü)
- Joomla erstellt automatisch die Dateien
4.2 Ergebnis im Dateisystem
/templates/cassiopeia/html/mod_menu/default.php
➡ Dieses Layout überschreibt ab sofort die Core‑Ausgabe des Moduls.
5. Advanced Overrides (Layouts duplizieren)
Ziel
Mehrere Layout‑Varianten für ein Modul (z. B. Menü normal / Menü Sidebar)
Backend‑Pfad
Inhalt → Module → Modul bearbeiten → Erweitert → Layout
Vorgehen
- Override anlegen
- Datei kopieren & umbenennen, z. B.: default_sidebar.php
- Im Modul das neue Layout auswählen
Im Modul das neue Layout auswählen
6. Praxisbeispiel 1: Menü‑Layout vereinfachen
Ziel
- Keine Unterpunkte
- Klare HTML‑Struktur
Beispiel‑Code (Auszug)- Wo liegt er?
👉 IMMER im aktiven Template
📁 Pfad:
⚠️ Nicht in cassiopeia_extended/index.php,
denn diese Datei lädt nur weiter:
require JPATH_THEMES . '/cassiopeia/index.php';
📌 Merksatz: Layout-Code steht im Basistemplate, nicht im Extended-Wrapper.
➡ Ergebnis:
sauberes, leicht stylbares Menü
CSS Musterlösung
Speicherort:
/templates/cassiopeia/css/user.css
Beispiel: Menü vereinfachen
/* Hauptmenü – reduziert & klar */
.main-menu-wrapper .mod-menu ul {
padding: 0;
margin: 0;
}
.main-menu-wrapper .mod-menu ul li a {
font-size: 16px;
font-weight: bold;
color: black; /* Schwarz #000000 */
text-decoration: none;
padding: 10px 14px;
}
.main-menu-wrapper .mod-menu ul li a:hover {
color: darkblue; /* Dunkelblau #00008B */
}
CSS Variable anlegen - (Custom Properties)
Anwendung
Für die meisten user.css-Anwendungen sind CSS-Variablen sehr nützlich, besonders für persönliche Anpassungen die regelmäßig geändert werden.
Verwende CSS-Variablen in user.css wenn:
- Du mehrere zusammenhängende Werte hast
- Du Anpassungen für andere ermöglichen willst
- Du Theme-Support brauchst
- Das Stylesheet komplex ist (> 100 Zeilen)
Vermeide sie wenn:
- Das Stylesheet sehr einfach ist
- Du maximielle Browser-Kompatibilität brauchst
- Performance kritisch ist
VORTEILE
✅ Flexibilität und Anpassbarkeit
- Benutzer können Werte leicht ändern ohne CSS-Kenntnisse
- Einfache Dark/Light-Mode Umschaltung:
@media (prefers-color-scheme: dark) {
:root {
--background: #1a1a1a;
--text-color: #ffffff;
}
}
✅ Wartbarkeit
- Zentrale Änderungen möglich
- Konsistente Werte über das gesamte Stylesheet
- Reduzierte Redundanz
✅ Dynamische Anpassung
- Werte können zur Laufzeit geändert werden
- JavaScript-Interaktion möglich:
javascript
document.documentElement.style.setProperty('--primary-color', '#ff0000');
✅ Browser-Support
- Moderne Browser unterstützen CSS-Variablen gut
- Fallback-Mechanismus:
color: var(--text-color, #000000); /* Fallback zu Schwarz */
✅ Kaskadierende Natur
- Variablen erben und überschreiben wie andere CSS-Eigenschaften
- Verschiedene Werte für verschiedene Kontexte
NACHTEILE
Browser-Kompatibilität
- Ältere Browser (IE11) unterstützen keine CSS-Variablen
- Benötigt Fallbacks für maximale Kompatibilität
Performance
- Übermäßiger Gebrauch kann die Performance beeinträchtigen
- Dynamische Änderungen lösen Layout-Recalculations aus
Debugging
- Schwieriger zu debuggen als direkte Werte
- Browser-DevTools zeigen manchmal nur var(--name) statt des berechneten Werts
Komplexität
- Zusätzliche Abstraktionsebene
- Kann für einfache user.css übermäßig sein
Typisierung
- Keine Typüberprüfung (z.B. Farbwerte vs. Pixelwerte)
- Fehler erscheinen erst zur Laufzeit
1. Variablen definieren (zentral)
Ganz oben in deiner user.css:
:root {
/* Farben */
--farbe-haupt: #0d3560; /* dunkelblau */
--farbe-akzent: #FFF3C4; /* aprikose */
--farbe-text: #000000; /* schwarz */
--farbe-hintergrund: #ffffff;/* weiss */
--farbe-rahmen: #dddddd; /* hellgrau */
/* Links */
--link-farbe: blau;
--link-hover: dunkelblau;
/* Schrift */
--schrift-standard: Arial, Helvetica, sans-serif;
--schrift-groesse-normal: 16px;
--schrift-groesse-h1: 24px;
--schrift-groesse-h2: 20px;
--schrift-fett: 700;
/* Abstände */
--abstand-klein: 5px;
--abstand-normal: 10px;
--abstand-gross: 20px;
/* Rahmen */
--rahmen-standard: 1px solid var(--farbe-rahmen);
}
2. Anwenden (Beispiel Breadcrumb)
Hintergrund Aprikose, Schrift Schwarz
background: var(--farbe-akzent);
color: var(--farbe-text);
padding: var(--abstand-normal);
border: var(--rahmen-standard);
}
3. Beispiel Überschriften (h1)
font-size: var(--schrift-groesse-h1);
font-weight: var(--schrift-fett);
color: rot;
font-family: var(--schrift-standard);
}
4.1 Praxis-Variable Farben
Farben
--farbe-footer
--farbe-menue
--farbe-menue-hover
--farbe-button
--farbe-button-hover
--farbe-fehler
--farbe-erfolg
--farbe-warnung
--farbe-info
4.2 Praxis-Variable Schriften
--schrift-menue
--schrift-navigation
--schrift-artikel
--schrift-groesse-menue
--schrift-groesse-footer
--schrift-zeilenhoehe
--schrift-kapitalisierung
4.3 Praxis-Variable Layout/Boxen
--breite-inhalt
--breite-sidebar
--max-breite-seite
--radius-box
--schatten-box
--hoehe-header
--hoehe-footer
4.4 Praxis-Variable Rahmen und Effekte
--rahmen-dick
--rahmen-dunn
--schatten-standard
--schatten-hover
--transition-standard
4.5 Praxis-Variable Buttons
--button-hintergrund
--button-textfarbe
--button-hover-hintergrund
--button-radius
5. Profi-Anwendung (Vorteil)
Du willst später komplettes Design ändern:
Nur hier ändern:
--farbe-akzent
und die ganze Website wird angepasst
Das ist der Unterschied zwischen „CSS schreiben“ und „Designsystem bauen“.
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>
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
Template - Restaurant -2-
Responsive Einstellungen
Wir erweitern dein bestehendes Template so, dass es sich wie eine echte Restaurant-Website verhält:
✔ Handy nutzbar
✔ Burger Menü
✔ feste Navigation beim Scrollen
✔ ohne Framework (kein Bootstrap — IHK mag das)
Das lernen Sie jetzt
- Mobile First Anpassung
- CSS Media Queries
- DOM Manipulation
- Event Handling
- Sticky Header ohne Framework
- Joomla Modulsteuerung
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. Viewport aktivieren (sonst ist alles sinnlos)
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\index.php
Im <head> unter charset einfügen:<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Burger Menü HTML einbauen
Im Header ersetzen:
Suche:
<header class="kopf">
<div class="logo">
<jdoc:include type="modules" name="logo" />
</div>
<nav class="navigation">
<jdoc:include type="modules" name="menue" />
</nav>
</header>
Ersetzen durch:
<header class="kopf" id="kopf">
<div class="kopfzeile">
<div class="logo">
<jdoc:include type="modules" name="logo" />
</div>
<div class="burger" id="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="navigation" id="navigation">
<jdoc:include type="modules" name="menue" />
</nav>
</header>
3. JavaScript einbinden
In index.php vor </body> einfügen:
4. JavaScript schreiben (Menü + Sticky)
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\js\script.js
// Burger Menü
const burger = document.getElementById("burger");
const nav = document.getElementById("navigation");
burger.addEventListener("click", function(){
nav.classList.toggle("aktiv");
burger.classList.toggle("offen");
});
// Sticky Navigation
window.addEventListener("scroll", function(){
const kopf = document.getElementById("kopf");
if(window.scrollY > 80){
kopf.classList.add("fixiert");
}else{
kopf.classList.remove("fixiert");
}
});
5a. CSS - Header Layout
Datei:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Ganz unten anhängen:
Header Layout
.kopfzeile{
display:flex;
justify-content:space-between;
align-items:center;
}
.navigation ul{
list-style:none;
margin:0;
padding:0;
display:flex;
}
.navigation li{
margin:10px;
}
5b. CSS - Burger Button
.burger{
width:30px;
cursor:pointer;
display:none;
}
.burger span{
display:block;
height:4px;
background:white;
margin:6px 0;
transition:0.3s;
}
5c. CSS - Sticky Navigation
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
}
6. Mobile Layout (der wichtige Teil)
.hauptbereich{
flex-direction:column;
}
.inhalt{
width:100%;
}
.seite{
width:100%;
}
/* Burger anzeigen */
.burger{
display:block;
}
/* Menü verstecken */
.navigation{
display:none;
background:var(--hauptfarbe);
padding:20px;
}
.navigation ul{
flex-direction:column;
}
/* Menü sichtbar wenn aktiv */
.navigation.aktiv{
display:block;
}
.hero{
padding:40px;
font-size:18px;
}
}
7. Desktop Verhalten korrigieren
(sonst bleibt Menü offen nach Resize)
.navigation{
display:block !important;
}
}
8. Test (wichtig)
Browser öffnen:
http://localhost/restaurant6
Dann:
F12 → Gerätesymbol → iPhone auswählen
Prüfen:
- Menü verschwindet
- Burger erscheint
- Klick öffnet Menü
- Scrollen → Kopf bleibt oben
- Layout untereinander
Wenn das funktioniert → alles ok
KÜCHENBESTELLUNGEN
Funktionsprinzip (wichtig verstehen)
- Bestellung wird in Datenbank gespeichert (JoomShopping macht das schon)
- Küche öffnet eine Seite
- JavaScript fragt regelmäßig Joomla: → „Gibt es neue Bestellungen?“
- Joomla antwortet mit JSON
- Anzeige aktualisiert sich live
Das lernen Sie jetzt
- Joomla AJAX API
- Eigenes Plugin
- JSON Verarbeitung
- Live Datenanzeige
- Soft-Realtime System
9. Küchen-Anzeige Seite erstellen
Backend: Menüs → Hauptmenü → Neuer Menüpunkt
Typ: Einzelner Beitrag
Titel:Küche Live
Alias:kueche-live
Beitrag erstellen:Inhalte → Beiträge → Neu
Titel: Küchenmonitor
Inhalt (nur Platzhalter):<div id="bestellungen">Warte auf Bestellungen...</div>
10. Joomla AJAX Schnittstelle erstellen
Wir nutzen die offizielle Joomla Schnittstelle: /index.php?option=com_ajax
Dazu brauchen wir ein Plugin.
11. Plugin Ordner erstellen
Pfad:C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\
Dateien:kueche.php
kueche.xml
11a kueche.xml
C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\kueche.xml
11b kueche.php (holt Bestellungen aus DB)
C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\kueche.php
12. Plugin installieren
Ordner zippen:plugins\ajax\kueche
Backend:System → Installieren → Erweiterungen
Dann aktivieren:System → Plugins → AJAX - kueche → Aktiviert
13. JavaScript für Live-Anzeige
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\js\script.js
unten anhängen:
// Küchenmonitor
function ladeBestellungen(){
fetch("/restaurant6/index.php?option=com_ajax&plugin=kueche&format=json")
.then(response => response.json())
.then(data => {
let html = "<h2>Aktuelle Bestellungen</h2>";
data.data.forEach(function(order){
html += `
<div class="bestellung">
Bestellung #${order.nummer}<br>
Zeit: ${order.zeit}<br>
Status: ${order.status}
</div>
`;
});
document.getElementById("bestellungen").innerHTML = html;
});
}
// alle 5 Sekunden aktualisieren
setInterval(ladeBestellungen, 5000);
// sofort laden
if(document.getElementById("bestellungen")){
ladeBestellungen();
}
14. Anzeige formatieren
style.css anhängen:
background:white;
border-left:8px solid var(--akzentfarbe);
padding:15px;
margin:10px 0;
font-size:20px;
}
15. Test
Browser:http://localhost/restaurant6/kueche-live
Dann zweite Seite öffnen:http://localhost/restaurant6/online-bestellung
Neue Bestellung ausführen.
👉 Nach spätestens 5 Sekunden erscheint sie automatisch in der Küche.
16. Bestellungen nach Status einfärben
JoomShopping speichert den Status als Zahl in der Datenbank:
Tabelle:#__jshopping_orders
Feld:order_status
Typische Werte:
| Nummer | Bedeutung |
|---|---|
| 1 | neu |
| 2 | bezahlt |
| 3 | in Bearbeitung |
| 4 | versendet |
| 5 | erledigt |
Wir verwenden:
| Anzeige Küche | DB Status |
|---|---|
| neu | 1 |
| in arbeit | 3 |
| fertig | 5 |
17. Plugin erweitern (Status übersetzen)
Datei bearbeiten:C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\kueche.php
komplette foreach ersetzen:
foreach($orders as $order){
$statusText = "unbekannt";
$statusKlasse = "status-unbekannt";
if($order['order_status'] == 1){
$statusText = "neu";
$statusKlasse = "status-neu";
}
if($order['order_status'] == 3){
$statusText = "in arbeit";
$statusKlasse = "status-arbeit";
}
if($order['order_status'] == 5){
$statusText = "fertig";
$statusKlasse = "status-fertig";
}
$ausgabe[] = [
"nummer" => $order['order_id'],
"zeit" => $order['order_date'],
"status" => $statusText,
"klasse" => $statusKlasse
] ;
}
18. JavaScript anpassen (Klasse verwenden)
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\js\script.js
Im Küchenbereich HTML Ausgabe ersetzen:
data.data.forEach(function(order){
html += `
<div class="bestellung ${order.klasse}">
Bestellung #${order.nummer}<br>
Zeit: ${order.zeit}<br>
Status: ${order.status}
</div>
`;
});
19. Farben definieren
Datei:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Ganz unten anhängen:
/* Statusfarben Küche */
.status-neu{
background:rot;
color:white;
}
.status-arbeit{
background:gelb;
color:black;
}
.status-fertig{
background:gruen;
color:white;
}
20. Testablauf (realistisch)
Backend:Komponenten → JoomShopping → Bestellungen
Status ändern:
1 → neu → Seite zeigt rot
3 → in arbeit → wird gelb
5 → fertig → wird grün
Ohne Aktualisieren der Seite.
Warum ein eigenes Template?
1. Markenidentität & Corporate Design
- Konsistente Farben: Exakte Firmenfarben (Pantone, CI/CD)
- Corporate Fonts: Firmeneigene Schriftarten integrieren
- Logo-Platzierung: Optimale Positionierung des Firmenlogos
- Wiedererkennungswert: Einzigartiges Design, das von Wettbewerbern abhebt
2. Leistungsoptimierung
- Kein Overhead: Nur benötigte CSS/JS laden
- Minimale Dateigröße: Keine unnötigen Frameworks
- Schnellere Ladezeiten: Bessere SEO und User Experience
- Optimierte Bilder: Firmenspezifische Bildgrößen und Formate
3. Benutzerfreundlichkeit & UX
- Branchenspezifische Navigation: Beispielweise für Hotels, Ärzte, Restaurants
- Custom Layouts: Angepasst an den Content der Firma
- Conversion-Optimierung: Call-to-Action-Buttons strategisch platzieren
- Mobile First: Perfekt auf die Zielgruppe optimiert
4. Funktionalität & Features
- Individuelle Module-Positionen: Genau auf Inhalte zugeschnitten
- Firmenspezifische Komponenten: Reservierungssystem, Produktkatalog, etc.
- Custom Error-Pages: Branded 404-Seiten
- Wartungsmodus: Eigenes Design für Wartungsarbeiten
5. Sicherheit
- Keine Fremd-Codes: Keine versteckten Backdoors wie bei manchen kostenlosen Templates
- Regelmäßige Updates: Eigenkontrolle über Update-Zyklen
- Cleaner Code: Keine unnötigen Funktionen, die angreifbar sind
6. SEO-Vorteile
- Semantisches HTML: Optimale Struktur für Suchmaschinen
- Kein Template-Bloat: Keine ungenutzten CSS/JS-Bibliotheken
- Schnelle Ladezeiten: Wichtiger Ranking-Faktor
- Structured Data: Firmenspezifische Schema.org-Implementierung
7. Wartung & Zukunftssicherheit
- Einfache Updates: Keine Abhängigkeit von Drittanbietern
- Joomla-Kompatibilität: Garantiert für neue Joomla-Versionen
- Skalierbarkeit: Einfach erweiterbar bei Wachstum
- Dokumentation: Eigene, firmenspezifische Dokumentation
8. Kostenkontrolle
- Keine Lizenzkosten: Einmalige Entwicklung statt jährlicher Template-Lizenzen
- Keine Abolauf-Abgängigkeit: Nicht von Template-Anbietern abhängig
- Wiederverwendbar: Für Subdomains oder weitere Projekte nutzbar
9. Technische Flexibilität
- Individuelle Breakpoints: An eigene Design-Entscheidungen angepasst
- Custom Grid-System: Eigenes Layout-System statt Bootstrap
- Zugänglichkeit (A11y): Spezifisch für die Zielgruppe optimiert
- Browser-Support: Nur benötigte Browser unterstützen
10. Firmeninterne Prozesse
- CMS-Schulung: Template an interne Redakteure angepasst
- Workflow-Optimierung: Module für Pressemitteilungen, Events, etc.
- Multilingual: Perfekt auf mehrsprachige Inhalte zugeschnitten
- Redaktionssystem: Vereinfachte Content-Erstellung
Beispiel-Szenarien:
Für ein Hotel:
- Buchungskalender prominent platzieren
- Galerie für Zimmer und Ausstattung
- Lageplan mit interaktiver Karte
- Bewertungen und Zertifikate
Für eine Arztpraxis:
- Online-Terminbuchung
- Notfallkontakt immer sichtbar
- Fachgebiet-spezifische Informationen
- Datenschutz- und Impressum besonders prominent
Für einen Online-Shop:
- Optimierte Produktdarstellung
- Schneller Checkout-Prozess
- Warenkorb immer sichtbar
- Kundenbewertungen integriert
Wann ist ein eigenes Template nicht nötig?
- Kleine private Websites ohne Markenanforderungen
- Test- oder Demo-Projekte
- Zeitlich begrenzte Kampagnen-Seiten
- Wenn ein Premium-Template bereits alle Anforderungen erfüllt
Kosten-Nutzen-Analyse:
Kosten:
- Entwicklungzeit (40-80 Stunden für professionelles Template)
- Wartungsaufwand
- Initiale Investition
Nutzen:
- Professioneller Auftritt
- Bessere Conversion-Raten
- Langfristige Kosteneinsparung
- Wettbewerbsvorteil
- Vollständige Kontrolle
Fazit:
Ein eigenes Template lohnt sich besonders für Unternehmen, die:
- Eine starke Markenidentität haben
- Langfristig mit Joomla arbeiten wollen
- Spezifische funktionale Anforderungen haben
- Auf Performance und SEO Wert legen
- Unabhängig von Drittanbietern bleiben möchten
Für eine Firma ist ein eigenes Template oft eine wertvolle Investition, die sich durch professionelleren Auftritt, bessere User Experience und langfristige Kosteneinsparungen bezahlt macht.