Mercury Dokumentation

Individuell angepasstes CSS verwenden

Es ist möglich, ein individuell angepasstes CSS einzubinden. Dadurch können HTML-Experten das Erscheinungsbild bestimmter Seiten für spezielle Bedürfnisse anpassen. 

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“. 

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-Ordner 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

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.

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.

CSS-Datei anzeigen

Ein eigenes JavaScript wird genau wie eine eigene CSS-Datei hochgeladen und eingebunden.

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

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.

Hinweis: diese Demo funktioniert nicht im Seiten-Editor, sondern nur im aktivierten Vorschau-Modus der Seite.

JavaScript-Datei anzeigen

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

Achtung: Es ist geplant, zukünftig auf jQuery in Mercury zu verzichten und nur noch "reines" JavaScript zu verwenden. Wir empfehlen, eigene Scripte daher direkt ohne jQuery anzulegen.

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

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

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

Der aufgerufenen Funktion handler wird als erstes Argument ein initialisiertes jQuery Objekt übergeben.