Zum Hauptinhalt springen

Wie man benutzerdefinierte CSS und JS Dateien für das Cassiopeia Template in Joomla! 4.x und 5.x erstellt

Alexander Fischer
04. Juli 2025

Wenn man das „Cassiopeia“-Template von Joomla! verwenden und benutzerdefinierte CSS- und JS-Dateien erstellen möchte, muss man einige kleine Schritte beachten.

Grundsätzlich könnten die Änderungen auch direkt in Cassiopeia vorgenommen werden, aber bei einem Joomla!-Update würden diese überschrieben.

Eine wichtige Anmerkung gleich zu Beginn: Die zu erstellende Datei muss „user.css” bzw. „user.js” heißen, nicht „custom.css” oder „custom.js”. Das Template „Cassiopeia” lädt die „user.css” bzw. „custom.css” automatisch, sofern diese Dateien existieren. Die CSS-Datei wird als letzte CSS-Datei vom Template, aber noch vor den CSS-Dateien von Erweiterungen und Komponenten, geladen.

Benutzerdefinierte CSS-Datei für das Template „Cassiopeia” erstellen

  1. Zunächst loggen wir uns im Admin-Dashboard ein.
  2. Anschließend wechseln wir zu „System” > „Site Templates” (im Bereich „Templates”).
  3. Nun öffnen wir die Vorlage „Cassiopeia” oder ihre kopierte Version. Klicken Sie beispielsweise auf „Cassiopeia Details und Dateien”.
  4. Klicken Sie anschließend oben auf die Schaltfläche „Neue Datei”.
  5. Es erscheint ein kleines Fenster, in dem Sie die Einstellungen vornehmen können.
  6. Anschließend muss man links auf „/media/templates/site/cassiopeia/css“ klicken, um das richtige Verzeichnis aufzurufen.
  7. In das Feld „Dateiname“ gibt man nun „user“ ein. Im Feld „Dateityp” wählt man anschließend „.css” aus.
  8. Alternativ kann man auch eine Datei hochladen, die dann jedoch „user.css“ heißen muss.
  9. Schließlich nicht vergessen, auf die Schaltfläche „Erstellen” zu klicken.

Jetzt hat Joomla! eine leere Datei namens „user.css” erstellt.

Zum Bearbeiten klickt man links auf media/templates/site/cassiopeia/ -> css -> user.css.

Erstellen Sie eine benutzerdefinierte JS-Datei für das Template „Cassiopeia”

  1. Zunächst loggen wir uns im Admin-Dashboard ein.
  2. Anschließend gehen Sie zu System > Site Templates (im Bereich Templates).
  3. Nun muss die Vorlage „Cassiopeia” oder ihre kopierte Version geöffnet werden. Klicken Sie zum Beispiel auf „Cassiopeia Details und Dateien”.
  4. Klicken Sie als Nächstes oben auf die Schaltfläche „Neue Datei”.
  5. Es erscheint ein kleines Fenster, in dem die Einstellungen vorgenommen werden können.
  6. Klicken Sie anschließend links auf „/media/templates/site/cassiopeia/js“, um das richtige Verzeichnis aufzurufen.
  7. In das Feld „Dateiname“ gibt man nun „user“ ein. Im Feld „Dateityp” wählt man anschließend „.js” aus.
  8. Wenn Sie alternativ eine Datei hochladen möchten, muss diese „user.js” heißen.
  9. Schließlich klickt man auf die Schaltfläche „Erstellen”.

Jetzt hat Joomla! eine leere „user.js“-Datei erstellt.

Zum Bearbeiten klicken Sie links auf media/templates/site/cassiopeia/ -> js -> user.js.

Weitere Fragen zu Joomla! Templates

Wenn Sie noch weitere Fragen haben oder eine Beratung wünschen, können Sie gern meine Hilfe in Anspruch nehmen. Rufen Sie mich einfach unter: +49-(0)-5523-952 89 98 an, schreiben eine E-Mail an Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein. oder nutzen Sie das Kontaktformular.

Neuste Beiträge