Credits
Das Template stammt ursprünglich von hier: https://startbootstrap.com/themes/clean-blog/ (MIT License)
Die im Download mitgelieferten Bilder stammen von Pixabay. Sie sind in erster Linie dafür gedacht, dass man gleich nach der Installation eine schöne Optik hat und eine Vorstellung von der Wirkung bekommt. Natürlich sollte man die Bilder für den Produktiveinsatz durch eigene ersetzen. Da die Bilder von Pixabay lizenzfrei sind, können sie aber auch weiter verwendet werden.
Konfiguration
Das Template "Bootstrap 4 Clean Blog" liefert ein paar Template-Optionen, die in der Datei
CAT_PATH/templates/bs4_clean_blog/index.php
vorgenommen werden. Der entsprechende Abschnitt sieht direkt nach der Installation so aus:
Anmerkung: Bei einem Texteditor ohne "Syntax Highlighting" ist die Schrift normalerweise einfarbig, also z.B. schwarze Schrift auf weißem Hintergrund. ;)
Kopfgrafik anpassen
Die verwendeten Kopfgrafiken befinden sich im Verzeichnis
CAT_PATH/templates/bs4_clean_blog/images
Dort existieren nach der Installation des Templates zwei Unterordner mit jeweils 3 Beispielbildern von Pixabay:
- flowers
- technical
Das gewünschte Verzeichnis wird in der o.g. Datei index.php in der Zeile 'header_img_subdir' eingetragen.
'header_img_subdir' => 'flowers',
oder
'header_img_subdir' => 'technical',
Diese Seite verwendet 'technical'.
Um eigene Kopfgrafiken zu verwenden, gibt es nun zwei Möglichkeiten:
- Hinzufügen oder Austausch in einem der beiden o.g. Verzeichnisse
- Anlegen eines eigenen Verzeichnisses unterhalb von
CAT_PATH/templates/bs4_clean_blog/images
Zu den Kopfgrafiken existieren neben dem Namen des Unterverzeichnisses noch zwei weitere Einstellmöglichkeiten:
| header_img |
Hier kann der Name eines Bildes angegeben werden, das dann auf allen Seiten angezeigt wird. Das angegebene Bild muss in dem Verzeichnis liegen, das in der Einstellung 'header_img_subdir' angegeben wurde. |
| header_img_random |
Hier existieren zwei mögliche Einstellungen, nämlich true oder false, jeweils ohne Anführungszeichen. Die Einstellung true bedeutet, dass bei jedem Seitenaufruf ein zufälliges Bild aus dem Bildverzeichnis ermittelt und angezeigt wird. Entsprechend bedeutet die Einstellung false das genaue Gegenteil. Bei false sollte mit der Einstellung header_img ein festes Bild eingestellt werden. |
Wird mit header_img ein festes Bild eingestellt und gleichzeitig header_img_random auf true eingestellt, "gewinnt" die Einstellung header_img_random. Es wird dann also trotzdem ein Zufallsbild angezeigt. Das gilt auch, wenn header_img_random auf false gesetzt ist, aber kein festes Bild mit header_img gesetzt wurde. Kurz gesagt: Im Zweifel wird immer ein Zufallsbild angezeigt.
Google Fonts verwenden
Das Original-Template von startbootstrap.com verwendet Google Fonts, was möglicherweise nicht DSGVO-konform ist. Daher ist die Nutzung standardmäßig deaktiviert, das heißt, die Einstellung ist auf false gesetzt. Will man - auf eigene Verantwortung! - die Google Fonts verwenden, kann statt dessen true (ohne Anführungszeichen) eingetragen werden.
Fußzeile: Twitter, Facebook, GitHub
In den Einstellungen ganz oben, auf der Seite aber ganz unten: Links zu Facebook, Twitter und GitHub. Ich war so frei, Facebook und GitHub auf BlackCat CMS zu verlinken, aber das wird man sich natürlich entsprechend anpassen wollen. Kurz gesagt: Den jeweiligen Link (in Anführungszeichen) eintragen, und schon ist das entsprechende Icon im Seitenfooter präsent. Ist der Link hingegen leer, ist auch das Icon nicht vorhanden. Es gehen dann also keine Links ins Nirvana.
Sind alle drei Links leer (wie im Screenshot bei twitter_link zu sehen durch leere Anführungszeichen einzustellen), fehlt die komplette Icon-Zeile.
Last but not least: Bootswatch als Variante
Vorab: Nicht alle Bootswatch-Varianten sehen out-of-the-box gut aus, das muss man ausprobieren und dann ggfs. über die frontend.css nachbessern. Allgemein läßt sich aber über die Variante fix eine Anpassung - zumindest der Farben - erzielen.
Bildnachweise
Verzeichnis 'flowers'
Mohn (sunset-174276_1280.jpg): Bild von Dani Géza auf Pixabay
Orange Blumen (flowers-3215188_1280.jpg): Bild von CANDICE CANDICE auf Pixabay
Gelbe Blume (flower-gerbel-3720383_1280.jpg): Bild von fernando zhiminaicela auf Pixabay
Verzeichnis 'technical'
Zahnräder (gears-1236578_1280.jpg): Bild von MustangJoe auf Pixabay
Motor (motor-768750_1280.jpg): Bild von Free-Photos auf Pixabay
Raumschiff (ufo-2289563_1280.jpg): Bild von JAKO5D auf Pixabay