Passe dein Cassiopeia Template an

Hier findest du das Template im Joomla Backend

Im Joomla 4 Backend findest du Cassiopeia unter dem Menüpunkt System.

Dort gibt es einen Kasten mit der Überschrift "Templates". Klicke auf Site Template Stile, um eine Liste aller aktuellen Template Stile zu erhalten.

Klicke auf den Titel bzw. Link "Cassiopeia-Default", um die Einstellungen für diesen Stil anzuzeigen.

Template-Stil Einstellungen

Im Reiter "Erweitert" kann man folgende Sachen einstellen (Stand Joomla 4.0.x) :

1) Logo / Brand

  • Brand: Hier kannst du die Anzeige eines Logos bzw. eines Logotextes komplett aktivieren oder deaktivieren
  • Logo: Hier kannst du ein Logo hochladen, wenn du ein svg hochladen möchtest, musst du das Bildformat vorher in den Optionen des Medien-Managers zulassen
  • Titel (alternativ zum Logo): Du kannst hier einen Text eingeben, der statt des Logos angezeigt wird.
  • Stichwort: Bisschen unglücklich übersetzt, ändert sich aber möglicherweise in einer kommenden Sprachversion, ist dies das Eingabefeld für eine Text-Unterzeile unter dem Logo oder dem Logotext.

2) Schriften

Im Schriften-Schema Dropdown kann man die Schriftart des Templates einstellen. Es gibt eine vorbelegte lokale Schriftart, die "Roboto" - diese wird auch vom backend template benutzt. 

Roboto unterstützt die meisten Sprachen und ist sehr leicht lesbar. Sie wird lokal bereitgestellt, da das laden von Schriftarten insbesondere in Deutschland gegen die DSGVO verstößt.

Auf der anderen Seite hat es einen Einfluss auf die Performance bzw. Ladezeit deiner Webseite wenn du Schriften lokal hostest. Daher bietet das Standardtemplate auch zwei externe Varianten an. Diese sind für Deutschland eher nicht ratsam.

Wie man eigene lokale Schriften benutzen kann, dazu komme ich später.

3) Farben

Bei Cassiopeia gibt es zwei verschiedene Farb-Voreinstellungen.
Für Violett wählst du Standard aus, Alternativ is ein bräunliches rot. 

Wie man seine eigenen Farben nutzen kann, erkläre ich später.

4) Layout

  • Layout: Du kannst zwischen Statisch und Fluid wählen. Fluid setzt das Template auf die volle Bildschirmbreite.
  • Sticky Header: Wenn du hier ja auswählst, bleibt der Header beim scrollen oben immer stehen. (Jedoch nur auf dem Desktop)

Der Sticky Header funktioniert immer erst ab einer Bildschirmgröße von 992px

5) Andere Funktionen

Zurück-nach-oben-link: Wähle hier Ja um unten rechts im Template eine Sprungmarke zu erhalten, die deinen Webseitenbesucher an den Seitenanfang führt.

Modul Positionen und Einstellungen

Bevor wir uns ansehen, wie wir Farben und Schriftarten auf der Website ändern können, sehen wir uns an, welche Modulpositionen wir haben und was wir brauchen, um eine Dropdown-Navigation zu erhalten.

So findest du die Modul-Positionen

Du kannst dir die Modulpositionen in der Vorschau anzeigen lassen, indem du auf den Vorschaulink in der Liste der Templatestile klickst. Wenn du ein durchgestrichenes Auge siehst, musst du die Modulvorschau in den Optionen zuerst aktivieren (klicke dazu auf den Optionen Button oben rechts).

Wenn du auf den Vorschaulink klickst, erhältst du eine Vorschau auf deine Seite mit ein paar der verfügbaren Modulpositionen.

Hier habe ich für dich eine komplette Übersicht über die aktuellen Cassiopeia-Modulpositionen vorbereitet.

Module einrichten

Da du nun weißt, welche Modulpositionen dir zur Verfügung stehen, kannst du zwei grundlegende Einstellungen vornehmen, die fast jeder für sein Cassiopeia-Template haben möchte.

