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.

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.

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