Erstellen eines abgeleiteten Themes
In diesem Tutorial lernen wir, wie man ein abgeleitetes Theme erstellt. Dabei handelt es sich um ein Theme, das die meisten Einstellungen aus seinem „übergeordneten” Theme übernimmt und Ihnen ermöglicht, einige Dinge nach Ihren Wünschen zu ändern, ohne ein komplettes Theme-Paket erstellen zu müssen. Dies ist ein guter Ausgangspunkt, wenn Sie nur einige Dinge an einem bestehenden Theme ändern möchten, um beispielsweise Ihrem Hub ein etwas persönlicheres Aussehen zu verleihen.
In diesem Tutorial verwenden wir das Standardthema „redbasic” als übergeordnetes Thema. Wenn Sie ein anderes Thema als Grundlage verwenden möchten, müssen Sie möglicherweise einige Anpassungen vornehmen, aber der Vorgang ist derselbe.
Lektion
Um ein abgeleitetes Design zu erstellen, wählen Sie zunächst einen Namen. In unserem Beispiel nennen wir unser Design „mytheme”.
Hoffentlich sind Sie etwas kreativer. Ersetzen Sie jedoch in diesem Dokument überall, wo Sie „mytheme” sehen, den Namen, den Sie gewählt haben.
Verzeichnisstruktur
Zuerst müssen Sie eine Verzeichnisstruktur für das Theme erstellen. Wir halten es einfach. Wir benötigen ein PHP-Verzeichnis und ein CSS-Verzeichnis. Hier sind die Unix/Linux-Befehle dafür. Nehmen wir an, „mywebsite” ist Ihr oberster Hubzilla-Ordner.
cd mywebsite
mkdir view/theme/mytheme
mkdir view/theme/mytheme/css
mkdir view/theme/mytheme/php
Großartig. Jetzt brauchen wir noch ein paar Dateien. Die erste ist Ihre Theme-Info-Datei, die das Theme beschreibt. Sie wird view/theme/mytheme/php/theme.php heißen (cleverer Name, oder?). Fügen Sie darin die folgenden Informationen ein – und passen Sie sie nach Bedarf an:
<?php
/**
* * Name: Mytheme
* * Description: Sample Derived theme
* * Version: 1.0
* * Author: Your Name
* * Compat: Red [*]
*
*/
function mytheme_init(&$a) {
App::$theme_info['extends'] = 'redbasic';
}
Denken Sie daran, die Funktion „mytheme_init” mit dem Namen Ihres Themes umzubenennen. In diesem Fall erweitern wir das Theme „redbasic”. Erstellen Sie nun eine weitere Datei. Wir nennen diese Datei „PCSS-Datei”, aber es handelt sich dabei um eine PHP-Datei. Die Datei heißt „view/theme/mytheme/php/style.php”. Fügen Sie darin Folgendes ein:
<?php
require_once('view/theme/redbasic/php/style.php');
echo @file_get_contents('view/theme/mytheme/css/style.css');
Das war’s schon. Damit wird die Software angewiesen, zuerst die PCSS-Informationen für das Redbasic-Theme zu lesen und anschließend unsere CSS-Datei, die nur die Änderungen enthält, die wir gegenüber unserem übergeordneten Theme (Redbasic) vornehmen möchten.
Erstellen Sie nun die eigentliche CSS-Datei für Ihr Theme. Speichern Sie sie unter view/theme/mytheme/css/style.css (wo wir der Software gerade gesagt haben, dass sie danach suchen soll). In unserem Beispiel ändern wir nur die Hintergrundfarbe des Body, damit Sie sehen können, dass es funktioniert. Sie können jedes beliebige CSS verwenden.
body {
background-color: #DDD;
}
Sie haben soeben erfolgreich ein abgeleitetes Design erstellt. Dieses muss im Admin-Panel „Designs“ aktiviert werden, damit es von allen Benutzern der Website verwendet werden kann. Dazu muss es unter „Einstellungen -> Anzeigeeinstellungen“ als Standarddesign ausgewählt werden.
Lektion 2 – Anpassen des Themes
Hinzufügen benutzerdefinierter Stile
In der vorherigen Lektion haben wir einen einfachen Stil in der Datei view/theme/mytheme/css/style.css hinzugefügt, damit wir sehen konnten, dass unser abgeleitetes Theme aktiv war.
Wir können natürlich beliebige Stile zu dieser Datei hinzufügen, und da wir sie nach den Stilen des übergeordneten Themes laden, können wir die Stile des übergeordneten Themes oder des Hubzilla-Kerns überschreiben. Mit Stilen allein lässt sich schon viel erreichen, und für viele wird dies alles sein, was Sie benötigen, um das Theme nach Ihren Wünschen anzupassen.
Überschreiben von Vorlagen
In einigen Fällen reicht das Überschreiben von CSS-Stilen möglicherweise nicht aus, um genau das gewünschte Ergebnis für Ihr Theme zu erzielen. In diesen Fällen können wir auch die Vorlagen überschreiben, die zum Erstellen des HTML-Codes der Webseiten selbst verwendet werden.
Vorlagen sind die Bausteine der Hubzilla-Weboberfläche. Sie können komplex sein und die gesamte Benutzeroberfläche eines Moduls enthalten oder einfache Bausteine wie ein Eingabefeld oder eine Schaltfläche.
In diesem Beispiel ändern wir die Vorlagen für Kontrollkästchen und ersetzen die von Redbasic verwendeten Standard-Umschaltflächen durch Standard-HTML-Kontrollkästchen.
So sah es vor der Änderung aus:
Die Originalvorlage befindet sich in view/tpl/field_checkbox.tpl. Als Erstes kopieren wir diese Datei also in das Vorlagenverzeichnis unseres Themes, also view/theme/mytheme/tpl/field_checkbox.tpl. Anschließend ändern wir sie nach Belieben. In diesem Beispiel ändern wir sie wie folgt:
<div id="{{$field.0}}_container" class="clearfix checkbox mb-3">
<input
type="checkbox"
name="{{$field.0}}"
id="id_{{$field.0}}"
value="1"
{{if $field.2}}checked="checked"{{/if}}
{{if $field.5}}{{$field.5}}{{/if}}
>
<label for="id_{{$field.0}}">
{{$field.1}}{{if $field.6}}<sup class="required zuiqmid"> {{$field.6}}</sup>{{/if}}
</label>
<div class="form-text text-muted">{{$field.3}}</div>
</div>
Bei der Suche nach Vorlagen sucht Hubzilla zunächst im Vorlagenverzeichnis des Themes, dann (falls relevant) im Verzeichnis des übergeordneten Themes und schließlich im Verzeichnis view/tpl nach den vom System definierten Vorlagen. Es wird die erste gefundene Vorlage verwendet.
Das bedeutet, dass von nun an die Checkbox-Vorlage unseres Themes immer dann verwendet wird, wenn die Benutzeroberfläche eine Checkbox anzeigen möchte.
So sieht das mit der Änderung aus:
Beachten Sie außerdem, dass Dateien in Unterverzeichnissen unseres Theme-Verzeichnisses abgelegt werden sollten, die der Dateiendung entsprechen. So sollten *.css-Dateien im Verzeichnis view/theme/mytheme/css, *.php-Dateien im Verzeichnis view/theme/mytheme/php und *.tpl-Dateien im Verzeichnis view/theme/mytheme/tpl abgelegt werden.