CSS Klassen Prinzip

Du bist hier:
< Alle Themen

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.

Klasse Inhaltstyp Beschreibung
main.course Kurse Klasse für einen Kurs, die Landingpage und die Kursansicht
main.event Events Klasse für ein Event, die Landingpage und die Produktansicht
main.page Seiten Klasse für eine Seite
main.post Beiträge Klasse für einen Blogbeitrag
main.product Produkte Klasse für ein Produkt, die Landingpage und die Produktansicht
main.forum

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.

Klasse Inhaltstyp Beschreibung / Tipps
main.action-courses-show Kurslandingpage anzeigen
main.action-courses-index Kursübersichtsseite anzeigen Dazu muss sie als Kursübersichtsseite in den Einstellungen definiert sein
main.action-modules-show Ein Modul im Kurs anzeigen
main.action-pages-show Eine Seite anzeigen
main.action-pages-index Seitenübersicht anzeigen
main.action-events-index Eventübersicht
main.action-events-show Ein Event
main.action-posts-index Seitenübersicht
main.action-posts-show Eine Seite
main.action-products-index Produktübersicht
main.action-products-show Ein Produkt
main.action-plans-index Abo Übersicht
main.action-plans-show Ein Abo

 

Zurück Facebook Tracking Pixel einrichten
Weiter SCSS anstelle von CSS nutzen
Inhaltsverzeichnis