Logo

Home

English Polski

Just fly!

Let’s get started

arrow down

Landed at home

fhs-just-fly

Ein Multi-OnePage-Template für CMSimple_XH ≥ 1.7

Mir gehen langsam die Ideen für Template-Namen und -Themen aus. Ein wenig stöbern auf Pixabay hilft da fast immer. Schöne Bilder rund um „flying and fantasy“ fand ich – und alle mit der Pixabay License: Free for commercial use. No attribution required. Gute Leute, dort.

Aber, das war natürlich nicht der einzige Grund um dieses Template zu erstellen. Wichtigster Auslöser war ein Vorschlag von SiNiTaSa im Forum unter derRubrik „Wunschtemplate 2019“. Weiterhin kamen in dieser Disskusion nebenbei Fragen zu Multi-Onepagern auf.

Ich habe mir also das BioNick-Theme (das Wunsch-Template) etwas genauer angesehen. Ich bin zwar kein Freund von schamloser Abkupferei, doch habe ich mich dort ausgiebig inspirieren lassen. Ein bisschen Technik habe ich mir auch abgeguckt – warum das Rad neu erfinden? Eine Eins-zu-Eins-Kopie ist es dennoch nicht geworden. Das geht auch gar nicht mit CMSimple_XH – da gibt es zu viele Besonderheiten. Mir fiel dann auch noch ein Code-Schnipsel von Christoph (cmb) ein. Mit diesem Code werden alle Unterseiten einer Seite auf Level 1 zusammengefasst und als eine Seite ausgegeben. Um dann auch noch ein Sprungmenü zu den einzelnen Überschriften zu erhalten kam mir mein anchorific-Template in den Sinn, das dabei sicher helfen könnte.

Letztendlich ist das hier vorliegende Template herausgekommen. Es ist eine Kombination aus dem anchorific-Template, dem magic-hero-Template, dem BioNick-Template, dem cmb-Code-Schnipsel, keinem Onepage-Plugin und einigen bunten Bildchen die – zugegebenermaßen – ziemlich wichtig für das look and feel sind.

Besonderer Dank

Wie so oft, hätte ich das Template wohl ohne fremde Hilfe kaum zuende gebracht.  SiNiTaSa und die Leute, die das BioNick-Theme entwarfen, waren Ideengeber. Christoph (cmb) hat mit seiner Gesamtleistung für CMSimple_XH und mit oben erwähntem Codeschnipsel eine Realisation erst möglich gemacht. Holger, Ludwig (lck), Martin (Tata) und Ingo (knollsen) waren aber diesmal ganz entscheidende Mitstreiter, die wertvolle Tipps und Hinweise gaben.
Leute, euch gilt mein besonderer Dank!

Flight requirements

Einige Voraussetzungen müssen erfüllt sein:

  • Für die Auswahl der Bilder (oben und links) und für das Setzen der zugehörigen Texte wird das Plugin „morepagedata“ benötigt (im Download enthalten).
  • Unglaublich, was ein paar bunte Bildchen ausmachen. Für dieses Template solltest du ’ne Menge von diesen Dingern parat haben. Das Auge isst mit!
  • Für eine leichtere Bedienung im Adminmodus, wird das Plugin „fhs_adminmenu“ empfohlen (im Download enthalten).

Special features

Das Template hat so einige Besonderheiten, die – technisch bedingt – für Benutzer ungewohnt erscheinen dürften.

Seiten auf Level 1

Die Seiten auf der ersten Menü-Ebene müssen leer bleiben. Sie dienen nur dazu, im Hauptmenü einen Link zu erzeugen. Außerdem werden auf diesen Seiten alle Angaben zu den Bildern (die großen, oben und links) und den darüber liegenden Texten im Reiter „Extra“ eingetragen.

Unterseiten

Alle Unterseiten erscheinen als Teil ihrer übergeordneten Level-1-Seite, also darunter. Für Unterseiten können im Reiter „Extra“ zwar Angaben gemacht werden – diese werden aber logischerweise ignoriert.

Unterseiten sollten mit einer h2-Überschrift beginnen, falls das semantisch passt. Diese Überschriften erhalten dann zur besseren Übersichtlichkeit das kleine gelbe Fliegersymbol  vorne dran.

Animationen

Man kann in diesem Template so ziemlich jedem Objekt eine Animation mitgeben, die nur beim erstmaligen Erscheinen im Viewport ausgeführt wird. Das geht auch mit ganzen Seiten (siehe zum Beispiel: I believe I can fly). Dazu muss dem entsprechendem Objekt nur die CSS-Klasse wow plus eine Animationsart übergeben werden. Beispiel: <div class="wow fadeInDown">.

„wow.js“ ist eine sehr kleine JavaScript-Bibliothek, die für das Triggern beim Scrollen sorgt. „animate.css“ schafft mit reinem CSS die Bewegungs-Effekte. Der Vorteil ist hierbei, dass auch bei deaktiviertem JavaScript, alles vorhanden und sichtbar ist – nur eben ohne Animation.

Template styles

Schriften

Standard-Schriftart:
normal „Fira Sans Condensed Light“ (300)
<strong> „Fira Sans Condensed Regular (400)
.firaMedium „Fira Sans Condensed Medium (500)

Extra-Schriftart:
.handWrite „Caveat Regular“  (400)
.handWrite <strong> „Caveat Bold“  (700)

My first aircraft. It's been a long time.

My first aircraft. It's been a long time.

Bilder

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 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.

Der Mensch ist vielerlei. Aber vernünftig ist er nicht.

— Oscar Wilde

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)

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!