Das Template „fhs-left-right“

Ein responsives Template mit Hamburger     zum Einblenden der Navigation von links und optional Zusatzinfos (z.B. News)     von rechts – wobei der komplette Inhalt in die jeweilige Richtung verschoben wird. Mitgeliefert werden die Schriftarten: Droid Serif – für den Fließtext, PT Sans Narrow – für Überschriften, Navigation und Anderes sowie FontAwesome als Icon-Ressource.

Voraussetzungen

CMSimple_XH – Version 1.6.7
jQuery – „autoload“ an
(jQuery muss vor der Installation des Templates aktiviert werden!)


Tipp: Icons aus FontAwesome im TinyMCE (3.5.11) verwenden

FontAwesome 4.5.0 ist im Template enthalten. Eine Übersicht über vorhandene Icons (sie werden ständig erweitert) findest du unter: https://fortawesome.github.io/Font-Awesome/cheatsheet/

Achtung!

Man muss die Icons nicht unbedingt verwenden. Falls doch, bitte bedenke: Die Icons können im TinyMCE nicht so ohne Weiteres eingefügt werden. Dazu musst du den Tiny manipulieren. Gehe wie folgt vor:

Öffne die entsprechende init-Datei des TinyMCE, die du verwenden willst, mit einem Texteditor. Zum Beispiel:
./plugins/tinimce/inits/init_full.js

Suche im Code die Zeilen:

...
relative_urls : true,
convert_urls : false,
entity_encoding : "raw",

Füge nach diesen Zeilen folgende Zeile hinzu:

extended_valid_elements : 'i[class],em[class]',

 

Wenn du jetzt deine Seiten bearbeitest, kannst du im Quellcode des Tiny ein Icon setzen. Willst du zum Beispiel das Icon einer Büroklammer in zweifacher Größe setzen, gehe in den Quellcode [HTML] im TinyMCE an die gewünschte Stelle und füge ein:

 <i class="fa fa-paperclip fa-2x"> </i>

Statt des <i>-Tags kannst du auch <em> verwenden. Das Ergebnis:

Noch ein Tipp für Profis

Wenn du CMSimple für Andere installierst und die Seiten später nicht selber pflegst, nimm aus dem TinyMCE die Buttons für [Schriftart], [Schriftgröße], [Schriftfarbe] und [Schrifthintergrund] heraus. Ich habe da schon schlimme Dinge gesehen. Ein Grund übrigens, warum es bei mir keine Referenzliste gibt ;-)


Listen

Ungeordneten Listen sollte man unbedingt die CSS-Klasse „ulNrml“ (für „ul normal“ ) geben. Die 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, haben die CSS-Klasse „imgR“ und nehmen normalerweise eine maximale Breite von 35 Prozent ihres übergeordneten Containers ein. Ist der Viewport kleiner als 480px, 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.

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

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.

Menu [Update 02.10.2016]

Manche User wünschen sich das Menü (   ) vollständig geöffnet, sodass alle Unterseiten permanent sichtbar sind. Das kannst du leicht im Template erreichen.

Ändere die Zeile (88) von:

<div class="menu"><?php echo toc();?></div>

in:

<div class="menu"><?php echo li($hc,1);?></div>

Fertig.


Download Version 2

Dieses Template wurde nur in der oben erwähnten CMSimple-Version, ohne weitere PlugIns getestet. Fragen zum Template kannst du im Forum stellen.

Das Template ist völlig frei nutzbar – privat und kommerziell – soweit es meinen Teil betrifft.
Beachte bitte die Rechte der anderen Autoren (CMSimple_XH, Logo, Scripte …).

Die aktuelle Version ist vom 01.12.2016 – Probleme beim Seiten-Verschieben im Pagemanager beseitigt

Newsbox News01

This box shows the content of the hidden page "News01".

More information about newsboxes can be found here:

CMSimple_XH Wiki »


Diese Box zeigt den Inhalt der versteckten Seite "News01".

Mehr Informationen zum Thema Newsboxen gibt es hier:

CMSimple_XH Wiki »

Newsbox News02

This box shows the content of the hidden page "News02".

More information about newsboxes can be found here:

CMSimple_XH Wiki »


Diese Box zeigt den Inhalt der versteckten Seite "News02".

Mehr Informationen zum Thema Newsboxen gibt es hier:

CMSimple_XH Wiki »