ACHTUNG! - TEST

Dies ist eine Testumgebung!

Den aktuellen Online-Blog findet man hier.

Child-Theme

Im S9Y-Forum bin ich eher zufällig über das Thema Child-Theme gestolpert. Die Idee dahinter ist, dass man alle Änderungen, die man an einem vorinstallierten Theme vornimmt in ein eigenes Verzeichnis einträgt. Dieses Verzeichnis referenziert dann auf ein sogenanntes Mother-Theme, wo alle übrigen Daten herkommen. Das finde ich eine sehr gute Idee. So kann man quasi update-sicher ein Theme den eigenen Wünschen anpassen.

Ich habe bisher das ganze Theme mit allen Dateien kopiert und umbenannt. Darin habe ich meine gwünschten Änderungen vorgenommen und den Verzeichnisnamen geändert (hier zu next_beat). Sollten sich zukünftig Dateien im Next-Theme ändern (Update), so kriegt das mein next_beat-Theme nicht mit.

Für einen Versuch habe also alle Dateien, die ich im Next-beat-Theme äbgeändert habe in einen eigenen Ordner kopiert und diesen next_2019 genannt. In der info.txt habe ich dann als Engine:Next eingetragen (als Mother-Theme).

Soweit sieht eigentlich alles recht gut aus. Nur am unteren Seitenende werden die Pfeil-Buttons zu den älteren oder neueren Beiträgen nicht angezeigt. Das ist aber bisher der einzige Makel, den ich feststellen konnte. Mal sehen, obe ich herausfinde, woran das liegt.

Wobei: Diese Buttons machen mich eh nicht glücklich. Ich weiss nie auf welcher Seite ich klicken muss. Ein herkömmlicher Button, mit der Aufschrift "älter" oder "neuer" würde mir besser passen.

Bild-Kommentar

TREK 1120 mit Gepäckträgern (ALT)
TREK 1120 mit Gepäckträgern (Kommentar)

Ich will hier ein Bild einfügen und im Kommentar-, ALT-, und TITLE-Feld immer den gleichen Text mitgeben. Auf grossen Bildschirmen (über 768px) soll kein Kommentar sichtbar sein (dafür wird der TITLE-Eintrag mit Mouse-Over angezeigt). Auf Displays mit weniger als 767px (Mobiles) soll jedoch der Kommentar gezeigt werden, da Mouse-Over ohne Maus halt nicht funktioniert.

Dafür mache ich in der style.css ab Zeile 1230 folgende Änderungen:

@media screen and (max-width: 768px) {
    .serendipity_imageComment_txt {
        display: none;
        visibility: hidden;
    }
}

:applaus: SUPER! Das funktioniert! :applaus:

ALT oder TITLE?

Test um zu sehen, wann ALT- und TITLE-Attribute angezeigt werden. Dem folgenden Bild wurde nur ein ALT-Attribut mitgegeben.

Text im ALT-Attribut

Also das "ALT-Attribut" wird bei Mouse-Over nicht angezeigt und bleibt generell verborgen.

ALT-AttributLinks nun ein Bild mit Link, mit ALT aber ohne TITLE... Nöö, kein Mouse-Over und keine Anzeige in der Lightbox.

Rechts das gleiche Bild, ohne Link, ohne ALT, aber mit TITLE-Eintrag... jetzt mit Mouse-Over-Anzeige.

Das entspricht soweit alles meinen bisherigen Erfahrungen. "Mein Problem" ist, dass die Mouse-Over-Texte auf dem Handy nicht dargestellt werden. Oder halt eben nur, wenn das Bild per Lightbox angezeigt wird. Schön wäre, wenn bei einem Fingertipp auf ein Bild ohne Lightbox-Link, der Mouse-Over-Text (TITLE) angezeigt würde.

Das ALT-Attribut wird von Screenreadern vorgelesen und auch Suchmaschinen verwerten die ALT-Attribute von Bildern. Seit ein paar Wochen fülle ich deshalb den gleichen Text in die Felder "ALT" und "TITLE". "TITLE" als Mouse-Over und als Bildbeschreibung in der Lightbox. Das hat dann halt den Nachteil, dass ein Screenreader den Text zweimal vorliest (zuerst ALT und dann TITLE). Doch ist das relevant? Lässt sich überhaupt irgend jemand meinen Blog vorlesen???

Kommentar zum Bild
Kommentar zum Bild

Eigentlich liesse sich das ziemlich einfach lösen. Nämlich indem ich einem Bild ohne Link statt ein TITLE-Attribut einen Kommentar mitgebe. Dieser wird dann unterhalb des Bildes eingeblendet. Mit etwas CSS könnte man die Anzeige auf grossen Displays wohl auch ausblenden.

Link auf JAlbum-Bild

Wenn ich im aktiven Blog einen Link auf ein Foto in JAlbum mache (URL aus dem Browserfenster kopiert), springt die Lightbox an, findet aber das Bild nicht. Die Lightbox kann das Bild nicht darstellen, weil die JAlbum-Funktionalität fehlt.

Tags/Stichworte in einem Beitrag

Ich will einen Beitrag erstellen, der alle Tags/Stichworte anzeigt, die mehr als 3x verwendet wurden. Dafür konfigurierte ich das Seitenleisten-Plugin dementsprechend. Dann zeigte ich mir die Blog-Hauptseite in Firefox an un wählte über die rechte Maustaste "Seitenquelltext anzeigen". Diese Seite durchsuchte ich nach "Stichwort" und durchsuchte die Ergebnisse, bis ich die Daten des Seitenleisten-Plugins fand. Von da kopierte ich den gesuchten Abschnitt und fügte ihn in diesen Beitrag via Quellcode ein. Hier das Ergebnis:

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Das passt. Die zugrundeliegende Idee ist, dass ich einen Menüpunkt "Stichworte" erstellen kann und wenn man dieses Menü anwählt, soll die oblige (klickbare) Liste erscheinen.

Mehrere Fotos

Es scheint eine neue Funktion gegeben zu haben. Scheinbar kann man in einem Zug mehrere Fotos einbinden und so höchst einfach eine kleine Galerie erstellen. Mal ausprobieren.

Na ja. Man kann zwar X Bilder auf einmal auswählen und einfügen, diese werden dann jedoch als Liste, senkrecht untereinander dargestellt.

Hab jetzt einiges versucht, doch nebeneinander kriege ich die Bilder nicht hin.

Bildbeschreibungen, die dann in der Lightbox angezeigt werden, müssten zudem schom beim Hochladen des jeweiligen Bildes festgelegt werden. In dieser Sammel-Einfüge-Aktion hat man dafür keine Möglichkeit.

Hmm... für mich ist das so nicht wirklich brauchbar. :-( -> in der Styx-Edition sieht das gleich viel besser aus.

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.