Bildquelle: Pixabay
Für Backdrop gibt es einige sehr schöne Themes, allerdings gibt es am Design immer etwas zu feilen und an den eigenen Geschmack anzupassen.
Das bedeutet aber nicht, dass jedes Mal ein komplettes Theme erstellt werden muss. Subthemes erleichtern das Leben ungemein.
Warum ein Subtheme – man kann doch einfach auch das bestehende überschreiben?
Da gibt es nur ein Problem, das nicht unterschätzt werden sollte: die eigenen Änderungen gehen mit jedem Update wieder verloren. Das bedeutet, dass man entweder nach jedem Update dran denken und die eigenen Hacks wieder einbauen muss, oder – noch viel schlimmer – gar keine Updates mehr einspielen kann.
Zum Glück macht ein Subtheme aber nicht viel Arbeit.
Die Struktur
Im Order /themes legen wir einen neuen Unterordner an, nennen wir ihn ’meins’:
Im Ordner /themes/meins erstellen wir eine Datei meins.info mit folgendem Inhalt:
name = Meins
description = Mein eigenes theme ;-)
type = theme
backdrop = 1.x
base theme = basis
Das war's schon, ab jetzt ist das Theme ’Meins’ auf /admin/appearance (Design) sichtbar und kann aktiviert werden.
Die Zeilen im einzelnen erklärt:
name legt den Namen fest, der auf den Theme-Seiten angezeigt wird.
description sorgt für die angezeigte Beschreibung und ist übrigens nicht wirklich notwendig.
type = theme ist wichtig, damit Backdrop das Theme als solches erkennt.
backdrop = 1.x stellt klar, für welche Hauptversion von Backdrop das Theme ist.
base theme = basis definiert das Theme Meins als Ableitung des Core-Themes Basis.
Nachdem ’Meins’ aktiviert und als Standard-Theme eingestellt wurde, sieht alles noch gleich aus. Klar, ’Meins’ erbt ja alle Styles von Basis. Es ist gar nicht notwendig, das Basis-Theme komplett zu kopieren, wir passen nur an, was nötig ist.
Als nächstes machen wir uns daran, unsere Styles (CSS) zu ergänzen.
Cache deaktivieren
Dazu sollten zuerst der Cache und die Aggregierung deaktiviert werden.
Auf /admin/config/development/performance (Konfiguration / Entwicklung / Leistung) deshalb den Haken bei CSS-Dateien aggregieren und komprimieren herausnehmen und dann speichern.
Das ist wichtig, damit wir nicht jedes mal nach einer CSS-Änderung den Cache zurücksetzen müssen.
Eine eigene CSS-Datei als Ergänzung
Nun im Ordner /themes/meins/ eine CSS-Datei meins.css erstellen und meins.info noch mal bearbeiten. Folgende Zeile kommt dazu:
stylesheets[all][] = meins.css
Jetzt müssen wir den Cache löschen. Das geht über's Admin-Menü (Startseite / Gesamten Cache löschen / Theme-Registry).
In die Datei meins.css kommen jetzt unsere Ergänzungen. Alles, was in Basis noch nicht so gut ausschaut.
Aber schnell merken wir, dass es einfacher wäre, eine CSS-Datei von Basis zu überarbeiten. Auch das geht natürlich. Wir müssen nur die Struktur nachstellen, damit die CSS-Datei in unserem Theme dort liegt, wo sie auch in Basis' Ordnerstruktur liegt.
Eine CSS-Datei des Basis-Themes übersteuern
Als Beispiel header.css – diese Datei liegt im Basis-Ordner /css/component/, also legen wir auch in ’Meins’ diese Ordner an und kopieren die Datei vom Basis-Ordner dorthin.
Jetzt noch mal meins.info bearbeiten, folgende Zeile kommt dazu:
stylesheets[all][] = css/component/header.css
Ab jetzt ist nicht mehr die header.css von Basis aktiv, sondern unsere eigene Variante, die wir nach Belieben anpassen können. Jedenfalls, wenn wir auch diesmal wieder an das Löschen des Cache gedacht haben.
Das wirft die Frage auf: wir haben doch die Aggregierung deaktiviert, warum muss der Cache immer noch gelöscht werden, bzw. wann muss ich das tun und wann nicht?
Cache löschen immer, wenn:
- Etwas in der meins.info Datei geändert wird (z.B. eine CSS-Datei dazukommt oder wegfällt)
- Im template.php ein hook dazukommt oder wegfällt (siehe weiter unten)
- Im Zweifelsfall :-)
Ist die Aggregierung deaktiviert, muss bei Änderungen in CSS-Dateien nicht an den Cache gedacht werden – außer an den des Browsers.
Ein letzter Blick in die meins.info Datei:
name = Meins
description = Mein eigenes theme ;-)
type = theme
backdrop = 1.x
base theme = basis
stylesheets[all][] = meins.css
stylesheets[all][] = css/component/header.css
Mehr war nicht nötig, der Rest der Arbeit ist die Anpassung der Styles in den CSS-Dateien. (Und beim nächsten Core-Update müsst ihr nicht mehr an eure Hacks denken.)
Eine CSS-Datei des Core ganz deaktivieren
Es kann vorkommen, dass man eine CSS-Datei des Core ganz loswerden möchte. Auch das geht, erfordert aber PHP-Basiskenntnisse.
Backdrop kennt eine ganz Menge sogenannter hooks. Auch Themes können Hooks verwenden. Dazu muss nur eine Datei namens template.php im Hauptordner des eigenen Themes erstellt werden.
Konkretes Beispiel: wir wollen die Datei sm-core-css.css loswerden, weil wir etwas Eigenes machen.
In der Datei template.php:
<?php
function meins_css_alter(&$css) {
unset($css['core/misc/smartmenus/css/sm-core-css.css']);
}
Mehr zu hook_css_alter() gibt's in der API Online-Dokumentation.
Wer auf den Geschmack gekommen ist und weiter in die Materie eintauchen möchte, findet weitere Infos in der Online Dokumentation zu Themes (in Englisch).