Module - wichtiger Kernbausteine von Joomla 6

Module sind wiederverwendbare Inhalts- und Funktionsblöcke, die an festgelegten Positionen im Template angezeigt werden.

👉 Sie sind keine Inhalte, sondern Bausteine rund um den Inhalt.

🧠 Einfaches Bild - Stell dir Joomla vor wie ein Haus:

Stell dir Joomla vor wie ein Haus:

Joomla-Element	Vergleich
Beiträge	Möbel
Kategorien	Räume
Module	Steckdosen, Lampen, Regale
Template	Grundriss
Menü	Flur & Wegweiser

➡ Module liefern Zusatzfunktionen und Orientierung

Warum Module so wichtig sind (Bedeutung)

Ohne Module gäbe es keine Navigation, kein Login, keine Suche, keine Breadcrumbs.

Typische Aufgaben von Modulen:

• Navigation anzeigen
• Zusatzinfos darstellen
• Benutzeraktionen ermöglichen
• Inhalte filtern oder hervorheben

👉 Fast alles außerhalb des Textinhalts ist ein Modul.

---

    1️⃣ Was ist ein Modul? 

Ein Modul ist ein funktionaler Block, der Inhalte oder Funktionen außerhalb des Hauptinhalts (Beiträge) darstellt.

📍 Typische Orte:

• Sidebar
• Header
• Footer
• Unterhalb des Menüs
• Login-Box
• Breadcrumbs

---

    2️⃣ Modulverwaltung – Backend-Pfad

📍 Pfad im Joomla-Backend: Inhalt → Module

📍 URL (lokal): https://DEINE-DOMAIN/administrator/index.php?option=com_modules

 

---

    3️⃣ Modulpositionen – Grundverständnis

    📌 Was ist eine Modulposition?

Eine vordefinierte Stelle im Template, an der Module angezeigt werden.

📍 Cassiopeia-Beispiele:

menu
topbar
sidebar-left
sidebar-right
footer
breadcrumbs

📍 Anzeige aller Positionen:

System → Templates → Optionen → Vorschau der Modulpositionen = Ja

Frontend: https://DEINE-DOMAIN/?tp=1>

Neue Modulposition submenu anlegen

Ausgangslage

• Aktives Template: Cassiopeia Extended – Default
• Ziel: Neue Modulposition submenu, direkt unter dem Hauptmenü
• Wichtig:
  • Backend muss die Position kennen
  • Frontend muss sie ausgeben

👉 Dafür sind zwei Dateien notwendig:

1. index.php → Ausgabe im Frontend
2. templateDetails.xml → Registrierung im Backend

---

       1️⃣ Prüfen: In welchem Template

Backend-Pfad:
System → Templates → Stile (Site)

✔ Aktiver Stil: Cassiopeia Extended – Default

👉 Alle Änderungen erfolgen NUR hier:

/templates/cassiopeia_extended/

---

       2️⃣ Modulposition im Template registrieren

📁 Pfad zur templateDetails.xml
/templates/cassiopeia_extended/templateDetails.xml

       🔧 Datei öffnen und Abschnitt <positions> suchen und Neue Position submenu ergänzen

✅ Jetzt kennt Joomla die Position im Backend

📌 Cursor-Hinweis:

Du musst nichts „aktivieren“, nur korrekt zwischen die <positions>-Tags schreiben.
Die Reihenfolge ist egal – Sauberkeit zählt.

---

       3️⃣ index.php kopieren

       📁 Pfad: /templates/cassiopeia_extended/index.php

Du willst:
submenu direkt unter dem Hauptmenü. also direkt nach dem menu-Include.

Cassiopeia Extended hat KEIN eigenes Seitenlayout.
Es lädt das komplette HTML-Gerüst aus dem Core-Template Cassiopeia.

Kopiere die index.php 

Von:
/templates/cassiopeia/index.php

Nach: 
/templates/cassiopeia_extended/index.php

Ja – du ersetzt damit die bisherige kleine index.php

 

---

4️⃣ Code für die neue Position
in die index.php einfügen

<jdoc:include type="modules" name="menu" />

Achtung beim Einfügen

       ❌ Falsch (irgendwo unten, zufällig):
<jdoc:include type="modules" name="submenu" />

---

Wo ist die richtige Stelle zum Einfügen?

Beispiel (an der richtigen Stelle):

5️⃣ Positionierung submenu
ist jetzt korrekt - 

✔ Submenu erscheint immer unter dem Hauptmenü

 

Modul - Zugriffsebenen

Nach deiser Lektion können Sie:

• ✔ Module gezielt gestalten
• ✔ Modul-CSS sauber & updatefest einsetzen
• ✔ Modulklassen sinnvoll nutzen
• ✔ Module für bestimmte Benutzer sichtbar machen

---

      1️⃣ Wo gehört CSS für Module hin? (sehr wichtig!)

      ❌ FALSCH

• Core-Dateien ändern
• Template-CSS überschreiben

      ✅ RICHTIG (Best Practice)

📍 Pfad (Cassiopeia)
/templates/cassiopeia/css/user.css

📌 Warum?

• updatefest
• übersichtlich
• professionell

 

---

      2️⃣ Modul-Klassen: das wichtigste Werkzeug

      📍 Backend-Pfad
Inhalt → Module → Modul bearbeiten → Erweitert

      Feld:
Modulklasse (Suffix)

Beispiel:
mod-spendenbox

➡ Joomla erzeugt:
<div class="moduletable mod-spendenbox"> 

 

---

3️⃣ Praxisbeispiel 1:
Spendenbox hervorheben

Gestaltung erfolgt immer über Klassen, nicht über IDs.

      🎯 Ziel

• Rahmen
• Hintergrund
• Abstand

      CSS (user.css)

.mod-spendenbox {
     background-color: #FFFACD; /* Lemon Chiffon – helles Gelb */
     border: 2px solid #DAA520; /* Goldenrod – Gold */
     padding: 15px;
     margin-bottom: 20px;
}

 

---

4️⃣ Praxisbeispiel 2:
Modul nur optisch „Sidebar-Stil“

..sidebar .moduletable {
    font-size: 0.95rem;
    line-height: 1.4;
}

📍 Position:

sidebar-left

 

---

5️⃣ Modul-Header gezielt stylen

      Modul-Titel

.moduletable h3 {
     font-size: 1.1rem;
     color: #000000; /* Schwarz */
     font-weight: bold;
     border-bottom: 1px solid #ccc;
}

Verständnisfrage:

Warum nicht inline-CSS?
✅ Trennung von Inhalt & Design

 

---

6️⃣ Module ein-/ausblenden (Design)

@media (max-width: 768px) {
     @media (max-width: 768px) {
          .mod-spendenbox {
               display: none;
     }
}

📌 Mobile First – wichtig!

---

7️⃣Praxisbeispiel: Internes Modul

🎯 Ziel

„Interne Hinweise“ nur für Mitarbeiter

Schritte:

1. Zugriffsebene „Mitarbeiter“ anlegen
2. Benutzer dieser Ebene zuordnen
3. Modul → Zugriffsebene = Mitarbeiter

Merksatz:

Zugriffsebene ≠ Benutzergruppe (wird oft verwechselt!)

✅ Musterlösung

Modulklasse:
 mod-intern

CSS: