Skip to main content Skip to page footer

Inhaltsspezifische Layouts

Rahmen (Frames) sind zentral konfigurierte Layouts für verschiedene Inhaltselemente. Frames können z. B. verwendet werden, um einem Inhaltsredakteur die Möglichkeit zu geben, ein bestimmtes Hintergrundbild und/oder eine bestimmte Farbe auf bestimmte Inhaltselemente auf der gesamten Website anzuwenden.

Trennlinie vorher

Unter [Erscheinungsbild] … [Frame Options] kann man ein Häckchen bei [Ruler before] setzen …

Trennlinie nach

Hier wird die Trennlinie nach dem Element positioniert.

Trennlinie nach Eingefärbt

Hier ist [Ruler after] gesetzt und die [Background Color] auf "light".

Trennlinie vor Eingefärbt

Du kannst die Trennlinie vor oder nach dem Element positionieren.

Eingerückt (links)

mit Senf

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Eingerückt rechts

Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.

Eingerückt, links & rechts

Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Eingefärbter Hintergrund (Light)

Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.

Eingefärbter Hintergrund (Dark)

Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.

Eingefärbter Hintergrund (Primary)

Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.

Wenn die gleichen Hintergründe aufeinander folgen, verringert sich der Abstand zwischen den Elementen.

Eingefärbter Hintergrund (Secondary)

Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.

Hintergrund-Bild (Simple)

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Hintergrund-Bild (Blur)

Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.

Hintergrund-Bild (Grayscale)

Der Text-Stil, beispielsweise “Danger” (bzw. Rot) wird übrigens durch “Background Image (Grayscale)” wieder auf “Lead” (bzw. Schwarz) zurückgesetzt. Somit ist Grayscale nur für eh schon sehr helle Bilder geeignet, da die drübergelegte Schrift sonst nicht lesbar ist.

Hintergrund-Bild (Sepia)

(Sepia) zeigt eigentlich überdeutlich, dass darüber gelegte Schrift nur sinnvoll ist, wenn man HTML5-Schlagschatten für die angewandte Schrift verwenden kann.

Hintergrund-Bild (Fade)

(Fade), wie für das Intruduction package genutzt, ist, ohne weitere Schrift- und/oder Bildbearbeitung, der einzig verwendbare Bildstil.

Hintergrund-Bild (Parallax)

Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.

Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.

Embedded

Interessant, dass das Bootstrap-Framework die Standard-Farbpallette nur teilweise als Background-Color zulässt, dafür aber anscheinend gleich zwei mal “fast schwarz”, in Form von “dark” bzw. “quaternary”. Da ist dringend Korrekturbedarf.

Alles auf “Idiotensicher einfach” festzulegen, stellt auch sicher, dass nur idiotische Ergebnisse möglich sind.

Hier würde sich aufgrängen, ein Template zu entwickeln, das bei jeglichen “Farb-Fragen” eine zuvor festgelegte “Corporate-Design-Farbpallette” zur Verfügung stellt, die dann um einheitliche Variationen in Helligkeit und Sättigung ergänzt wird. …