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

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

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.