Apollos CSS ändern

Vor zwei Wochen habe ich an dieser Stelle eine kleine Reihe über das Content Management System OpenCMS begonnen. Für einen Kunden darf ich eine Website verwalten, die auf diesem CMS aufgebaut ist. Da ich nur für das Design und das Einstellen von Inhalten zuständig bin, Server und Software aber zentral durch den Kunden zur Verfügung gestellt werden, bin ich an einigen Stellen sehr limitiert: Das CMS sieht aktuell keine Schnittstelle vor, das Design zu ändern. Zumindest nicht ohne das Template selbst anzufassen, was mir mit meinen Rechten nicht möglich ist. Es muss also ein Workaround her, um das Bootstrap-Design Apollo zu individualisieren.

Das klappt etwas umständlich, indem man eine eigene CSS-Datei anlegt, welche die Formatierungen des Apollo-Designs überschreibt. Dazu braucht es an einigen Stellen das Schlüsselwort !important. Um die CSS-Regeln zu erarbeiten, lohnt es sich ein Browser-Plugin wie Stylish zu nutzen, um nicht nach jeder Änderung die CSS-Datei erneut zu veröffentlichen, was den Arbeitsfluss doch erheblich stören kann.

Hat man seine CSS-Datei fertig, so kann man diese im Ordner /.content hochladen. Anschließend muss man das CMS noch anweisen, die Datei einzubinden. Hierzu erstellt man im gleichen Ordner eine zweite Datei namens head.html. Die kann dann zum Beispiel so aussehen:

<!-- Schriften laden -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,800" rel="stylesheet"> 
<!-- eigenes CSS laden -->
<link href="/export/sites/yourpagename/.content/your.css" rel="stylesheet">

Um an die Eigenschaften des Wurzelelements zu gelangen, muss man in die Ressourcen-Übersicht wechselnNun kann man das CMS anweisen, diese Datei direkt vor dem schließenden head-Tag jeder Seite einzubinden. Dazu hat jede Seite und jeder Ordner Eigenschaften. Die hier benötigte Eigenschaft heißt apollo.template.head. Jede Unterseite erbt seine Eigenschaften von der höheren Ebene. Da wir wollen, dass head.html wirklich von jeder Seite eingebunden wird, müssen wir diese Eigenschaft also dem Wurzelelement hinzufügen. An dieses heranzukommen, ist aber gar nicht so einfach.

In den Eigenschaften findet man den Schlüssel apollo.template.headZuerst wechseln wir in dir Sitemap-Ansicht. Dann können über das ☰-Symbol die Eigenschaften des Wurzelelements (also des obersten Ordners) öffnen. Dort wechseln wir in die Eigenschaften und suchen den Schlüssel apollo.template.head. Dieser befindet sich vermutlich unter den unbenutzen Eigenschaften, die du erst ausklappen musst. Dort tragen wir dann den Pfad zur head.html ein.

Jetzt wird in jeder Seite, deine CSS-Datei eingebunden und überschreibt, wie gewünscht, diverse CSS-Eigenschaften der Seite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.