Ein Tutorial zur Verwendung des Cassiopeia-Templates für Joomla 4 - Allgemeines zu Cassiopeia

Ändere diesen Beitrag

Joomla ist ein Open Source Content Management System, kurz CMS, zur Erstellung von Websites. Joomla 4 bezieht sich dabei auf eine beliebige Version der Reihe 4.x.x.

Eine Joomla-Website setzt eine bestimmte Umgebung voraus. Ein Server muss die Mindestanforderungendownloads.joomla.org/de/technical-requirements-de für eine Joomla-Installation erfüllen. Achte insbesondere auf unterstützte MySQL oder PostgreSQL-Datenbankversionen, PHP-Version und unterstützte Webserver. Wichtig ist auch, dass dein Hosting-Account über den Zugriff auf die Datenbank verfügt, sowie Zugriff auf das Dateisystem hat, um die Joomla-Installationsdateien hochzuladen und zu entpacken.

Joomla kann auch auf einem lokalen Computer installiert werden, solange dieser über die notwendigen Voraussetzungen verfügt. Für Anfänger empfiehlt sich eine leicht zu installierende Distribution, die Apache, MariaDB und PHP enthält. In Frage kommen hierfür WAMPheise.de/download/product/wampserver-56697, LAMPde.wikipedia.org/wiki/lamp_(softwarepaket) oder XAMPapachefriends.org/de/index.html. Eine lokale Installation wird oft verwendet, um das Joomla-System zu erlernen und um neue Seiten zu entwickeln, bevor sie live ins Netz gehen.

Cassiopeia

Joomla 4 kommt mit einem Frontend-Templates und einem Administrator-Templates. Das Frontend-Template bestimmen, was der Besucher sieht. Das Administrator Template wirkt im Backend, also dem Ort, an dem die Administratoren Inhalte erstellen, Einstellungen ändern, Benutzer verwalten, Erweiterungen für zusätzliche Funktionen hochladen.

Cassiopeia ist das Frontend-Template. Der Ordner Cassiopeia und die dazugehörigen Dateien befinden sich im Joomla 4 Template-Verzeichnis. Die Cassiopeia Dateien enthalten den notwendigen Programmcode und die Stile für eine barrierefreie und responsive Website.

Nachfolgend beschreibe ich meine Erfahrungen mit dem Cassiopeia Template. Ich zeige wie ich Änderungen durchführte, um Cassiopeia an meine eigenen Bedürfnisse anzupassen.

Was ist ein Content Management System?

Ein CMS ist eine Benutzeroberfläche zur Erstellung von Websites. Ein CMS stellt die Webseite aus Inhalten zusammen, die in einer Datenbank oder anderen Dateien enthalten sind.

Das CMS erleichtert den Zugriff auf die Datenbank. In der Regel bietet es eine benutzerfreundliche Oberfläche. Hier können Inhalte erstellt und das Erscheinungsbild der Website manipuliert werden. Dabei sind keine PHP oder SQL Kenntnisse erforderlich. Wer das Aussehen der Website im Frontend verändern möchte sollte wissen, wie man HTML und CSS benutzt. Je tiefer das Wissen in diesen Bereichen, desto einfacher sind das Layout, die Farben und die Schriftarten zu individualisieren. Es ist auch sehr praktisch, mit Diagnosetools wie den Entwicklerwerkzeugenhttps://de.wikipedia.org/wiki/wikipedia:technik/browser/entwicklerwerkzeuge eines Browsers vertraut zu sein.

Mit einem Content Management System ist es möglich unkompliziert über einen Webbrowser alle Informationen einer Website zu ändern. Es ist nicht erforderlich mühsam statische Internetseiten zu erzeugen und diese dann auf den Webserver zu kopieren. Dieser große Vorteil hat einen entscheidenden Nachteil. Content Management Systeme erstellen die Website dynamisch mit Hilfe von Skripten. Manche dieser Skripte sind alt und enthalten Code, der heute nicht mehr so geschrieben werden würde. Deshalb findet man immer wieder mehr oder weniger große Sicherheitslücken. Es ist zwingend, dass ein CMS auf dem neuesten Stand gehalten wird und Aktualisierungen zeitnah installiert werden!

Joomla 4 ist ein CMS, das PHP und eine Datenbank zur Erstellung Websites verwendet.

Was ist ein Joomla Template?

Ein Template verwaltet das Erscheinungsbild der Website. Dazu gehören die Schriftarten, die Farben, das Layout und spezielle Effekte der Website. Im Falle von Joomla kombiniert das Template Styling und Inhalte aus der Datenbank. Das Template verwendet HTML, CSS, JavaScript und PHP, um den Inhalt zusammenzustellen und sein Aussehen zu bestimmen.

