CMS - Arbeitsablauf
Schritt 1: Planung
- Ziel der Website festlegen
- Zielgruppe definieren
- Inhalte planen (Texte, Bilder, Seiten)
- Struktur überlegen (Menüs, Kategorien)
👉 Beispiel:
Startseite – Über uns – Leistungen – Kontakt
Schritt 2: Installation des CMS
- Webserver (Apache / Nginx)
- PHP & Datenbank (MySQL / MariaDB)
- CMS installieren
Joomla Backend:
https://www.meine-domain.de/administrator
Schritt 3: Grundkonfiguration
- Sprache einstellen
- Benutzer anlegen
- Benutzerrechte vergeben
- Sicherheitseinstellungen prüfen
👉 Wichtig:
Mehrbenutzerbetrieb & Rechteverwaltung
Schritt 4: Template (Design) auswählen
- Template bestimmt Layout und Farben
- Inhalte bleiben unverändert
Joomla Template-Pfad:
/templates/cassiopeia_extended/
Eigene CSS-Datei:
/templates/cassiopeia_extended/css/user.css
Schritt 5: Inhalte erstellen
- Kategorien anlegen
- Beiträge erstellen
- Bilder einfügen
- Texte formatieren
👉 Inhalt = Text + Bild + Struktur
Schritt 6: Menüs erstellen
- Menü anlegen
- Menüeinträge erstellen
- Inhalte verknüpfen
👉 Ohne Menü sind Inhalte nicht erreichbar
Schritt 7: Erweiterungen nutzen
- Komponenten (z. B. Kontaktformular)
- Module (z. B. Menü, Suche)
- Plugins (Hintergrundfunktionen)
Schritt 8: Testen & Veröffentlichen
- Darstellung prüfen
- Links testen
- Mobilansicht prüfen
- Inhalte freigeben
Schritt 9: Pflege & Wartung
- Updates durchführen
- Inhalte aktuell halten
- Backups erstellen
- Sicherheit überwachen
CMS-Arbeitsablauf – Kurzform -
Planung → Installation → Konfiguration → Design → Inhalte → Menüs → Erweiterungen → Test → Wartung
Typische Verständnisfragen
Frage 1:
Wann ist Joomla gegenüber WordPress im Vorteil?
Antwort:
Bei komplexen Websites mit mehreren Benutzern und hohen Sicherheitsanforderungen.
Frage 2:
Warum ist die Planungsphase vor der Installation wichtig?
Antwort:
Damit Struktur, Inhalte und Zielgruppe klar definiert sind.
Frage 3:
Warum werden eigene CSS-Anpassungen nicht direkt im Template geändert?
Antwort:
Damit Updates das Design nicht überschreiben.
Perfekte KI-Prompts für Joomla & CSS
(einfach kopieren & anpassen)
Prompt 1: Einfache Designänderung
Ich nutze Joomla 6 mit dem Template cassiopeia_extended.
Bitte erstelle mir CSS-Code, um die Hintergrundfarbe auf #f5f5f5 (Hellgrau) und die Überschriften auf #0d6efd (Blau) zu setzen.
Sag mir außerdem, in welche Datei ich den Code speichern muss.
Prompt 2: Designproblem erklären
Meine Joomla-Website wirkt unruhig und schlecht lesbar.
Welche typischen CSS-Ursachen gibt es und welche einfachen Änderungen empfiehlst du für Einsteiger?
Prompt 3: CSS erklären lassen
Erkläre mir diesen CSS-Code Schritt für Schritt in einfachen Worten:
h2 { margin-bottom: 20px; }
Prompt 4: Mobile Optimierung
Meine Joomla-Website sieht auf Smartphones zu klein aus.
Bitte erstelle mir einfache CSS-Regeln für bessere Lesbarkeit auf mobilen Geräten und erkläre sie kurz.
Prompt 5: Fehler finden
Ich habe folgenden CSS-Code in Joomla eingefügt, aber er funktioniert nicht.
Bitte überprüfe ihn und erkläre mir den Fehler verständlich:
body {
background color: #ffffff;
}Prompt 6: Farben vorschlagen
Bitte schlage mir ein ruhiges, professionelles Farbschema für eine Joomla-Firmenwebsite vor (Hintergrund, Text, Überschriften, Links) und nenne die Farbwerte und Farbnamen.
Prompt 7: Updatesicher arbeiten
Ich nutze Joomla 6 mit cassiopeia_extended.
Wo soll ich eigene CSS-Anpassungen speichern, damit sie bei Updates nicht verloren gehen?
⚠️ Wichtiger Sicherheitstipp
- Immer nur in user.css arbeiten
- Kleine Änderungen
- Nach jeder Änderung testen
- Keine Angst: CSS kann nichts „kaputt machen“
🎯 Praxis-Fazit
👉 Du musst kein CSS lernen.
👉 Du musst nur wissen, was du willst – KI macht den Code.
👉 Joomla + Standardtemplate + KI = sehr gutes Ergebnis.
10 CSS-Regeln für Joomla-Einsteiger
Mit wenigen, gezielten CSS-Regeln lassen sich Lesbarkeit, Struktur und Design einer Joomla-Website deutlich verbessern, ohne tiefgehende Programmierkenntnisse.
Template: Joomla 6 · Template: cassiopeia_extended)
👉 Speicherort für alle Beispiele:
/templates/cassiopeia_extended/css/user.css
1. Hintergrundfarbe der Website ändern
body {
background-color: #ffffff; /* Weiß */
}
Nutzen: Ruhiges, sauberes Grundlayout.
2. Textfarbe allgemein festlegen
body {
color: #212529; /* Dunkelgrau */
}
Nutzen: Bessere Lesbarkeit als reines Schwarz.
3. Überschriftenfarbe (h1–h3)
h1, h2, h3 {
color: #0d6efd; /* Blau */
}
Nutzen: Einheitliches, professionelles Erscheinungsbild.
4. Schriftgröße für Fließtext anpassen
p {
font-size: 16px; /* Standardgröße */
}
Nutzen: Optimale Lesbarkeit auf Desktop & Mobil.
5. Zeilenabstand verbessern
p {
line-height: 1.6; /* Angenehmer Zeilenabstand */
}
Nutzen: Text wirkt ruhiger und übersichtlicher.
6. Linkfarbe ändern
a {
color: #0d6efd; /* Blau */
}
Nutzen: Klare Erkennbarkeit von Links.
7. Linkfarbe beim Darüberfahren (Hover)
a:hover {
color: #084298; /* Dunkelblau */
}
Nutzen: Besseres Nutzerfeedback.
8. Abstand unter Überschriften
h2 {
margin-bottom: 15px; /* Abstand unten */
}
Nutzen: Strukturierter Seitenaufbau.
9. Inhaltsbereich optisch absetzen
.container {
background-color: #f8f9fa; /* Sehr helles Grau */
}
Nutzen: Inhalte heben sich vom Hintergrund ab.
10. Mobile Schriftgröße leicht erhöhen
@media (max-width: 768px) {
body {
font-size: 17px; /* Größer auf Smartphones */
}
}
Nutzen: Gute Lesbarkeit auf kleinen Bildschirmen.
Farbschemata für Joomla-Websites
Farb-Faustregel
Hintergrund hell – Text dunkel – Überschriften akzentuiert – Links klar erkennbar.
CSS-Speicherort für alle Beispiele:
/templates/cassiopeia_extended/css/user.css
Farbschema 1: Klassisch & professionell
(Firmen, Vereine, Bildung)
| Bereich | Farbwert | Farbname |
|---|---|---|
| Hintergrund | #ffffff | Weiß |
| Text | #212529 | Dunkelgrau |
| Überschriften | #0d6efd | Blau |
| Links | #0d6efd | Blau |
| Hover | #084298 | Dunkelblau |
CSS-Beispiel
body {
background-color: #ffffff; /* Weiß */
color: #212529; /* Dunkelgrau */
}
h1, h2, h3 {
color: #0d6efd; /* Blau */
}
a {
color: #0d6efd; /* Blau */
}
a:hover {
color: #084298; /* Dunkelblau */
}
Warum gut?
neutral, seriös, sehr gut lesbar.
Farbschema 2: Ruhig & modern
(Dienstleister, Coaching, Gesundheit)
| Bereich | Farbwert | Farbname |
|---|---|---|
| Hintergrund | #f8f9fa | Sehr helles Grau |
| Text | #343a40 | Anthrazit |
| Überschriften | #198754 | Grün |
| Links | #198754 | Grün |
| Hover | #146c43 | Dunkelgrün |
CSS-Beispiel
body {
background-color: #f8f9fa; /* Sehr helles Grau */
color: #343a40; /* Anthrazit */
}
h1, h2, h3 {
color: #198754; /* Grün */
}
a {
color: #198754; /* Grün */
}
a:hover {
color: #146c43; /* Dunkelgrün */
}
Warum gut?
beruhigend, vertrauensvoll, modern.
Farbschema 3: Kontrastreich & barrierearm
(Information, Behörden, Schulung)
| Bereich | Farbwert | Farbname |
|---|---|---|
| Hintergrund | #ffffff | Weiß |
| Text | #000000 | Schwarz |
| Überschriften | #003366 | Dunkelblau |
| Links | #0056b3 | Mittelblau |
| Hover | #003d80 | Dunkelblau |
CSS-Beispiel
body {
background-color: #ffffff; /* Weiß */
color: #000000; /* Schwarz */
}
h1, h2, h3 {
color: #003366; /* Dunkelblau */
}
a {
color: #0056b3; /* Mittelblau */
}
a:hover {
color: #003d80; /* Dunkelblau */
}Warum gut?
sehr gute Lesbarkeit, barrierearm, prüfungssicher.
CSS lesen lernen in 30 Minuten
CSS beschreibt das Erscheinungsbild einer Website.
Einfache CSS-Regeln lassen sich lesen, verstehen und sicher anwenden, ohne selbst Programmierer zu sein.
(kein Schreiben, nur Verstehen!)
Minute 0–5: Was ist CSS überhaupt?
CSS beschreibt wie etwas aussieht, nicht was es ist. h1 {
color: #0d6efd;
}
- h1 → was? (Überschrift)
- color → was ändern?
- #0d6efd → womit? (Blau)
Minute 5–10: Aufbau einer CSS-Regel
selektor {
eigenschaft: wert;
}👉 Lesereihenfolge:
„Für selektor gilt eigenschaft mit dem Wert wert.“
Minute 10–15: Die 10 wichtigsten Begriffe (merken!)
| Begriff | Bedeutung |
|---|---|
| color | Textfarbe |
| background-color | Hintergrundfarbe |
| font-size | Schriftgröße |
| line-height | Zeilenabstand |
| margin | Außenabstand |
| padding | Innenabstand |
| text-align | Textausrichtung |
| a:hover | Link beim Darüberfahren |
| @media | Mobile Ansicht |
| px | Pixel |
Minute 15–20: Kommentare lesen
p {
font-size: 16px; /* Standardgröße */
}👉 Bedeutet:
👉 Alles zwischen /* ... */ ist nur Erklärung, kein Code.
Minute 20–25: Mobile Regeln erkennen
@media (max-width: 768px) {
body {
font-size: 17px;
}
}👉 Bedeutet:
„Wenn der Bildschirm kleiner als 768 Pixel ist, dann …“
Minute 25–30: Gefahrlos testen
- CSS in user.css
- Seite neu laden
- Gefällt es nicht → löschen
- Nichts kaputt 😉
✅ Fazit
- Du musst CSS nicht schreiben
- Du musst CSS nur grob lesen können
- KI macht den Rest