Bootstrap 4 - Theme Dokumentation

Nachfolgend dokumentiere ich, wie ich das Theme Bootstrap 4 von Serendipity auf meine Bedürfnisse angepasse. Meine Motivation für dieses "Redesign-Projekt" besteht darin, dass es überhaupt keine Dokumentation zu diesem Theme gibt. Die Ausgangslage gefällt mir recht gut und ich denke, dass das Framework Bootstrap tolle Möglichkeiten für die Anzeige auf mobilen Endgeräten bietet. Die mitgelieferte Grundkonfiguration finde ich jedoch ziemlich lieblos gestaltet und ich finde, da gibt es doch einiges zu verschönern und zu verbessern.

Hier ein paar wichtige Vorbemerkungen:

  • Ich habe keinerlei Programmierkenntnisse.
  • HTML, CSS, PHP und Bootstrap kenne ich nur via Google-Suche.
  • Ich gehe nach dem Prinzip "Versuch und Fehler" vor, bis ich das gewünschte Ergebnis erziele.
  • Es gibt sicher für vieles was ich hier zeige, bessere und einfachere Lösungen.

Wenn diese Dokumentation jemand anderem Ideen gibt, wie er seinen eigenen Blog anpassen kann, ist das Ziel schon erreicht. Für meine Arbeit nutze ich folgende Tools:

  • Browser: aktuelle Version von Mozilla Firefox. Hier nutze ich vor allem die rechte Maustaste und den Befehl "Element untersuchen" um herauszufinden, an welcher Stelle ich Änderungen vornehmen muss.
  • Editor: Notepad++. Damit editiere ich CSS-, TPL-, oder PHP-Dateien.
  • FTP-Programm: FileZilla. Damit tausche ich Daten zwischen meinem lokalen Rechner und dem Webserver aus.

Als Ausgangspunkt dient eine Basisinstallation von Serendipity. Hier ist momentan die Version 2.3.2 im Einsatz und diese läuft mit PHP 7.2.23.

Bootstrap 4 ist ein mitgeliefertes Theme der Standardinstallation. In diese Installation kopierte ich die Datenbank meines aktiven Blogs um eine sichtbare Basis zu haben und so die durchgeführten Änderungen zu erkennen. Ebenso sind die gleichen Plugins wie in meinem aktiven Blog installiert.

Zusätzlich installierte ich das Theme-Auswahl-Plugin, damit man zu Vergleichzwecken hin und her schalten kann. Achtung: Nach einem Theme-Wechsel ist der erste Eindruck meist chaotisch, weil die Style-Informationen im Browser zwischengespeichert sind und sich somit die alten und die neuen Einstellungen in die Quere kommen. Ein Browser-Refresh (Seite neu laden) behebt das Problem umgehend.

Fragen oder Anmerkungen diesem "Redesign-Projekt" können gerne via Kommentarfunktion erfolgen.

Theme Bootstrap 4 - Basisinstallation

Vor dem Wechsel meines abgeänderten Next_Beat Themes zu Bootstrap 4 habe ich Seitenleisten-Plugins Links wie Rechts angeordnet, sowie ein Titel-Hintergrundbild angebracht. Dies, um die Möglichkeiten von Next darzustellen. Vor der Theme-Umstellung sah dieser Testblog noch so aus, wie unten abgebildet. (Zu Vergleichzwecken kann man diese Konfiguration wieder herstellen in dem man im Seitenleisten-Plugin Theme-Auswahl zum Theme Next_Beat wechselt).

vor der Umstellung, mit abgeändertem Next-Theme

Als ersten Schritt muss man in der Administrationsoberfläche unter Einstellungen > Themes das Theme Bootstrap 4 auswählen und speichern.

Bootstrap 4 Theme auswählen und installieren

Danach sah der Blog dann so aus (siehe unten). Auf den ersten Blick fällt auf, dass es auf der linken Seite keine Seitenleiste gibt. Die Plugins der linken Seite werden automatisch über den Plugins der rechten Seite dargestellt. Das heisst: Bootstrap 4 kann nur eine einzelne Seitenleiste (rechts) darstellen. Für mich ist das kein Problem, mir reicht eine Seitenleiste. Falls aber jemand links und rechts Seitenleisten möchte, scheidet Bootstrap 4 somit gleich aus.

erste Frontansicht mit Bootstrap 4

Konfiguration - Navigationsleiste

Typ der Navigation bestimmen

Das Datumsformat wurde vom bbbeat-Blog übernommen. Öffnet man das Drop-Down-Menü, erhält man eine grosse Auswahl verschiedener Darstellungsarten. Oder man übernimmt die Syntax und gestaltet sich sein eigenes Datumsformat.

