Home

Was

„fhs-op2“ ist ein Template für CMSimple_XH (Version 1.6.7). Es ist geeignet für Internetpräsenzen von Einzelpersonen, kleinen Firmen, Vereinen oder zur Präsentation von (wenigen) Produkten. Es ist nicht geeignet für umfangreiche Inhalte mit „massig viel Text“ .

Grundsätzlich solltest du vor Beginn eines Projektes genau überlegen, ob du einen OnePager verwenden willst. OnePager bieten die Möglichkeit Informationen kompakt – meistens mit vielen optischen Spielereien – zu präsentieren. Zeichnet sich ab, dass die Inhalte ständig aktualisiert und womöglich gar erweitert werden müssen, solltest du lieber zu „normalen Seiten“ greifen.

Features

Wie

Im Folgenden werde ich dir die Voraussetzungen zur Verwendung des Templates erläutern, Durch einige Besonderheiten ist es nötig, dass du bestimmte Vorkehrungen triffst, bevor du loslegen kannst. Auch wenn du zu den Menschen gehörst, die „Gebrauchsanleitungen geflissentlich ignorieren“ – in diesem Fall empfehle ich: Lesen! wichtig

Bevor du beginnst

CMSimple_XH 1.6.7

• Installiere dir eine frische CMSimple_XH-Version ohne andere PlugIns. Wechselwirkungen mit anderen PlugIns sind noch nicht getestet – sie könnten Probleme verursachen. Wenn alles läuft, kannst du es ja später versuchen.
  [UPDATE:] Es sind bereits Probleme mit „Flexslider_XH“ bekannt geworden!
• Stelle in der CMSimple-Konfiguration die Anzahl der Menüeben  auf „1“. wichtig
• Bei dieser Gelegenheit kanst du auch gleich alle anderen Grundeinstellungen des CMS vornehmen.

jQuery

• Aktiviere „autoload“ in der jQuery-Konfiguration! wichtig
• jQuery ist eine Grundvoraussetzung für die Funktionalität des Templates. Falls du „autoload=on“ vergessen solltest, kann es passieren, dass du nur noch eine weiße Seite zu sehen bekommst. In diesem Fall bleibt nichts anderes, als die Pluginkonfiguration händisch zu erledigen (plugins/jquery/config/config.php).

Gleich geht’s los

Das Template verwenden

• Falls noch nicht getan, lade dir jetzt das Template „fhs-op2“ herunter.
• Entpacke das ZIP-Archiv in einen temporären Ordner.
• Den Ordner „content“ behandeln wir später – zunächst kopierst du alle Inhalte der Ordner die du eben entpackt hast (außer „content“ ), in die entsprechenden Ordner deiner CMSimple_XH-Installation. Der Ordner "php" gehört in das root-Verzeichnis von CMSimple.

Der „content“

Damit du nachvollziehen kannst, was hier eigentlich so alles passiert und vor allem „wie“, habe ich dem Paket einen Demo-Inhalt beigelegt. Der Demo-Inhalt ist praktisch der gleiche, wie du ihn hier siehst – inklusive aller Beispiele. Ich empfehle, bevor du eigene Inhalte anlegst, diesen Demo-Inhalt zu verwenden. Wie? Das kommt jetzt:

• Gehe in den Ordner „content“ deiner originalen CMSimple_XH-Installation.
• Benenne die Datei „content.htm“ um – zum Beispiel in „orig-content.htm“.
• Kopiere nun die „content.htm“ aus dem ZIP-Archiv in deinen Ordner „content“.

Jetzt noch ein paar Kleinigkeiten

Das Kontaktformular

Du hast zwei Kontaktformulare zur Verfügung. Zum Einen das klassische CMSimple-Kontaktformular, zum Anderen eine externe Alternative. In dieser Demo sind beide Varianten vertreten. Du kannst also sehen, wie sie eingebunden werden. Für das „klassische“ musst du allerdings noch deine E-Mail-Adresse in der CMS-Konfiguration eintragen. Für das alternative Formular musst du das auch tun. Und zwar so:

• Gehe in den „php“ -Ordner (CMSimple-roots) in die Datei „contact.php“.
• Trage dort deine E-Mail-Adresse unter „$to“ ein. wichtig
• Eventuell änderst du das Subjekt gleich noch mit.
• Speichern, fertig.