Einstellungen des Menü Moduls anpassen

Navigiere im Joomla-Backend zu Inhalt » Site Module und finde dort die Breadcrumbs, das Main Menu und das Login-Formular. Um die Einstellungen für das Hauptmenü zu ändern, klicke Sie auf den Titel bzw. Link Main Menu.

Weise die Modul Position zu

Als Erstes musst du dein Modul der Position menu zuordnen.

Dadurch wird dein Menü oben und in horizontaler Position angezeigt.

Ändere das Menü Layout

Aber wenn du mit der Maus über ein übergeordnetes Element fährst, passiert eigentlich nichts. Du möchtest hier vielleicht ein Dropdown-Menü haben? Um dies zu erreichen, ändere Sie einige weitere Moduleinstellungen:

Im Reiter "Erweitert" des Menü Moduls kannst du Sie im Feld Layout zwischen Collapsible Dropdown oder Dropdown aus den alternativen Layouts der Cassiopeia-Vorlage auswählen

Der Unterschied zwischen diesen Optionen ist in der mobilen Ansicht sichtbar, wo ein Burger-Menü-Symbol angezeigt wird, wenn du das collapsible Dropdown auswählst, und die Menüelemente übereinander gestapelt angezeigt werden, wenn man das normale Dropdown auswählt.

Seiten Header hinzufügen

Wenn du einen hübschen Header, so wie auf den Cassiopeia-Demoseiten haben möchtest, erstellst du ein neues Modul vom Typ "Eigenes Modul".

Modul Einstellungen

  1. Blende den Titel des Moduls aus
  2. Setze das Modul auf die Position banner
  3. Stelle sicher, dass dein Modul veröffentlicht ist
  4. Gebe, wenn du möchtest einen Text im Editorfenster ein
  5. Kreuze bei der Menüzuweisung die Menüpunkte an, an denen du das Modul veröffentlichen möchtest
  6. Im Reiter Optionen wählst du dein Hintergrundbild
  7. Im Reiter Erweitert wählst du unter Layout "Banner" aus.

Das Template an deine Wünsche anpassen.

Das waren die Grundlagen. Um die Cassiopeia-Vorlage mehr an deine Wünsche anzupassen, musst du einige CSS-Stile hinzufügen.

Eine user.css Datei hinzufügen

Wenn du die Farben oder etwas anderes von Cassiopeia ändern möchtest, musst du eine user.css-Datei zum Template-Ordner hinzufügen. Du gelangst zu deinem Template Ordner, wenn du in den Template Stilen auf den Template Namen klickst (In der Spalte Template ganz rechts).

Du kommst auch dort hin indem du im Backend auf System » Site Templates und dann auf Cassiopeia Details und Dateien klickst.

Erstelle eine user.css Datei (falls noch nicht vorhanden)

  1. Klicke oben auf den "Neue Datei" Button
  2. Benenne die Datei user im Feld Dateiname (siehe Abbildung unten)
  3. Wähle den Dateityp css
  4. Klicke auf den Ordner css auf der linken Seite - achte unbedingt darauf, dass der Ordner auch wirklich markiert ist!
  5. Klicke auf "Erstellen"
  6. Überprüfe, ob sich die Datei user.css wirklich im Ordner css befindet (ein häufiger Fehler, der gemacht wird)

Du solltest jetzt eine user.css-Datei in deinem css-Ordner haben. Joomla erkennt automatisch, dass du diese Datei hinzugefügt hast und liest deine CSS-Anweisungen aus dieser Datei aus.

Einige CSS Basics

Bevor ich weitermache, müssen wir ein kleines CSS-Kardio-Training machen.

Tut mir leid, aber es ist wirklich wichtig, dass du zumindest die wichtigsten Grundlagen von CSS kennst, um in der Welt der Templates überleben zu können.

Ich verspreche dir, ich halte es so einfach und kurz wie möglich.

CSS - Was ist das eigentlich?

Kurz gesagt, verwendest du CSS (Cascading Style Sheets), um zu definieren, wie etwas aussehen soll.

