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)

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:

1. „Neuen Override erstellen“
2. Modul auswählen (z. B. Menü)
3. 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

1. Override anlegen
2. Datei kopieren & umbenennen, z. B.: default_sidebar.php
3. 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 */
}