Die Template-Styles

Hier einige Beispiele für Styles, wie sie das Template bietet. Vieles ist gleich, wie auch bei anderen meiner Templates. Die Beschreibungen sind teilweise ebenfalls identisch, sodass sie DC erzeugen. Ismiregal, zumindest hier.

Schriften

Das Template verwendet als Standard-Schriftart „Open-Sans“. Für die ersten drei Inhalts-Überschriften, für die Hero-Überschrift und für die Navigation wird „Englebert“ eingesetzt. Vielleicht nicht gerade die schönste Kombination – für meine Verhältnisse aber abenteuerlich und mal was anderes. ;-)

Listen

Ungeordneten Listen sollte man unbedingt die CSS-Klasse ulNrml (für „ul normal“) geben. Die browsereigenen Standard-Listen sind nicht besonders schön. Site-weit kann man die ULs nicht formatieren, da es sonst Konflikte mit den systemeigenen Listen (z.B. Pagemanager) gibt. Ein altes Ärgernis bei CMSimple – finde ich.

• Ich bin ein Listenpunkt erster Klasse in einer ungeordneten Liste.
• Genau. Wir sind Ober-Listenpunkte.
  • Und ich bin nur ein Unterpunkt.
  • Ich leider auch.
• Ruhe da oben. Ich bin wichtiger.
• Ich auch.

1. Ich bin der Erste in einer geordneten Liste.
2. Ich komme gleich danach.
3. Bei mir reicht’s nur bis drei.

Bilder

Das Hero-Bild von oben

Bilder im Text rechts erhalten die CSS-Klasse imgR und nehmen damit normalerweise eine maximale Breite von 35% ihres übergeordneten Containers ein. Ist der Viewport kleiner als 480px, wird das Bild 100% einnehmen. Will man hier (wie beim Beispielbild) eine Bildunterschrift haben, setzt man zuerst einen <div> in den das Bild platziert wird. Dann erhält nur der <div> die Klasse imgR – nicht das Bild! Der BU-Text wird dann normal in einem Absatz <p> unter das Bild, aber innerhalb des <div> gesetzt. Selbstverständlich gibt es eine entsprechende Klasse imgL für Bilder im Text links.

Alle anderen Bilder im Text werden normal in ihrer tatsächlichen Größe eingefügt. Aber auch hier gilt: Sie werden nie größer sein, als der Container, in dem sie sich befinden (max-width: 100%). Auf der Startseite ist noch ein Beispiel für die Einbindung eines Bildes in voller Größe mit Bildunterschrift zu sehen. Auf der Seite Die Beispiele werden noch andere Möglichkeiten für Bilder gezeigt.

Zitate

Du kannst Zitate innerhalb eines <blockquote>-Tags setzen. Das sieht dann so aus wie unten. Autor und/oder Quellenangabe erhalten innerhalb des Blocks die Klasse blockAuth.

Ich habe keine Angst vor dem Sterben. Ich möchte bloß nicht dabeisein, wenn es passiert.

— Woody Allen

Tabellen

Wenn Tabellen die Klasse respTable erhalten, werden sie (einigermaßen) responsive. Das heißt, die maximal angezeigte Breite ist 100% – alles darüber hinaus wird scrollbar. Mit Tabellen ist das so eine Sache. Richtig responsive bekommt man sie eigentlich nur mit JS und/oder anderen Tricks. Mit reinem CSS, was wünschenswert wäre, bekommt man allerdings wiederum Probleme bei den Editoren, die zurzeit das Setzen von Data-Attributen nicht standardmäßig unterstützen. Bei der hier gezeigten Variante genügt es die Klasse zu vergeben. In allen anderen Fällen ist Handarbeit im Quelltext gefragt.

(Daten nur zur Illustration/Demonstration. Quelle: Wikipedia)

YouTube-Video einbetten

Die DSGVO hat ja für einigen Wirbel in der Szene gesorgt. Fakt ist, dass es mich immer schon gestört hat, dass bereits beim Aufruf einer Seite mit YouTube-Video (oder eines anderen Video-Anbieters) Daten verschickt wurden – ohne mich vorher darauf hinzuweisen.

Einige XHler haben sich dazu Gedanken gemacht. Ingo (knollsen) hat ein sehr schönes VideoPrivacy-Plugin zur Verfügung gestellt, das nicht nur bei YouTube-Videos die Privatsphäre schützt, sondern auch bei einigen anderen Anbietern.

Ebenso hat Holger ein YouTubePrivacy-Plugin vorgestellt, das einige kleinere Vorteile aufweist, allerdings ausschließlich mit YouTube funktioniert.

Und, um die Verwirrung komplett zu machen, habe ich Holgers Plugin genommen und einige Styles an meinen Geschmack angepasst. Diese Version verwende ich hier (siehe unten). Das Plugin ist im Download enthalten.

Candy Dulfer – Lily Was Here

Ich habe wirklich lange gesucht und trotzdem kein Video von Santanas „Black Magic Women“ gefunden. Jedenfalls keines, was die Originalversion der 70er zeigt und qualitativ vorzeigbar wäre.

Also: Rückgriff auf Mainstream. Candy Dulfer. Schonmal gehört? Es gibt nicht sehr viele Frauen auf diesem Planeten, die ein (Holz-)Blasinstrument [cmb!] so gut bedienen können. Die Dame hat schon viel solo und aber auch Gigs mit allen möglichen Musik-Größen gemacht. Unter Anderem tourte sie auch eine Zeit lang mit Van Morrisson herum. (Einer meiner Lieblinstitel, den ich hier leider nicht direkt verlinken kann: „Days Like This“ – Achtung: YouTube-Link!). Und der folgende Titel ist keine Fahrstuhlmusik, sondern hat ja auch einen schönen Vintage-Touch und auch einen Hauch von wunderbarer Dekadenz. Unterhaltung eben. 

Der Trick bei der Video-Einbettung ist hier, dass sich der Server um das Herbeiholen des Vorschaubildes kümmert. Bis zu dem Zeitpunkt, an dem du auf den Play-Button klickst, werden von dieser Seite keine Daten weitergeleitet und keine Cookies gesetzt. Erst wenn du das Video wirklich anschaust, geht die übliche Chose los. Du hast also zumindest die Wahl: wann, wie und ob.

Favicon, Apple-Touch-Icon & Co

wichtig Im Template, im Abschnitt head, gibt es die üblichen Festlegungen für die Icons usw. Die gelten natürlich nicht für deine Website! Du musst dir diese Angaben passend für deine neue Website neu generieren! Der betreffende Abschnitt ist in der template.htm durch Kommentare markiert und es steht dort auch ein Link, wo du das machen kannst.

Die generierten Icons (und alles andere) befinden sich im Template-Images-Ordner. Dort muss der neu generierte Kram auch wieder hin und die Pfade müssen im head-Bereich entsprechend angepasst werden.

Bitte nicht vergessen!

Ja, ja. Jeden Tag wird es ein bisschen komplizierter.
Wie schön einfach war es doch in den 90ern des letzten Jahrhunderts. Da brauchte das keiner. ;-)