Es gibt viele Befehle, die dir bei der Gestaltung deiner Inhalte und deines Templates helfen.

Eine CSS Anweisung sieht immer so aus:

CSS kann auf verschiedene Arten angesprochen werden.

Inline Stile

Wenn du einen Text direkt in deinem Joomla WYSIWYG-Editor einfärbst und in den HTML-Modus wechselst, wirst du feststellen, dass deine eingefärben Schriften im Code so in etwa aussehen:

Hier wird der CSS Befehl als sogenannter Inline Stil in einem Attribut eingefügt. Du solltest sowas nur in seltenen Ausnahmefällen machen. Es ist besser, CSS Anweisungen in eine eigene Datei zu schreiben. Und an dieser Stelle kommt unsere user.css Datei ins Spiel.

Wie spricht man ein spezielles Element mit CSS an?

html Elemente

Es gibt Html-Elemente, das ist zum Beispiel eine Überschrift, ein Absatz oder eine Liste. Elemente werden angesprochen, indem der Name des Elements direkt in die CSS-Datei eingefügt wird. Zum Beispiel eine h1-Überschrift oder ein Link <a>


IDs

Es gibt HTML-Elemente, die eine ID haben. Im Html-Code würde das folgendermaßen aussehen.

Für jemanden, der HTML schreibt, ist es wichtig zu wissen, dass eine ID nur einmal auf der gesamten Seite vorkommen darf. In unserem Beispiel darf es also kein anderes Element mit id="main" geben.

Du steuerst den Stil eines Elements mit einer ID in CSS, indem du eine Raute (bzw. einen Hash) vor die ID schreibst.


Klassen

Es gibt HTML-Elemente, die eine oder mehrere Klassen haben. Im Code würde das folgendermaßen aussehen:

Du steuerst eine Klasse in CSS, indem du einen Punkt vor die Klasse schreibst.

Du kannst auch Klassen miteinander verketten, indem du sie beide hintereinander auflistest.

Zum Beispiel:


Kombiniere Elemente, IDs und Klassen

Beispiel

<p id="special" class="meine-klasse">
<h1>
Überschrift
</h1>
</p>

Du kannst CSS-Anweisungen kombinieren. Im obigen Codebeispiel haben wir ein HTML-Element für einen Absatz (p) mit der ID special und der Klasse meine-klasse. Darin befindet sich eine Überschrift mit dem HTML-Element h1 - Du kannst den Absatz auf verschiedene Arten ansprechen.

 

Beispiel:

p {
color: #ff0000;
}

Auf diese Weise färbst du alle Absätze auf der gesamten Webseite rot.
Aber vielleicht möchtest du das nicht tun?

Dann kannst du folgendes schreiben:

.meine-klasse {
color: #ff0000;
}

Dadurch werden alle Elemente mit der Klasse meine-klasse auf der Webseite rot gefärbt. 

Aber vielleicht möchtest du das nicht tun?

p.meine-klasse {
color: #ff0000;
}

Durch die Benennung des HTML-Elements und der Klasse färbst Du alle Absätze mit der Klasse meine-klasse rot.

Was machen wir mit unserer h1-Überschrift innerhalb des Absatzes?

Beispiel:

p.meine-klasse h1 {
color: #ff0000;
}

Indem du ein Element, eine Klasse oder eine ID hinter einem Leerzeichen hinter ein anderes Statements schreibst, sprichst du das Element innerhalb des anderen Elements an.

Mit dieser Anweisung färbst du also alle h1-Überschriften, die sich innerhalb eines Absatzes mit der Klasse meine-klasse befinden, rot.


Pseudo Elemente

Wenn du ein Element ändern möchtest, wenn man mit der Maus darüber fährt, kannst du das mit dem Befehl :hover tun.

.btn-primary {
  background: rgba(119,9,121,1);
}

.btn-primary:hover {
  background: rgba(0,212,255,1);
}

