Über das Template

Das Template „fhs-motley-tiles“ ist ein MultiOnepage-Template. MultiOnepage meint, dass Seiten auf Menülevel-1 immer inklusive all ihrer Unterseiten auf einer Seite dargestellt werden.

Der Template-Name „motley tiles“ bedeutet sinngemäß ins Deutsche übertragen: „Kunterbunte Kacheln“ – was uns auch gleich auf den Zweck des Ganzen kommen lässt.

Will man eine gekachelte Website haben, kann man das auf verschiedene Art und Weise realisieren. Die gängigste Methode wäre wohl, im Editor jeweils einen DIV-Bereich festzulegen und diesem dann eine entsprechende CSS-Klasse zu geben, die für die Platzierung im Layout sorgt. Das ist meist eine ziemliche Frickelei, überhaupt nicht flexibel, im Editor absolut unübersichtlich und auch nicht schnell änderbar.

Holgers MultiOnepage-Plugin gibt uns da ein geeignetes Werkzeug in die Hand, mit dem sich das Angestrebte ziemlich gut und einigermaßen simple umsetzen lässt. Dazu später mehr.

No one has any intention of building a wall.
But we are going to tile – and that in a really motley way!

Voraus­setzungen

Für die Verwendung des Templates „fhs-motley-tiles“ müssen folgende Voraussetzungen erfüllt sein:

  • CMSimple_XH ab Version 1.7.2 *
  • Plugin „multionepage_xh*
  • Plugin fhs_adminmenu *
  • Plugin hi_admin *
  • viel Fantasie und Vorstellungskraft für die Anordnung der Kacheln
  • „schräges“ Farbempfinden – oder besser: „Mut zur Farbe“
  • JavaScripts müssen im Browser ausgeführt werden können.
    Falls das nicht so ist, erhält der Seiten-Besucher einen mehr oder weniger diskreten HInweis.

* im Download enthalten

Ein Problem

Das Template enthält einen Content-Wrapper, der wiederum die einzelnen Seiten (die Kacheln) enthält und eine Flexbox ist. Das ist sehr schön im Frontend bei der Seiten-Ansicht. Die Kacheln werden hier zu Flex-Items und dadurch automatisch verteilt und passend angeordnet.

Im Admin-Modus haben wir es allerdings wieder mit einem typischen XH-Problem zu tun. Die Elemente auf den vom System selbst generierten Seiten, werden ebenfalls ungewollt zu Flex-Items und verhalten sich dementsprechend unerwartet und wenig schön. Lediglich auf den Seiten, auf denen die Variable $edit ansprechbar ist, konnte ich Einfluss nehmen und die Flexbox in ein einfaches Block-Element zurückverwandeln, sodass wenigstens hier eine normale Ansicht möglich ist.

Ich habe die Hoffnung noch nicht aufgegeben, dass sich irgendein PHP-Freak mal der Sache annimmt und dieses alte Problem löst. Ich wöllte schon, wenn ich denn könnte – doch hier reichen meine PHP-Kenntnisse und auch mein Wissen über die innere Struktur von CMSimple_XH einfach nicht aus :(

Glücklicherweise fiel mir kurz vor der Veröffentlichung noch das Plugin „hi_admin“ ein. Das habe ich passend gemacht, ein Admin-Template hinzugefügt und alles zusammen in den Download gepackt. Das Plugin hat zwar auch ein paar Macken – es ist schon älter – erfüllt aber seinen Zweck noch ganz gut. (Die Plugin-Konfiguration bitte nicht ändern.)

Verwendung des Templates

Man muss schon ein wenig vorausdenken, wenn man dieses Kachel-Template verwenden will. Wieviel Inhalt habe ich für eine Kachel? Welche Kachel passt daneben oder darunter? Sind meine Inhalte überhaupt geeignet in solchen Kacheln dargestellt zu werden? …

Zu beachten ist, dass nebeneinander stehende Kacheln immer automatisch die gleiche Höhe erhalten. Ist der Bildschirm zu schmal, werden die nebeneinander stehenden Kacheln untereinander angeordnet und die volle Breite einnehmen.

Styling der Kacheln

Die möglichen CSS-Klassen für das Styling der Kacheln sind auf den folgenden Seiten ausführlich beschrieben. Diese CSS-Klassen müssen nun für jede einzelne Seite (also für jede Kachel) bei der Seitenbearbeitung im Tab „Multionepage“ (über dem Editor) eingetragen werden. Das kann unter Umständen eine ganze Reihe von Klassen ergeben. Es gibt keine Beschränkungen – alle Kombinationen sind möglich, sofern sie sinnvoll sind. Die Klassen werden einfach hintereinander geschrieben, nur durch ein Leerzeichen getrennt.

Besonderes

Wenn du auf einer Seite nur wenige Kacheln mit wenig Inhalt hast, könnte es vielleicht sinnvoll sein, das Menü mit den QuickLinks auf dieser Seite gar nicht anzubieten. Verpasse in diesem Fall irgendeiner Kachel zusätzlich die CSS-Klasse noQuickLinks. Es genügt, wenn nur eine Kachel auf der Seite diese Klasse erhält (zum Beispiel nur die erste).

Tipp zu Trennungen

Bei schmalen Viewports kann es mitunter zu Layoutverschiebungen durch zu lange Wörter kommen, insbesondere bei schmalen Kacheln. Das kann man verhindern, indem man bei diesen langen Wörtern dem Browser eine Trennungsvorgabe mitteilt. Im TinyMCE positioniert man dazu den Cursor an die gewünschte(n) Stelle(n) des Wortes und fügt über das Sonderzeichen-Menü [Ω] ein „soft hyphen“ (bedingter Trennstrich) ein. Im Tiny ist das gleich das zweite Zeichen in der Glyphentabelle. Alternativ kann man in der Quelltext-Ansicht das Zeichen ­ einfügen. Das Zeichen ist nicht sichtbar, aber der Browser wird bei Platzproblemen genau an dieser Stelle das Wort trennen. Diese Empfehlung gilt übrigens für alle Websites – unabhängig vom Template. Beispiel: Genau hier auf dieser Seite ist das bei der Überschrift „Voraus-setzungen“ passiert. (Zeig mir das mal.)

— Template styles —

Schriften

Im Template „fhs-motley-tiles“ wird nur eine Schriftart verwendet.

  • normal: Open Sans (400)
  • kursiv: Open Sans (400)
  • bold: Open Sans (600)
  • bold kursiv: Open Sans (600)
  • OpenSansLight:  Open Sans (300)
  • OpenSansLight kursiv:  Open Sans (300)

Bilder

DIV imgR: The lamp

DIV imgR: The lamp

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

Ungeordnete Listen

CSS-Klasse ul.listUnordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Donec ullamcorper, nulla eu faucibus sagittis.
    • Sed a leo. Suspendisse nisl tellus, volutpat velt.
      • Fusce pulvinar ante non sapien.

Geordnete Listen

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Donec ullamcorper, nulla eu faucibus sagittis.
    1. Sed a leo. Suspendisse nisl tellus, volutpat vels.
      1. Fusce pulvinar ante non sapien.
      2. Aliquam iaculis.
    2. Vivamus posuere.Lorem ipsum dolor sit amet.
  3. Donec ullamcorper, nulla eu faucibus sagittis,.

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.

Bunt ist meine Lieblingsfarbe.

Walter Gropius

Eines Tages, als einer von uns keine schwarze Farbe mehr hatte, verwendete er blau. Der Impressionismus war geboren.

Auguste Renoir

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!

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)