Das Template

fhs-left-right-17x ist ein responsives Template für CMSimple_XH ab Version 1.7.x. Es ist eine Weiterentwicklung des Templates „fhs-left-right“, das ursprünglich für CMSimple_XH 1.6.x geschaffen wurde.

Das Template hat einen „Hamburger-Button“ ( ) zum Einblenden der Navigation von links. Zusatzinfos (z.B. News) können von rechts mittels Button ( ) eingeblendet werden – wobei der komplette Inhalt in die jeweilige Richtung verschoben wird.

Optisch ähnelt das neue Template dem alten sehr. Unter der Haube hat sich allerdings vieles geändert. Die Technik, zum Einblenden der Side-Bars und zum Verschieben des Inhalts, wurde komplett erneuert und modernisiert.

Da das Internet mittlerweile „ausgebleicht“ wird (siehe Artikel bei heise), wurden die Hauptfarben etwas kontrastreicher gestaltet. Ich verwende inzwischen den Firefox ohne und Vivaldi (Chrome) mit Farbmanagement – damit ich vergleichen kann. Es ist schon merkwürdig, welche Darstellungs-Unterschiede sichtbar werden. Das macht es Template-Gestaltern nicht gerade einfacher. Ich bin mir auch noch gar nicht sicher, welche Methode nun eigentlich besser ist.

Das Template verwendet die Schriftarten Droid Serif – für den Fließtext und PT Sans Narrow – für die Überschriften, die Navigation und anderes.


Voraussetzungen


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.

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

Bilder

Beispiel-Bild

Beispielbild rechts mit BU: Vettriano

Bilder im Text rechts erhalten die CSS-Klasse imgR und nehmen damit normalerweise eine maximale Breite von 35 Prozent ihres übergeordneten Containers ein. Ist der Viewport kleiner als 480px, wird das Bild 100 Prozent 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%).


Zitate (Blockquote)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.

Ich bin ein <blockquote>-Text. Ich werde für Zitate verwendet. Viele berühmte Personen haben schon Zitate produziert und immer wieder werden diese Zitate zitiert. Mannomann, was ist denn das für ein sinnfreier Text? Aber immerhin mal was anderes als „Lorem ipsum dolor sit …“ – der Platz muss gefüllt werden.

Accordions

Wie geht das mit den Accordions?

Es ist gar nicht so schwer.

Sag schon!

Nö. Ich bin heute schreibfaul. Sieh dir mal den Quelltext an, oder kopiere dir alles und ändere es nach deinen Wünschen.

Du bist gemein!

Ich weiß.

Okay. Ich hab’s geschnallt.

War mir klar.

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.

Rolle Schauspieler Hauptrolle
(Episoden)
Nebenrolle
(Episoden)
Dr. Leonard Leakey Hofstadter Johnny Galecki 1.01–  
Dr. Dr. Sheldon Lee Cooper Jim Parsons 1.01–  
Penny Hofstadter Kaley Cuoco 1.01–  
Howard Joel Wolowitz, M.Eng. Simon Helberg 1.01–  
Dr. Rajesh „Raj“ Ramayan
Koothrappali
Kunal Nayyar 1.01–  
Dr. Bernadette Maryann
Rostenkowski-Wolowitz
Melissa Rauch 4.04– 3.05–3.14
Dr. Amy Farrah Fowler Mayim Bialik 4.08– 4.01–4.05
Stuart Bloom Kevin Sussman 6.01–6.17, 8.01– 2.20–5.24, 7.02–7.24
Debbie Wolowitz † Carol Ann Susi
(nur Stimme)
  1.07–8.08
Barry Kripke John Ross Bowie   2.12, 2.13, 3.01, 3.09, 4.17,
5.14, 5.17, 5.22, 6.14, 6.20,
7.10, 7.20, 8.10, 8.15, 9.05,
9.06, 9.15, 9.17, 10.09, 11.08

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


Video

So sieht es aus und hört es sich an, wenn gealterte Blues’er im Partykeller zu einer Jam Session zusammentreffen. Da wäre ich gerne dabei gewesen. Auch, wenn Van „The Man“ wieder mal ziemlich angestrengt aussieht und man von „Tiger“-Tom diese Art Musik gar nicht erwartet hätte. Bild und Ton sind mies – aber tolle Musik-Stimmung.

Das Video ist als iFrame eingebunden. Dieser wird in einen DIV gekleidet der die Klasse responsive-video erhält. Zusätzlich wird eine Klasse für das Seitenverhältnis angegeben: ratio16x9 oder ratio4x3.


Besonderheiten

Alle vom Template benötigten Styleheets und JavaSkripte sind in jeweils einer Datei zusammengefasst. Das vermeidet zusätzliche Server-Anfragen – vermindert allerdings etwas die Übersichtlichkeit bei der Bearbeitung der Dateien.

Wie so oft bei CMSimple_XH, entstehen im Admin-Modus kleinere Style-Konflikte. In der Hoffnung, dass es bald standardmäßig Admin-Templates für XH geben wird, wurden diese (nicht schwerwiegenden) Probleme ignoriert.


Überschrift <h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo.

Überschrift <h2>

Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.

Überschrift <h3>

Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.

Überschrift <h4>

Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere.

Überschrift <h5>

Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.

Überschrift <h6>

Quisque accumsan metus vel diam.