Zum Inhalt springen

Individuell angepasstes CSS verwenden

Mit Meilenstein 16 ist es möglich, individuell angepasstes CSS zu verwenden. Dadurch können HTML-Experten das Erscheinungsbild bestimmter Seiten für spezielle Bedürfnisse anpassen. 

Voraussetzungen

Um diese Option einsetzen zu können sind erweiterte HTML und CSS Kenntnisse erforderlich.

Die Möglichkeit individuell angepasstes CSS oder JavaScript zu verwenden ist per Vorgabe deaktiviert. Bitten Sie Ihre OpenCms Systemadministration diese Option für Ihre Website zu aktivieren, wenn Sie davon Gebrauch machen möchten.

Bitte beachten Sie, dass HTML, CSS und JavaScript des Mercury Template ständig weiter entwickelt werden. Auf individuelle Anpassungen kann dabei leider keine Rücksicht genommen werden. Es ist daher möglich, dass Ihre individuellen Anpassungen nach einem Update des Templates nicht mehr funktionieren. In diesem Fall müssen Sie diese Anpassungen nach einem Update selbst "reparieren". 

Eigenes CSS einbinden

Erstellen Sie Ihr eigenes CSS zunächst in einem lokalen Editor als .css-Datei.

Der Dateiname muss custom.css sein.

Laden Sie diese Datei custom.css in den Start-Folder Ihrer Site bzw. Subsite im OpenCms hoch. Sind individuelle CSS Anpassungen aktiviert, so wird diese CSS Datei automatisch für alle Webseiten in der Site bzw. Subsite eingebunden.

Es wird immer nur ein CSS eingebunden. Wenn Sie also zum Beispiel am Start-Ordner / Ihrer Site eine Datei custom.css hinterlegt haben, und für die Subsite im Ordner /meine/subsite/ eine andere, so wird für die Subsite NUR die Datei custom.css aus dem Ordner /meine/subsite/ eingebunden.

Eigene CSS Klassen an einem Element setzen

Eigene CSS Selektoren verwenden

Sind individuelle CSS Anpassungen aktiviert, so können für die meisten Elemente auf der Seite eigene CSS Klassen hinzugefügt werden.

Die Element-Einstellung „CSS Anpassung“ zeigt in diesem Fall neben den Standard-Auswahlmöglichkeiten rechts ein "Stift" Symbol. Klicken Sie auf den Stift um Ihre eigenen CSS Klassen anzugeben. Diese werden zum erzeugten HTML hinzugefügt.

Inhalt mit angepasster CSS-Formatierung

Dieser Inhalt wurde mit der speziellen CSS-Anpassung my-special-css in den Element-Einstellungen ausgezeichnet. Dadurch wird der Hintergrund blau und es wird ein Padding an den Rändern hinzugefügt.

In der CSS-Datei /anleitungen/css-js/custom.css wird dieser Selektor definiert.

Eigenes JavaScript einbinden

Eine eigenes JavaScript muss im Prinzip genau wie eine eigene CSS-Datei hochgeladen und eingebunden werden.

Für diese muss der Dateiname custom.js sein (anstatt von custom.css).

Inhalt mit spezieller JavaScript-Aktion

Dieser Inhalt wurde mit der speziellen CSS-Anpassung my-js-demo in den Element-Einstellungen ausgezeichnet. 

In der JavaScript-Datei /anleitungen/css-js/custom.js wird dieser Selektor verwendet, um über jQuery die Hintergrundfarbe des Elements zu ändern, wenn die Maus in dieses Element hinein bzw. daraus hinaus bewegt wird.

Verwenden von jQuery in eigenem JavaScript

Wenn ein eigenes JavaScript eingebunden wird, so kann dieses auf die jQuery Instanz zugreifen, welche durch das Mercury Template geladen wird.

Um Ihr eigenes JavaScript mit jQuery zu initialisieren verwenden Sie die Funktion

mercury.ready(handler) anstatt $document.ready(handler).

Der Grund hierfür ist, dass jQuery vom Template aus Performance-Gründen asynchron geladen wird. Benutzen Sie mercury.ready(handler), so wird Ihre Funktion sicher erst aufgerufen, wenn jQuery bereits geladen und verfügbar ist.