Der Editor „TinyMCE 4“

In diesem Template wird Bootstrap verwendet. Was das ist? Hier gibt es gute Infos dazu. Um die Bootstrap-Funktionen – zumindest einige grundlegende – verwenden zu können, musst du das mitgelieferte tinymce4-Plugin verwenden. Es sollte ja schon im PlugIn-Ordner liegen. Du musst es aber noch aktivieren: Das tust du in der CMS-Konfiguration. wichtig

Aber jetzt!

Ja. Wenn du alle oben aufgeführten Schritte vollzogen hast, kannst du das Ergebnis deiner Arbeit bewundern.

Wähle jetzt in der CMS-Konfiguration als Template „fhs-op2“.

Galerie

Mädelmit Hut

Geistin der Scheune

Restaurantin der französischen Provinz

Kameraauf’s Auge geschaut

Löwe– schon etwas älter

Fahrradsattel– auch schon etwas älter

Autowerkstatt– wahrscheinlich noch älter

Old-Schoolgut aufgenommen

Beispiele

In diesem Abschnitt werde ich dir einige Möglichkeiten aufzeigen, was du so alles mit diesem Template anstellen kannst. Natürlich nicht „alles“, das sprengte den Rahmen – nur ein paar Beispiele. Sie sind beinahe komplett mit Bootstrap realisiert. Im Quelltext kannst du nachvollziehen, wie ich es gemacht habe. Es gibt häufig verschiedene Möglichkeiten etwas umzusetzen. Vielleicht findest du elegantere Wege.

Modalboxen

Großes Modal Kleines Modal

Accordions

Die Pfeile in den Accordions werden durch ein Extra-Script gesteuert (in „main.js“).

Tabs

Zwei Spalten

PopOver

Ein PopOver oben beim Mausüberfahren. Und eins bei Klick. Und noch eins mit Rechts.

Das Eckige muss ins Runde

Obi Wan aka Prof. Proton oder vice versa

Man kann natürlich auch (runde) Bilder im Text platzieren. Wie bei mir üblich, kommt „imgR“ zum Einsatz und einige Bootstrap-Styles für „rund“ und den Rahmen. Auch hier bleibt oft nichts anderes übrig, als im Quelltext zu werkeln.

In diesem Beispiel wundert sich ein bereits in die andere Welt übergetretener Professor über seine Rückkehr als Lichtschwertträger. Sein nächtlicher Besuch – in phosphoreszierender transparenter Gestalt – bei einem Nerd, der der „Großen-Knall-Theorie“ angehört, ist durchaus erhellend und ebenso unterhaltsam. Ich hoffe, das reicht jetzt als Platzhalter-Text.

Video responsive einbinden

Es war gar nicht so einfach ein freies Beispielvideo zu finden, das einigermaßen unterhaltsam ist. Ich versuchte zunächst etwas zu finden, das meinem Geschmack entspricht. Dann kam ich aber auf die Idee mal „was ganz Anderes“ als Demo zu zeigen. Keine Sorge, die Leute, die da die Stöcke wirbeln, sind keine Militärs. Die Baseler Trommel-Tradition ist ja wohl bekannt. Aber hier fiel mir wirklich an einigen Stellen die Kinnlade runter. Was manche Leute so machen? Aber: Wir sitzen ja auch über CMSimple. Das Video, bzw. die Jungens, finde ich zumindest außergewöhnlich. Ach, und keine Bange! Jeder hat mindestens drei Drumsticks als Reserve dabei. — Das Video ist im Seitenverhältnis 16 : 9 eingebunden.

Tipps

Mir ist klar, dass dieses Template nicht ganz „simple“ ist. Das Handling ist an einigen Stellen eher holperig. Bestimmte Einstellmöglichkeiten sind schwer zu finden, da sie an verschiedenen Stellen „versteckt“ sind. Es empfiehlt sich, bei auftretenden Unklarheiten immer zuerst in den Quellcode zu schauen. Vieles erklärt sich dort. In „template.htm“ und „main.js“ finden sich die meisten Stellschrauben – also auch gute Orte bei der Suche nach Lösung. Hilft alles nichts, dann stellt man seine Frage eben im CMSimple_XH-Forum. Es gibt dort großartige Leute, die für fast alles, fast immer eine Lösung finden. Schaunmermal, ob ich hier vorbeugend einige Tipps geben kann.