Das Front-End-Template ist das Gerüst, das den geschriebenen Inhalt, die Bilder, die Navigation und andere Module zusammenstellt und anzeigt. Es befindert sich im Unterverzeichnis templates. Das Administrations-Template stellt die Benutzeroberfläche für die Website-Administratoren zusammen und du findest es im Unterverzeichnis administrator\templates

Ein Joomla Template beinhaltet die Datei index.php, in der alles zusammenläuft. Jede Seite wird mit Hilfe dieser einen Hauptdatei erstellt. Diese Datei wiederum verwendet viele andere Dateien der Joomla-Installation für die Formatierung. Es gibt PHP-Dateien, die die Anzeige von speziellen Inhalten verwalten. Die Datei index.php des Templates beinhaltet das HTML-Gerüst für das Layout der Webseiten und arbeitet mit den anderen Dateien Hand in Hand.

Das Styling des Templates erfolgt mit Hilfe von CSS-Stylesheets. Je nach Template gibt es ein oder mehrere Stylesheets, die mit dem Template verbunden sind. Das Stylesheet bestimmt die Farben, Schriftarten und das Layout der Webseite. Es wird im Falle von Cassiopeia über Sasssass-lang.com/ generiert. Wenn du Cassiopeia anpassen möchtest, reicht es aus, wenn dich mit CSS auskennst. Sass-Kenntnisse sind nicht zwingend, sondern erleichtern lediglich die Arbeit.

Eine Joomla Installation wird mit dem Frontend Template Cassiopeia sowie dem Backend-Template Atum ausgeliefert.

Es gibt viele andere Templates von Drittanbietern, die für Joomla verfügbar sind. Einige 3rd-Party-Templates sind kostenlos, andere sind kostenpflichtig. Die Verwendung eines Templates eines Drittanbieters kann viele Stunden an Styling und Dateimanipulation ersparen, um das gewünschte Aussehen und Layout für Ihre Seite zu erhalten. Nachteilig ist, dass es von dem Anbieter der Vorlage abhängig macht, wenn wir Support benötigen oder die Website aktualisieren müssen. Cassiopeia wird mit Joomla aktuell gehalten!

Erwähnenswertes zu Cassiopeia?

Cassiopeia ist das Standardtemplate, welches wir unmittelbar nach der Erstinstallation von Joomla sehen. Cassiopeia wird von der Joomla-Community entwickelt.

Cassiopeia ist ein einfaches Template, mit einem Minimum an Styling, das als Grundlage für eine individuelle Website dient. Einige Anpassungen am Layout sind unkompliziert, während andere Änderungen gute Kenntnisse von HTML und CSS erfordern.

Joomla Templates von Drittanbietern werden an verschiedenen Stellenforum.joomla.de/thread/69-template-gesucht-joe-s-liste/ im Internet angeboten. Es gibt kostenlose und solche, die kommerziell vertrieben werden. Wenn du keine bestimmte Vorstellungen davon hast, wie deine Website aussehen soll, empfehle ich dir, Drittanbietertemplates anzuschauen. Viele bieten eine Oberfläche, die mit relativ wenig Styling oder Änderungen sofort einsatzbereit ist. Manche verfügen über zusätzliche Funktionen, die über die Oberfläche des Template-Managers steuerbar sind.

Wer mit seiner Joomla-Website unabhängig sein eigenes Desing umsetzten möchte, baut meiner Meinung nach idealerweise auf Cassiopeia auf. Kenntnisse in HTML und CSS sind hilfreich, um das Template zu modifizieren. Ein Verständnis von PHP und JavaScript ist ebenfalls ein Vorteil.

Das Cassiopeia Template hat Einstellungen und Optionen, auf die wir über den Template Manager im Template Manager von Joomla zugreifen können. Diese Einstellungen ermöglichen das Ändern von

  • Logo
  • Titel
  • Tagline / Stichwort
  • Fonts Scheme / Schrift Schema
  • Colour Theme / Template Farbe
  • Layout
  • Sticky Header
  • Back-to-top-Link / „Zurück nach oben“ Link

Die Ansicht des Menüpunktes Templates | Edit Style im Joomla Administrationsbereich

Abgesehen von diesen Einstellungen ist für alle Änderungen das Bearbeiten der Dateien erforderlich.

Cassiopeia verwendet Bootstrap 5 als Gerüst der Site. Dieses bestimmen die Breite der Spalten und ermöglichen eine responsive Website.

