Flexibles Bootstrap 4 Template in Arbeit

Alles rund um Module und Templates, die nicht Bestandteil des Core sind
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

Da unser Forenuser "DG70" ein Modul für Bootstrap 4 mitsamt aller Bootswatch Themes gebaut hat, das bald verfügbar sein wird, habe ich auf dieser Basis schon mal ein Template erstellt, zu dem ich mir gleich noch ein paar Tricks habe einfallen lassen. :mrgreen:

Zunächst mal die Basis: https://startbootstrap.com/themes/clean-blog/

Daraus wurde:

screenshot-localhost_8889-2020.03.31-15_07_48.png
screenshot-localhost_8889-2020.03.31-15_07_48.png (1.05 MiB) 5784 mal betrachtet

Ein paar Anmerkungen:

Oben links, wo "BlackCat CMS" steht, wird der WEBSITE_TITLE verwendet.
Als Hauptüberschrift über dem Hintergrundbild wird der PAGE_TITLE verwendet.
Der Text "Subtitle" stammt aus der Einstellung "Beschreibung", die sonst als META-Description im HTML-Header verwendet wird.

Ich denke, das paßt ganz gut. Ansonsten kann man sich das in den Template-Dateien anpassen.


Zu den Tricks:

In der Datei index.php gibt es ein paar Einstellungen:

Code: Alles auswählen

/*******************************************************************************
 TEMPLATE CONFIGURATION
*******************************************************************************/
$b4_clean_blog_config = array(
    'facebook_link'     => 'https://www.facebook.com/BlackCatCMS',
    'twitter_link'      => '',
    'github_link'       => 'https://github.com/BlackCatDevelopment',
    'header_img_subdir' => 'flowers',
    'header_img'        => '',
    'header_img_random' => true,
    'google_fonts'      => true,
);
/*******************************************************************************
 END TEMPLATE CONFIGURATION
*******************************************************************************/
Über die ersten 3 (*_link) kann man Links auf Facebook, Twitter und GitHub konfigurieren, die dann auf der Seite unten drunter erscheinen, siehe Screenshot. Icons, zu denen kein Link hinterlegt ist, erscheinen auch nicht. Sind alle Links leer, ist auch die komplette Zeile weg.

Die nächsten 3 (header_*) beziehen sich auf das Hintergrundbild im Header. Zum einen habe ich zwei Bildverzeichnisse "flowers" und "technical" mit jeweils 6 lizenzfreien Bildern von Pixabay gefüllt. Zwischen diesen Verzeichnissen kann man über 'header_img_subdir' umschalten. Eigene Bilder kann man dann entweder mit in die vorhandenen Verzeichnisse legen, oder man legt sich eigene Unterverzeichnisse an.
Weiterhin kann man über 'header_img' den Namen einer Bilddatei angeben, die dann auf allen Seiten angezeigt wird. Das heißt, alle Seiten haben dann das gleiche Header-Bild.
Möchte man bei jedem Aufruf ein zufälliges Bild, stellt man 'header_img_random' auf true. Sind sowohl 'header_img' also auch 'header_img_random'=>true gesetzt, "gewinnt" die Angabe "random", also das Zufallsbild.
Als letzte Option in Bezug auf das Hintergrundbild kann man im Verzeichnis /templates/b4_clean_blog/css/img/ eine Datei <PAGE_ID>_bg.jpg ablegen. Wird nun diese Seite angezeigt, wird unabhängig von allen anderen Einstellungen genau dieses Bild angezeigt. Die Endung .jpg habe ich derzeit hartverdrahtet, bei Bedarf kann man sich das in der main.tpl anpassen.

Zuguterletzt verwendet die Vorlage Google Fonts, die man ja vielleicht wegen der DSGVO nicht haben möchte. Daher habe ich auch das einstellbar gemacht. Wenn ich das Template zum Download freigebe, wird die Einstellung 'google_fonts' standardmäßig auf false stehen.

Wichtiger Hinweis: Bootstrap erlaubt out-of-the-box in der NavBar nur zwei Menüebenen, also keine verschachtelten Untermenüs. Das gilt demnach auch für das Template.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

Einschränkungen:

Da die Einstellungen wie Bildunterverzeichnis etc. global im Template eingestellt werden, kann man nicht z.B. für einen Bereich der Webseite diese Einstellungen und für einen anderen jene verwenden. Man kann also z.B. nicht für die Hauptseite ein Zufallsbild aus dem Unterverzeichnis "flowers" verwenden und für die Unterseite 1 ein festes Bild aus "technical". (Feste Bilder kann man natürlich noch über die Logik <PAGE_ID>_bg.jpg einstellen, ich will nur darauf hinaus, dass die Einstellungen eben für alle Seiten gelten.)

Bei Bedarf bzw. wenn die konkreten Anforderungen bekannt sind, läßt sich das aber mit ein wenig Programmierung einrichten.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

Und so sieht die BC1 Standardseite mit diesem Template aus:

screenshot-localhost_8889-2020.03.31-15_39_25.png
screenshot-localhost_8889-2020.03.31-15_39_25.png (1.07 MiB) 5782 mal betrachtet

Der weiße Rand rechts ist übrigens der Scrollbalken des Browsers. Das Browser-Addon nimmt den Bereich mit, ohne den Scrollbalken darzustellen.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

Aktive Unterseite im Dropdown-Menü. (Anderes Screenshot-Tool, aber diesmal war eh kein Scrollbalken vorhanden, weil die Seite leer ist. :lol: )
Dateianhänge
2020-03-31 15_43_26-.png
2020-03-31 15_43_26-.png (906.43 KiB) 5780 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

Bildverzeichnis "technical" und Variante (=Bootswatch Theme) "Cyborg". :mrgreen:
Dateianhänge
screenshot-localhost_8889-2020.03.31-15_51_59.png
screenshot-localhost_8889-2020.03.31-15_51_59.png (1.79 MiB) 5778 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

...wobei auch Bildverzeichnis "flowers" mit "Cyborg" gut aussieht...
Dateianhänge
screenshot-localhost_8889-2020.03.31-15_55_49.png
screenshot-localhost_8889-2020.03.31-15_55_49.png (1.8 MiB) 5778 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

Funzt dann auch demnächst in BC2. :mrgreen: Nicht in der Version, die gerade noch im Repo verfügbar ist, aber in der nächsten. Sobald ich die mit BC1 getestet habe.
Dateianhänge
screenshot-localhost_444-2020.04.01-18_32_16.png
screenshot-localhost_444-2020.04.01-18_32_16.png (1.27 MiB) 5767 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Flexibles Bootstrap 4 Template in Arbeit

Beitrag von shadowcat »

So, Version 0.4, die sowohl mit BC1 als auch mit BC2 funktioniert, ist im Repo verfügbar. Und die Seite zum Template benutzt dieses - offensichtlich. :mrgreen:

https://blackcat-cms.org/page/add-ons/o ... n-blog.php

Ein besonders herzliches DANKE SCHÖN! an DG70, der das Modul lib_bootstrap_4 gebaut und zur Verfügung gestellt hat, das in BC1 Voraussetzung für das Template ist!

:daumen:
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Antworten