Es gibt natürlich noch mehr Pseudo-Elemente, aber das war's erst einmal mit den Grundlagen von CSS. Ich denke, es ist wichtig, zumindest dies zu wissen und dann dein Wissen durch deine spezifischen Wünsche und Anforderungen zu erweitern.

Beliebte CSS Anweisungen und hilfreiche Links.

Hintergrund Farbe

background: rgb(2,0,36);

 

Hintergrund Verlauf

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);

https://cssgradient.io/

 

Innenabstand

padding: 20px

https://www.w3schools.com/css/css_padding.asp

Innenabstand nach oben, rechts, unten, links

padding: 20px 10px 20px 0px;

 

Innenabstand nach rechts

padding-right: 20px

 

Außenabstand

margin: 20px;

https://www.w3schools.com/css/css_margin.asp

Außenabstand nach nach oben, rechts, unten, links

margin: 20px 10px 20px 0px;

 

Außenabstand nach rechts

margin-right: 20px

 

Schriftfarbe

color: #ff0000;

 

Schrift-Größe

font-size:18px;

 

Schriftarten

font-family: "Times New Roman", sans-serif;

 

https://www.w3schools.com/css/css_font.asp

 

Schrift-Dicke

font-weight: bold;

 

Box Schatten

box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);

https://cssgenerator.org/box-shadow-css-generator.html

 

 

Text Schatten

text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);

https://css3gen.com/text-shadow/

Rand / Außenlinie

border: 2px solid #ff0000;

https://www.w3schools.com/css/css_border.asp

 

Beispiel user.css Datei mit Kommentaren for Cassiopeia

/* Schrift aus Google importieren - Gehe auf fonts.google.com, wähle eine Schrift aus und suche dort den Import Befehl */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

/* Grundsätzliche Template Farben und Einstellungen */

:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
}


/* Schrift auf der Seite nutzen: Auf Google findest du auch die CSS Anweisung für die Nutzung der Schrift. Wenn du diese in das body element einfügst dann wird die Schrift auf der ganzen Webseite genutzt. */

body {
      font-family: 'Georama', sans-serif;
}

/* Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst diese also mit .header an */

.header {
    background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}

/* Das Dropdown-Menu im Menu färbst du mit der Klasse .metismenu.mod-menu .mm-collapse ein */

.metismenu.mod-menu .mm-collapse {
  background: #475BAF;
}

/* Die Links im Dropdown Menu musst du dann auch einzeln ansteuern */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}

/* Module haben die Klasse card, man steuert sie also mit .card an - wenn du nur ein bestimmtes Modul ansteuern willst, kannst du dem Modul in den Einstellungen eine eigene CSS Klasse geben und dann damit ansteuern  */

.card {
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}

/* Module sind auf verschiedenen Modulpositionen im Cassiopeia Template bekommen dann die Module zusätzlich zu card auch die Position als Klassennamen, zum Beispiel main-top - wenn du also alle Module auf Main Top ändern möchtest, nimmst du .main-top.card */

.main-top.card {
   background: #e1e9f5;
}


/* Überschriften sind html Elemente, die Hauptüberschrift ist eine h1, dann kommt h2, h3, h4 usw. Ein html Element steuerst du an indem du einfach den Namen davorschreibst */

h1 {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  color: rgba(119,9,121,1);
}

/* In Joomla haben die meisten Buttons die Klasse btn-primary - im Element Inspektor kannst du nachsehen ob der Button, den du einfärben willst wirklich diese Farbe hat.
*/

.btn-primary {
  background: rgba(119,9,121,1);
}

/* Wenn du etwas einfärben möchtest, nur wenn man mit der Maus drüber fährt dann schreibst du :hover dahinter
*/

.btn-primary:hover {
  background: rgba(0,212,255,1);
} 

/* In Joomla haben alle Beitragsbilder die Klasse item-image, wenn du nur ein bestimmtes Bild einsteuern möchtest, dann muss du dem Bild im Beitrag eine eigene CSS Klasse geben.
*/

.item-image {
  border: 2px solid #ff0000;
}


/*Laufen dir auf der Webseite icons über den Weg kannst du diese einzeln einfärben*/

.icon-user {
  
}