Cassiopeia sammelt alle Stile in einer CSS-Stylesheet-Datei mit dem Namen template.min.css. Dies ist die minifizierte Version der Datei template.css.

Das Minifizieren von CSS- und JavaScript-Dateien ist eine von vielen Stellschrauben, um die Ladegeschwindigkeit deiner Webseite zu optimieren und Inhalte zu verschleiern.

Alle Styles die standardmäßig genutzt werden sind in dieser Datei enthalten, einschließlich der @media-Queries für unterschiedliche Bildschirmgrößen. Um diese Standard-Stile zu ändern, ist es erforderlich, ein eigenes CSS-Stylesheet zu erstellen. Diese eigene Stildatei überschreibt die Cassiopiea Definitionen so wie wir es für unsere Website wünschen. Cassiopeia ist so geschrieben, dass es ein Stylesheet namens user.css erkennt, welches sich im Unterverzeichnis CSS der Cassiopeia-Dateien befindet. Die Verwendung eines separaten Stylesheets ermöglicht es, einfach und schnell auf die neuen Styles zuzugreifen. Außerdem läuft man nicht Gefahr, dass eigene Änderungen überschrieben werden, wenn man die Joomla-Installation aktualisiert.

Du möchtest mehr als nur CSS Verändern? Vielleicht fragst du dich, wie du ein Child-Template für Cassiopeia anlegst. Viele kennen dies vom CMS Wordpress. In Joomla funktioniert dies anders. Um sich vor dem Überschreiben des eigenen neues Codes während eines Joomla Updates zu schützen, muss man das entsprechende Template kopieren und in der Kopie die Änderungen vornehmen. Der Vorteil der Arbeit an einer Kopie ist, dass man die Änderungen, die man beim Aktualisieren vorgenommen hat, nicht verliert. Der Nachteil ist, dass man Aktualisierungen an Cassiopeia selbst in seine Kopie selbst integrieren muss, wenn man diese neuen Funktionen wünscht. Es gibt Ansätzegithub.com/joomla/joomla-cms/pull/32896, diesen Nachteil zu beheben. Diese sind für Joomla 4.0.0 nicht rechtzeigig fertiggestellt worden. Versuche also, Änderungen am Code zu vermeiden und stattdessen Overrides oder Custom CSS mithilfe einer user.css zu verwenden.

Was ist SCSS oder Sass?

Was ist SCSS oder Sassde.wikipedia.org/wiki/sass_(stylesheet-sprache)? Sass (steht für "Syntactically awesome style sheets") ist eine Erweiterung von CSS, die es ermöglicht, Variablen, verschachtelte Regeln, Inline-Importe und vieles mehr zu verwenden. Als CSS-Präprozessor hilft es, Code zu organisieren und erlaubt es so, Stylesheets schneller und übersichtlicher zu erstellen. Sass ist mit allen Versionen von CSS kompatibel. SCSS ist eine besondere Schreibweise oder Syntax.

Was ist Bootstrap?

Bootstrap 5 ist ein Frontend-Webentwicklungswerkzeug, das aus CSS gemischt mit etwas JavaScript besteht. Es unterstützt Website-Entwickler dabei, Websites in Bezug auf verschiedene Bildschirmgrößen reaktionsfähiger zu bauen. Außerdem kommen @media-Queries und Utility-Klassen zum Einsatz. Es wurde von Webentwicklern bei Twitter entwickelt, um das Design für unterschiedliche Bildschirmgrößen zu erleichtern indem auf vorgefertigte Lösungen zurückgegriffen werden kann und weniger eigener spezieller Code erforderlich ist.

Bootstrap 5 verwendet ein 12-faches Rastersystemgetbootstrap.com/docs/5.0/layout/grid/, das statisch oder fluid sein kann. Das bedeutet, dass die Seite entweder an bestimmten Website-Breiten einrastet oder sich mit einer fließenden Bewegung verkleinert, bei der alle Bereiche einen Prozentsatz der gesamten Breite einnehmen und sich entsprechend verkleinern.

Cassiopeia ist für Bootstrap 5 konzipiert. Wenn man Bootstrap nicht kennt, braucht man etwas Zeit, um sich mit dem Framework vertraut zu machen. Wenn Bootstrap richtig verwendet wird, erleichtert es ein technisch gutes Design. Manche sind der Meinung, dass Websites, die mit Bootstrap erstellt wurden, alle gleich aussehen. Ich denke, dass es wie überall im Leben ist. Alles bietet Vorteile und Nachteile und der gesunde Mittelweg ist oft der beste. Wer sich auskennt, kann die Vorteile von Bootstrap nutzen und trotzdem eine individuelle Website bauen. Mit weniger Kenntnissen hilft Bootstrap eine Website für alle Geräte technisch gut und barrierefrei umzusetzen.