Layout

Ich habe versucht das Template so vorzubereiten, dass es sauberen, richtig strukturierten und semantisch korrekten html5-Code liefert. Mach dich schlau, was dieser Satz bedeutet – dann wird es dir nicht schwer fallen, deine Inhalte entsprechend zu gestalten. Denn das liegt allein in deiner Hand.

Extra-Formatierungen für die einzelnen Abschnitte (Seiten) kannst du in „template.htm“ vornehmen. Dort findest du gleich ganz oben Einstellmöglichkeiten mit Kommentaren, wie sie in diesem Beispiel verwendet wurden.

Interne Anker

Interne Anker, zu denen „smooth“ gescrollt werden soll, müssen die CSS-Klasse „scrollTo“ erhalten – sonst scrollt nix.
Beispiel: Springe zum internen Testanker.

Der Sprung zum Anker, würde eigentlich das Ziel direkt oben auf der Seite platzieren. Die fixe Navigation überdeckte dann allerdings das Ankerziel. Es braucht also einen gewissen (Offset-)Wert um das zu vermeiden. Zu diesem Behufe kann man im Template unter „onepage_customOffset“ genau diesen Wert eintragen.

TinyMCE 4

Dieser Online-Editor wird dir helfen einen „vernünftigen“ html5-Code zu erzeugen und einige Bootstrap-Funktionen anzuwenden. Er wird dir „helfen“ – aber „nicht Alles“ für dich tun können. Es bleibt nicht aus, dass du oft im Quellcode arbeiten musst. Ein gewisses Grundwissen ist daher vonnöten. Es ist nicht besonders schwierig sich die Seite zu zerschießen, wenn man nicht weiß was man tut. Also: Öfter mal speichern und die Vorschau bemühen.

Animationen

Du hast sicher bemerkt, dass auf dieser Seite manche Objekte zu bestimmten Zeitpunkten hereinschweben, wackeln oder sonstwie auf sich aufmerksam machen. Doll, was? Auch hier wieder: Der Quelltext gibt Auskunft. In „main.js“ findest du bestimmte Wegpunkte (WayPoints), die für einige (aber nicht alle) der Effekte zuständig sind.

Welche Animationsformen kannst du verwenden? ’Ne ganze Menge! Schau im Template-Ordner und dort unter „css“ in die Datei „animate.css“. Dort sind alle Möglichkeiten aufgeführt.

Bilder

Ich habe hier auf dieser Seite verschiedene Bilder verwendet, z.B. für den Slider oben, die Galerie u.A. Diese Bilder stammen definitiv alle aus lizenzfreien Quellen, deren Ursprung ich aber momentan nicht mehr nachvollziehen kann. Ein Fehler meinerseits – aber, ich wollte dir ja was Schönes zeigen. Der Tipp also: Wenn du deine eigene Seite baust, verwende diese Bilder nicht! Und wenn du dann eigene verwendest, achte auf eine korrekte Quellenangabe.

Logout

Beinahe hätte ich es vergessen: Wenn du dich aus dem CMS ausloggst, bewahre etwas Geduld und klicke nicht gleich wild herum. Das führte nur zu falschen Anzeigen. Besser: Nach cirka drei Sekunden wird die Startseite automatisch geladen – dann kann es fröhlich weitergehen.

So langsam werden mir die Finger wund vom vielen Schreiben. Ich bin sicher, dass noch so manche Frage auftauchen wird.
Wir sehen uns dann im Forum. ;-)

Download

Kontakt

Eigentlich möchte ich nicht allzu häufig Fragen zu diesem Template per Mail erhalten – und beantworten. Ich schlage dir vor, dazu das CMSimple_XH-Forum zu nutzen. Wenn ich kann, werde ich ebenda antworten. Aber es gibt dort, wie oben schon erwähnt, ’ne ganze Menge Leute, die das wahrscheinlich besser können. Und falls ihr eine Lösung findet, haben Alle was davon. Okay?

Wenn du dieses Template allerdings tatsächlich irgendwo in die Realität getragen hast, sprich: eine Seite mit diesem Template veröffentlichst, freute ich mich über einen Link zum Anschauen.

Impressum