CSS Klassen Prinzip

Wenn Du apprex nutzt, fällt dir sicherlich auf, dass wir die Plattform sowohl für Experten als auch Technik Laien konzipiert haben.
Daher möchten wir dir in diesem Hilfecenter Artikel das wichtigste der verwendeten CSS Klassen übersichtlich darstellen.

CSS Klassen für Inhaltstypen

Egal ob Du einen Kurs, eine Seite oder einen Blogbeitrag mit eigenem CSS stylen möchtest, kannst Du dafür das globale CSS verwenden. Wir haben dir hier die wichtigsten Inhaltsklassen dargestellt, welche ganz automatisch für die Inhaltstypen eingesetzt werden. Jeder apprex Inhaltstyp hat seine eigene Klasse und die darin verwendeten Builder Module und Inhalte können im <main> Element gestyled und angesprochen werden.

Jeder Inhaltstype folgt auch den nachfolgenden CSS Regeln.

CSS Klassen für einzelne Inhalte

Jeder Inhalt in apprex hat seine eigene, eindeutige ID. Diese wird ebenfalls dem <main> Element automatisch als Klasse angehängt. Zudem hat jedes Inhaltselement in apprex einen sogenannten Slug (oder auch Pfad). Das heißt etwa für einen Kurs der unter /courses/automatisierung-im-business erreichbar ist, fügt die Plattform den Slug ebenfalls in das <main> Element als Klasse hinzu.

Wie etwa folgendes Beispiel zeigt: <main class="course acd91610-ad78-4322-99c9-924c35c9d9cd automatisierung-im-business action-courses-show">

Die ID eines Elements findest Du immer im „Detail“ Reiter oder im Adminbereich in der URL, wie etwa /admin/courses/abcdefg-1234-1234-4321-1234567890123/edit).

Action CSS Klassen

Jenachdem was mit einem Inhaltselement passiert, findest Du eine entsprechende Action Klasse beim <main> Element.

Die Benennung des Inhaltselements folgt einem strikten Prinzip. Vorangehend mit „action-“ folgt der Name der Resource bzw. des Models (analog zum URL Schema). Diese sind beispielsweise „courses“, „events“, „pages“, usw…. Abschließend folgt entweder „-index“ oder „-show“. Je nachdem ob ein einzelnes Element gezeigt (-show) oder alle Elemente aufgelistet (-index) werden.