/* oder du färbst mit dieser besonderen Anweisung alle Icon ein*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
  color: #403678;
}

/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an */

.footer {
    background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}

CSS Grid und Cassiopeia

Neben Bootstrap 5 verwendet Cassiopeia die moderne css-Grid-Technik, um das Layout der Website zu definieren. Um das Gesamtlayout der Website zu ändern, kannst du die css-Grid-Anweisungen auch mit deiner user.css-Datei überschreiben.

Du kannst außerdem bestehende css-Grid-Klassen von cassiopeia verwenden, um das Layout deiner Blog-Ansicht oder Ihres Artikels zu definieren.

Einstellungen für den Menüeintragstyp Kategorie Blog

Der Menüpunkt Typ Kategorie Blog hat einen Parameter zum Einfügen einer oder mehrerer CSS-Klassen. Die Klassen sind bereits in der Cassiopeia-Vorlage definiert und können sofort verwendet werden. Du kannst eine oder mehrere der aufgelisteten Klassen in das Feld führende Artikelklasse oder Artikelklasse einfügen.

Spalten

  • columns-2
  • columns-3
  • columns-4
  • masonry-2
  • masonry-3
  • masonry-4

Styling

  • boxed

Bild Position

  • image-left
  • image-right
  • image-bottom

Abwechselnde Bildposition

  • image-alternate
    Bei jedem zweiten Eintrag wird die Bildposition gewechselt. Wenn ein Bild auf der linken Seite eingestellt ist, wird das Bild auf der rechten Seite bei jedem zweiten Eintrag angezeigt. Wenn ein Bild unten eingestellt ist, wird das Bild bei jedem zweiten Eintrag oben angezeigt.

Quelle

Die Erklärung dazu findest du hier: https://github.com/joomla/joomla-cms/pull/18319

Beitragsbilder positionieren

Ein Joomla-Beitrag hat einen Parameter zum Einfügen einer oder mehrerer CSS-Klassen. Die Klassen sind bereits in der Cassiopeia-Vorlage definiert und einsatzbereit.

Bild Position

  • float-start
  • float-end

Um diese Klassen bei allen Beiträgen global einzusetzen gehst du auf Inhalt » Optionen » Bearbeitungs-Layout und fügst dort die Klassen ein, die du im "Full Text Image Class" verwenden willst.

Das CSS Grid beherrschen

Für die CSS-Veteranen ist das CSS-Grid eine recht neue Technik - wenn du es noch nicht gelernt hast, ist es wirklich an der Zeit, sich damit zu beschäftigen. CSS-Grid wird von allen modernen Browsern unterstützt und gibt dir die unbegrenzte Freiheit, das Layout und die Positionierung der Elemente deiner Website zu definieren.

Lerne CSS Grid

Kostenloser CSS Grid Online Kurs von Wes Bos!

https://cssgrid.io/

Eine gute Referenz für CSS-Grid im Allgemeinen findest du hier:

https://css-tricks.com/snippets/css/complete-guide-grid/

Hinzufügen einer benutzerdefinierten JavaScript-Datei zum Template

Genauso wie du deine user.css-Datei im css-Ordner deines Templates hinzugefügt hast, kannst du eine benutzerdefinierte Javascript-Datei hinzufügen, indem du eine user.js Datei im js-Ordner erstellst.

Vielen Dank an Viviana Menzel, an Astrid Günther und Hagen Graf für Eure Cassiopeia Hilfe Seiten die es mir ermöglicht haben dieses Tutorial zu schreiben. Nicht zu vergessen das ganze Cassiopeia Team für Eure harte Arbeit!

Neuerungen in Joomla 4.1

Ab Joomla 4.1 + wird es die Möglichkeit geben ein Haupt-Template mit einem sogenannten "Childtemplate" zu überschreiben.

Teste, kommentiere und diskutiere mit! Du kannst dich dazu einbringen die Zukunft von Joomla und dessen Features und Verbesserungen mit zu bestimmen. Logge dich bei GitHub ein um ein Teil von Joomlas Zukunft zu sein.