„fhs-op-CCR“

Ein Onepage-Template für CMSimple_XH ≥ 1.7

fhs-op-CCR ScreenshotDas Template „fhs-op-CCR“ entstand im Verlauf einer Diskussion im CMSimple_XH-Forum, wobei einige Besonderheiten zur Sprache kamen, die mit dem normalen Onepage-Plugin nicht zu realisieren waren. Es gab wirklich gute Hilfe und Unterstützung – wie das in diesem Forum beinahe immer der Fall ist. Dank an alle dafür. Diesmal hat allerdings Holger den „Vogel abgeschossen“, indem er das Original-Plugin forkte und eine überarbeitete Version zur Verfügung stellte. Diese Version verwende ich hier.

A very special and heartfelt thank you to Holger!

Besonderheiten

Das Menü

Als Erstes fällt natürlich auf, dass die Seiten im Menü nummeriert sind. Ursprünglich benötigte ich dieses Feature für ein völlig anderes Projekt. Wenigstens zur Demonstration habe ich es in dieses Template integriert. Wer diese Nummerierung nicht haben möchte, kann sie in der templat.htm ausschalten – gleich ganz oben unter TEMPLATE CONFIGURATION: $menuNumbered=false;. Dieser Tipp, der auch in normalen XH-Menüs funktionieren sollte, stammt übrigens von Tata, dem ich herzlich dafür danke.

Dass – im Gegensatz zum normalen Onepage-Plugin – hier Unterseiten verwendbar und auch im Menü darstellbar sind, haben wir Holgers Plugin-Version zu verdanken (Beschreibung hier).

CSS-Klassen für einzelne Seiten

In zukünftigen Onepage-Plugin-Versionen (aktuelle Basis ist Onepage_XH 1.0beta3) wird es die Möglichkeit geben, jeder einzelnen Seite eine Extra-Klasse zu verpassen. In diesem Template mache ich schon ausgiebig davon Gebrauch (siehe zum Beispiel: Post It).

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.

Alternatives Adminmenü

Bitte beachten! Das Plugin „fhs-adminmenu“ funktioniert nicht mit diesem Template.

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)

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

Bilder

My car needs a wash.

My car needs a wash

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

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 lese keine Anleitungen – ich drücke Knöpfe bis es klappt!

— ein XH-User

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!

Beispiele

I believe I can fly
Seite fliegt von rechts herein. Dazu bei der Seitenbearbeitung im Reiter „Onepage“ einfach nur eintragen wow lightSpeedIn.

Post It
Ein Post-It-Imitat mit reinem CSS! Bei der Seitenbearbeitung im Reiter „Onepage“ einfach eintragen postIt.

International
Alle im Template verwendeten Schriftarten verfügen über einen erweiterten lateinischen Zeichensatz plus kyrillische Schriftzeichen. Das Menü kommt mit Sonderzeichen im Seitennamen gut zurecht – auch mit Kyrillisch.

Owl Carousel
Hier musst du im Content einiges selbst basteln.

A round thing
Auch runde Seiten sind möglich. Gib deiner Seite einfach die Klasse roundThing.

Full Background
Weitere drei Beispiele, wie du einzelne Seiten gestalten kannst.

I believe I can fly

Diese Beispielseite kommt von rechts hereingeflogen und bremst dann an ihrer Endposition stark ab ;-)

Nochmal sehen? reload

Ich möchte betonen, dass niemand gezwungen ist solche Animationen einzusetzen. Und überhaupt: Unsere kostenlosen Templates sind sowiesowieso nur als Vorschlag gedacht. Selbst ich (in diesem Fall als Entwerfer) bin nicht von jedem möglichen Effekt überzeugt – möchte die Möglichkeiten aber dennoch aufzeigen. Do you get it?

Hi Schatz,

bitte nimm den Müll mit runter wenn du Zigaretten holen gehst.
Und komm' nicht wieder!

International

flag ru
Используемые шрифты также позволяют использовать тексты с кириллическими буквами.
И, конечно же, почерком.

flag de
Die hier verwendeten Schriftarten ermöglichen auch Texte mit kyrillischen Buchstaben.
Natürlich auch in Schreibschrift.

Dafür ist die CSS-Klasse .handWrite zuständig.

A round thing

 

 

 

 

Klug ist jener,
der Schweres einfach sagt.

— Albert Einstein

Full background images

Du kannst Seiten auch mit verschiedenen Hintergründen gestalten. Im Folgenden habe ich mal drei Beispiele vorbereitet.

fullBg01 fullBg02 fullBg03

Das sind die drei CSS-Klassen die einfach bei der Seitenbearbeitung im Reiter „Onepage“ eingefügt werden müssen.

In stylesheet.css im Abschnitt /* full background images */ hast du volle Kontrolle darüber, was auf den Einzelseiten passieren soll. Die Beispiele haben alle ein Seitenverhältnis von 16:9. Das ist natürlich beliebig änder- und erweiterbar. Die Bilder liegen im Template-Bilder-Ordner. Viel Spaß!

Die Bilder stammen von Pixabay.

Morgen höre ich auf

Ehrlich!

» Ich muss mal wieder raus

Leinen los!

Up, Up and Away

Ich mach’s.

Kontakt

Hier kommt das normale CMSimple_XH-Kontaktformular. Bekanntlich macht dieses Formular bei Onepagern durch die Seitenwechsel bei Fehlermeldungen oder nach erfolgreichem Versand Probleme.

Aus diesem Grunde habe ich ein alternatives Kontaktformular im Angebot.

Standard Kontaktformular






Bitte diese Zahl eingeben (Spamschutz)

20547

Kontakt (alternativ)

Hier kommt ein alternatives Kontaktformular, was keine Seitenwechsel verursacht.

Wichtig!
Für die Verwendung ist es zwingend nötig, dass du mindestens deine Mail-Adresse in der Datei im Template-Ordner
/php-contact-form/contact.php

einträgst (2x). Sonst wirst du keine Mails empfangen können.

Willst du weitere Input-Felder oder andere Formular-Elemente hinzufügen, so kannst du das in der template.htm ganz unten im Abschnitt /* Contact form ajax */ tun. Die Inhalts-Seite muss natürlich ebenfalls geändert werden. Dann ist es u.U. aber auch nötig, dass du die oben genannte php-Datei auch noch anpassen musst. Ein wenig php-Kenntnisse dürften dabei nicht schaden.

Alternatives Kontaktformular

 

Download

Lizenz

Das Template „fhs-op-CCR“ kannst du auf privaten wie geschäftlichen Seiten völlig frei verwenden. Rechte Dritter bleiben unberührt.


Tipp zur Verwendung

Da es aufgrund der vielen neuen Funktionen kaum sinnvoll erscheint einen vorhandenen Content zu verwenden, empfehle ich folgendes Vorgehen.

Lade dir das gesamte CMS inklusive Inhalt, Plugins und Template hier herunter. Kopiere das Ganze auf einen Server (besser zunächst lokal – geht aber auch online). Danach konfigurierst du das CMS nach deinen Bedürfnissen. Anschließend fügst du deine eigenen Seiten und Inhalte am Anfang, also vor den mitgelieferten Seiten ein. Triffst du auf Fragen oder Probleme („Wie hat der das gemacht?“), dann kannst du sofort auf den Beispielseiten nachsehen. Am Ende kannst du die Beispielseiten und Inhalte löschen.

Für das Onepage-Plugin kann zurzeit kein Updatecheck durchgeführt werden, da es sich noch um eine inoffizielle Version handelt.

Download: Template „fhs-op-CCR“

Version 1.0 vom 12.06.2019