Wie setzt Cassiopeia Bootstrap 5 ein?

Cassiopeia verwendet das Bootstrap 5-Grid-System und ermöglicht es, ein statisches oder flüssiges Layout auszuwählen. Beide Versionen sind responsive, das heißt sie ändern die Größe und Position des Rastersystems abhängig von der Bildschirmgröße des anzeigenden Geräts.

Responsive: Statisches Layout

Das statische Layout verwendet 12 Spalten und gestaltet die Website so, dass diese eine maximale Breite hat. Wenn wir den Bildschirm verkleinern, passt sich die Breite an. Ist die Breite des anzeigenden Displays geringer, als die maximale Breite, verwendet die Website die maximale Breite nicht weiter sondern passt sich an die neuen Gegebenheiten an. Einzelne nebeneinander liegende Bereiche werden ab bestimmten Breakpoints über- und untereinander dargestellt. Ein horizontales Menü wird ebenfalls vertikal gestapelt.

Responsive: Fluid Layout

Das Fluid-System verwendet Prozentwerte statt Pixel für die Spaltenbreiten. Ein Element der Klasse .container-fluid verengt sich proportional, wenn die Breite des Anzeigegerätes abnimmt. Die inneren Unterteilungen innerhalb der Website verringern sich ebenfalls in der Breite. Bei schmalen Geräten stapeln sich die Unterteilungen übereinander. Dies alles geschieht fließend und verändert sich ständig. Dies ist für viele Website optimal. Grafikdesigner, die die Arbeit mit festen Papierformaten gewohnt sind, befremdet dies, weil das Positionieren von Bildern und die Silbentrennung bei Zeilenumbrüchen anders funktionieren.

Was ist CSS Grid

CSS Grid(^developer.mozilla.org/de/docs/Web/CSS/CSSGridLayout) ist ein zweidimensionales Rastersystem, das für das Layout von Elementen auf einer Webseite verwendet wird. Das Raster besteht aus horizontalen und vertikalen Linien, die Zeilen und Spalten bilden, ähnlich wie bei einer Tabelle.

Bootstrap bietet ebenfalls ein Raster-Layout-System und du fragst dich nun vielleicht, warum Joomla 4 zusätzlich CSS Grid verwendet? CSS Grid ist ein einfaches und flexibles Grid-Layoutsystem, welches im Bereich Benutzererfahrung Vorteile bietet. Daher ist die Verwendung von CSS Grid gegenüber Bootstrap bei der Implementierung einfacher Layouts sinnvoll. Bootstrap ist eher eine Frontend-Toolkit-Suite, die mit ihren vordefinierten Klassen komplexe responsive Designs erstellt.

Beachtenswertes

Mit den Standard-Media-Queries von Bootstrap 5 wird die Responsivität einer Bootstrap-Site durch Verkleinern der Breite des Browser-Fensters sowie auf Tablets und Telefonen erkannt. Das liegt daran, dass die Media Queries min-width und max-width anstelle von min-device-width und max-device-width verwenden. device-width bezieht sich auf die Auflösung des Displays. Die Breite ist beispielsweise 1024 bei einer Displaygröße von 1024x768. width bezieht sich auf die Breite des Browsers selbst bezieht, die sich von der Displaygröße unterscheidet, wenn der Browser nicht maximiert ist.

Das Bootstrap-Styling zielt darauf ab, den CSS-Code zu minimieren, welcher für eine korrekt responsive Website erforderlich ist. Ich hatte es schon geschrieben: Das gesamte Styling für Cassiopeia ist in einer Datei namens template.css enthalten. Alle Style können unsere überschrieben werden. Beim Überschreiben sollte man darauf achten, dass man das responsive Layout im Ganzen betrachten.

Overrideverwaltung in Joomla 4

Neu in Joomla 4 ist die Differenzanzeige, die bei einer Joomla Aktualisierungen auf Änderungen im überschriebenen Code aufmerksam macht. Das ist insbesondere dann sinnvoll, wenn man den Hauptanteil der Joomla! Standard-View im eigenen Override übernommen hat und mit der Aktualisierung ein Sicherheitsproblem in genau dieser View behoben wurde. Nebenbei macht sie das Anlegen eines Overrides zum Kinderspiel. Das neue Werkzeug ist über den Tempalte-Mánager erreichbar und unterstützt durch eine Differenzanzeige.

Ändere diesen Beitrag

Comments