Layout-Container in voller Breite? Habe hier Nein gewählt, weil sonst auf Bildschirmen mit hoher Auflösung (z.B. über 3'000 Pixel Breite) der Text ziemlich links klebt. Etwas mehr Rand gefällt mir schlicht besser und mit Nein wird eine bestimmte Grösse/Breite auch nicht überschritten.

Unter Navbar versteht man die blaue Navigationsleiste am oberen Bildrand. Unter Navbar-Typ kann man kann folgende Auswahl treffen:

  • default (die Navigationsleiste scrollt mit dem Text nach oben und verschwindet aus dem Blickfeld)
  • fixed-top (die Navigationsleiste bleibt am oberen Bildrand stehen und ist somit immer zu sehen)
  • fixed-bottom (hier bleibt die Naigationsleiste am unteren Bildschirmrand (wer will denn sowas?))
  • sticky-top (verhält sich völlig gleich wie fixed top. Das ist meiner Ansicht nach ein Fehler. Eigentlich sollte die Navigationsleiste beim runtzerscrollen (vorwärts) mit dem Text nach oben aus der Anzeige verschwinden, sobald man dann aber wieder etwas nach oben scrollt (rückwärts), erscheint sie wieder und ersetzt so eine scroll-to-top-Funktion. Aber wie gesagt: sticky-top und fixed-top verhalten sich hier gleich. Es gibt keinen erkennbaren Unterschied.)

 

Aussehen der Navigationsleiste bestimmenUnter Navbar-Stil wird einem eine Farbauswahl für das Erscheinungsbild der Navigationsleiste angeboten.

  • hell (hellgrauer Hintergrund, schwarze und dunkelgraue Schrift)
  • dunkel (dunkelgrauer Hintergrund, weisse und hellgraue Schrift)
  • primär (leuchtend blauer Hintergrund, weisse und hellblaue Schrift)

Die aktuell gewählte Konfiguration ist sticky-top und primär.

Konfiguration - Jumbotron

Als Nächstes kann man ein sogenanntes Jombotron konfigurieren. Was ist das? Vereinfacht ausgedrückt: Eine Kopfzeile. Hier wird der Blog-Titel und die Blog-Beschreibung in einem Feld angezeigt. Das/der Jumbotron bewegt sich zusammen mit den Blogeinträgen. Schrollt man also nach unten, verschwindet er nach oben aus dem Blickfeld (nur die Navigationsleiste bleibt stehen).

Für den/das Jumbotron gibt es zwei Konfigurationseinstellungen. Zuerst kann man einen Typ auswählen. Dabei stehen die Möglichkeiten kein, kompakt, klein und gross zu Verfügung. Siehe unten.

Konfiguration Jumbotron - TypDanach kann man den gewünschten Stil (Farbgestaltung einstellen. Dazu gibt es -wie bei der Navigationsleiste- folgende Möglichkeiten: hell, dunkel, und primär. Nachfolgend der entsprechende Screenshot in Themes/Konfiguration:

Konfiguration Jumbotron - StilWie die ganze Sache dann im aktiven Blog aussieht, zeigen die nächsten drei Screenshots:

zuerst die Kombination: kompakt - hell (hellgrauer Hintergrund, dunkel- und hellgraue Schrift)

Jumbotron - kompakt, helldann die Kombination: klein - dunkel (dunkelgrauer Hintergrund, hellgraue und weisse Schrift)

Jumbotron - klein, dunkelund zum Schluss die Kombination: gross - primär (bluer Hintergrund, hellblaue und weisse Schrift)

Jumbotron - gross, primär

Ganz ehrlich: Mir erschliesst sich der Sinn des Jumbotron nicht wirklich. Den Blogtitel sehe ich ja bereits in der Navigationsleiste und auf die Blogbeschreibung kann ich verzichten. Ich habe deshalb den Jumbotron-Typ auf kein gestellt. Diese Fläche wird also hier nicht angezeigt.

Vielleicht könnte man den/das Jumbotron für ein Hintergrundbild benutzen. Blog-Titel und -Beschreibeung könnte man sicher auch ausblenden. Derzeit weiss ich es nicht. Vielleicht nehme ich mich später diesem Thema nocheinmal an. Vorderhand verzichte ich ganz einfach auf diese Möglichkeit.

Bevor es losgeht - Schutz vor Updates

Bevor es mit den Änderungen losgeht hier noch ein paar Bemerkungen.

Bootstrap 4 ist ein Standard-Theme von Serendipity. Das heisst, dass bei jedem Update von Serendipity alle Dateien im Verzeichnis /templates/bootstrap4/ überschrieben werden. Man sollte deshalb Konfigurationsdateien nicht einfach ändern, denn nach dem nächsten Update wären die Änderungen wieder futsch. Es gibt nun zwei grundlegende Vorgehensweisen um die Änderungen update-sicher durchzuführen.

Solange man lediglich optische Änderungen durchführt, kann man im entsprechenden Verzeichnis (/templates/bootstrap4/) eine neue Datei mit dem Namen user.css anlegen. In diese Datei werden alle Designänderungen eingetragen. Da es diese Datei im Original nicht gibt, wird sie beim nächsten Update auch nicht überschrieben. Ein weiterer Vorteil besteht darin, dass diese Datei ziemlich übersichtlich bleibt, da hier eben nur die Änderungen gegenüber dem Original eingetragen werden. Rein technisch gesehen werden css-Dateien nacheinander abgearbeitet. Das heisst, dass im bootstrap4-Theme zuerst die Datei style.css und danach die Datei user.css abgearbeitet wird. Dabei überschreibt die nachfolgende Datei die Werte der Vorhergehenden.

Möchte man aber nicht nur Farben und Formen ändern, sondern auch z.B. Schriften oder die Darstellung von Einträgen, so muss man weitere Dateien ins Auge fassen. Soweit ich das im Moment überblicke, werde ich auch Änderungen in den Dateien index.tpl (Ansicht der Bloghauptseite) und entries.tpl (Ansicht eines Einzelbeitrags) vornehmen. Diese Änderungen lassen sich nicht update-sicher durchführen. Hier besteht die einzige -mir bekannte- Lösung darin, dass man das gesamte Verzeichnis (/templates/bootstrap4/) kopiert und umbenennt. In diesem Verzeichnis gibt es eine Datei Namens info.txt, in die man den neuen Namen des Themes einträgt (damit dieses Theme dann in der entsprechenden Themes-Auswahl erscheint).

Für diese Dokumentation werde ich also verschiedene "neue" Themes erstellen. Somit kann man die Unterschiede später einfacher nachvollziehen, in dem man auf das entsprechende Theme umschaltet. Die Themes werde ich fortlaufend nummerieren, also z.b.: Bootstrap 4 V1, ...V2, ...V3 usw.

Obwohl die einzelnen Themes bei Serendipity nur ganz selten Updates erfahren sei darauf hingewiesen, dass man diese Möglichkeit trotzdem im Hinterkopf behalten sollte. Ich kopiere mir zu diesem Zweck diejenigen Dateien, welche ich verändert habe, in ein lokales Verzeichnis. Sollte also das Theme einen Update erhalten, so kopiere ich die von mir veränderten Dateien in die aktuelle Version und schaue, ob noch alles funktioniert.

style.css

Im Original ist die style.css-Datei von bootstrap4 sehr unübersichtlich und nur schwer für Änderungen zu gebrauchen. Wenn man diese Datei mit Notepad++ öffnet, sieht das so aus:

bootstrap4/style.css - im OriginalWeil ich damit nichts anfangen kann, habe ich etwa eine Stunde investiert um optisch etwas Struktur hineinzubringen. Um zu testen ob noch alles richtig funktioniert, speicherte ich die Datei unter dem gleichen Namen und überschieb damit die Originaldatei auf dem Server (natürlich behalte ich eine lokale Kopie (von wegen: update-Sicherheit)). Nun sieht die style.css so aus:

bootstrap4/style.css - strukturiert

erste Farbanpassungen

Also: Als erstes ein paar einfache Farbanpassungen. Um Farben zu bestimmen und HEX-Codes für Farben zu erhalten, nutze ich oft folgende Webseite (hier am Beispiel meiner Lieblingsfarbe #060689).

Zuerst erstellte ich (die zuvor erwähnte) user.css-Datei. Da hinein schreibe ich folgende Änderungen:

Die Hintergrundfarbe ändere ich auf ein helles grau (#fcfcfa). Das finde ich für die Augen angenehmer als reines weiss. Dann änderte ich die Textfarbe auf ein sehr dunkles blau (#04045f). Das ergibt einen guten Kontrast. Nachfolhend die entsprechenden Einträge:

body{
    background-color: #fcfafa;
    color:#04045f;
    }

Danach wollte ich die Navigationsleiste in meiner Hauptfarbe (#060689). Dazu "vergewaltigte" ich die Voreinstellung "dunkel". D.h. damit diese Einstellung wirksam ist, muss man danach unter Themes > Konfiguration > Nav-Stil auf dunkel umschalten. In die user.css kam folgender Befehl:

.bg-dark{
    background-color:#060689!important;
     }

Den Blog-Titel in der Navigationsleiste hätte ich gerne fett darstellt. Das ging so:

.navbar-brand {
    font-weight: bold;
    }

Dann sollten die Menütexte in der Navigation beim Überfahren mit der Maus in weiss darstellt werden (ohne Transparenz).

.nav-link:hover {
    color: #fff!important;
    }

Ganz generell machen mich die !important-Aufforderung nicht wirklich glücklich. Eigentlich möchte ich das vermeiden, doch ich wusste mir nicht anders zu helfen. :-|

Demnächst mehr...