Dokumentation zum Template von CMBasic 1.5
Diese Dokumentation gilt für CMBasic 1.5 und bezieht sich auf das Standardtemplate namens new. Sie kann bedingt auch für CMBasic 1.6 verwendet werden. Es gibt allerdings Unterschiede: CMBasic 1.6 besitzt drei neue Symbolbefehle für die index.php namens {$head} (zum Einbinden eines CSS-Links für die Lightbox-Galerie und zum Einbinden des RSS-Befehls in den Kopf), {$rssicon} (nur nötig, wenn zusätzlich das RSS-Symbol angezeigt werden soll) und {$meta} (für die Einbindung von Meta-Description).
Außerdem werden die Template-Dateien bei CMBasic 1.6 nicht mehr direkt im Stammordner, sondern im jeweiligen Template-Ordner abgelegt.
Das Verständnis der Anleitung setzt, wie schon angedeutet, sehr gute HTML- und CSS-Kenntnisse voraus. Lesen Sie vorher zur Einstimmung am besten den Beitrag Layout anpassen.
Download des Templatemusters
- Templatemuster, Zip-Archiv template15.zip (50 kB).
Ich habe Ihnen vier Musterdateien für das Layout vorbereitet - und zwar mit unterschiedlichen Entwicklungsständen. Sie basieren auf dem Standard-Layout von CMBasic 1.5, auf dem Layout new. Als Endung habe ich ganz bewusst .html gewählt, damit Sie die jeweilige Index-Datei bequem bearbeiten können!
Nutzen Sie die index.html und die mitgelieferten CSS-Dateien, um daraus Ihr individuelles Layout aufzubauen.
Normalerweise trägt die Template-Datei von CMBasic die Endung .php. In dem Zustand lässt sie sich aber schlecht bearbeiten, deshalb habe ich diese Musterdateien etwas modifiziert. Später müssen Sie die Datei dann a.) einfach zurück in index.php benennen. Sie müssen b.) außerdem am Anfang und Ende der Datei einige PHP-Zeilen ergänzen. Das war's schon. Aber das alles erledigen Sie erst ganz zum Schluss! Und zwar nachdem Sie Ihr individuelles Layout aufgebaut bzw. das Layout angepasst haben.
Ich führe Ihnen nun verschiedene Bearbeitungsstände mit Beispieldateien vor. Schauen Sie sich Schritt für Schritt die Menüs und den Inhaltsbereich an! Lernen Sie vor allem die Namen der dahinterliegenden CSS-Regeln kennen, damit Sie ggf. deren Eigenschaften ändern können.
Templatedatei untersuchen
Haben Sie das Zip-Archiv heruntergeladen und entpackt? Schauen Sie in die index.html. Sie enthält das Standard-Layout von CMBasic 1.5 in der Urfassung - also ohne Beispieldaten. Wie sie sehen wird die Seite komplett durch CSS aufgebaut. Es gibt keinerlei unsichtbare Tabellen. Der dazugehörige CSS-Pfad heißt in diesem Beispiel css/mytemplate, wobei mytemplate natürlich durch einen von Ihnen frei zu wählenden Ordnernamen ersetzt werden kann.
Wichtig zu wissen: Diesen Ordnernamen legen Sie in der config.inc.php fest. Damit teilen Sie allen CMBasic-Dateien mit, wo sich das Layout befindet.
Die eigentliche CSS-Datei heißt dabei stets cmbasic.css, von dieser Benennung dürfen Sie nicht abweichen. Die Datei für den Ausdruck, die uns an dieser Stelle weniger beschäftigt, nennen Sie dagegen stets cmbasic_print.css.
Diese DIVs steuern das Template, sie tragen allesamt eine id:
- mother: DIV enthält logo, navi, content und footer, ist also der »gesamtumspannende« Container
- logo: DIV-Container für das Logo, kann z.B.mit Hintergrundfarbe oder Grafik gestaltet werden
- search: DIV für das Suchformular, befindet sich innerhalb von logo, kann aber überall hin versetzt werden
- navi: DIV für den Hauptnavigationsbereich, auch hier lässt sich die Position frei festlegen.
- content: DIV für den Inhaltsbereich, also den Content
- footer: DIV für die Fußzeile
Sie können Anordnung, Größe und Ausrichtung dieser DIVs bequem über die CSS-Datei cmbasic.css steuern.
Sie können zum Bearbeiten der index.html einen guten Layout-Editor wie Dreamweaver, Expression Web oder den kostenfreien NVU Composer verwenden. Profis allerdings bevorzugen sicher die Handarbeit. Hier bietet sich beispielsweise der Editor Weaverslave (http://www.weaverslave.ws) an. Wichtig ist, dass Sie sich gut mit HTML und CSS auskennen, sonst haben Sie keinen Erfolg!
Die PHP-Einschübe
Dreh- und Angelpunkt von CMBasic sind die PHP-Einschübe namens {$title}, {$menu} und {$content}. Das ist das ganze Geheimnis des Systems! Es handelt sich um Platzhalter für die dynamisch auszugebenden Inhalte. Das sind praktisch die Stellen, an die später die Einträge aus der Datenbanktabelle rutschen! Außerdem gibt es drei "freiwillige" PHP-Einschübe. Es sind {$topmenu} für das Topmenü, {$path} für den Navigationspfad und {$felog} für den Frontend-Loginbereich.
Hier noch einmal alle Einschübe im Überblick:
- {$title} - steuert den Seitentitel
- {$menu} - erzeugt das Hauptmenü
- {$content} - Platzhalter für den Inhaltsbereich.
- {$topmenu} - erzeugt das obere Menü, falls gewünscht
- {$path} - erzeugt den Navigationspfad, falls gewünscht
- {$felog} - generiert den ebenfalls freiwilligen Frontend-Einloggbereich
Außerdem gibt es seit Version 1.6 noch folgende Einschübe, die in dieser Anleitung bisher keine Rolle spielen:
- {$meta} - wird unterhalb des TITLE-Tags notiert und bindet die Meta-Description ein
- {$head} - wird oberhalb des HEAD-Ausschalt-Tags notiert und bindet zusätzliche CSS- bzw. RSS-Links ein
- {$rssicon} - wird an beliebiger Stelle im BODY notiert und blendet ggf. ein RSS-Symbol mit Feedlink ein
Im Prinzip sind alle Einschübe freiwillig. Sie wünschen kein Menü? Vielleicht, weil Sie nur wenige Seiten integrieren wollen und das Menü daher grafisch aufbauen? Dann können Sie natürlich auch den {$menu}-Einschub weglassen!
Position der PHP-Einschübe
Und so sieht die index.html der Standard-Variante im Browser aus. Ich habe die PHP-Einschübe mit Pfeilen gekennzeichnet. Die dazugehörige Muster-CSS-Datei cmbasic.css liegt, wie schon erwähnt, im Ordner mytemplate. Die Position der Einschübe ist natürlich nur ein Vorschlag. Niemand hindert Sie daran, das Menü rechts und den Inhalt links einzubauen.
- Beispieldatei index.html aufrufen (neues Fenster)
Nutzen Sie diese index.html nun, um das Grundlayout von CMBasic festzulegen: Breite, Farben, Hintergrundeffekte ...
Weitere Beispieldateien
Klar, jetzt wollen Sie natürlich auch wissen, wie die einzelnen Elemente gestaltet werden. Also die Menüs, der Navigationspfad oder der Inhalt. Daher habe ich alle diese Einschübe abwechselnd durch die entsprechenden Beispieldaten ersetzt. So erkennen Sie, mit welchen Stilklassen diese formatiert werden.
Menü {$menu} und Inhalt {$content}
Schauen Sie sich zuerst diese Seite an. Hier erkennen Sie, wie Sie das Menü und den Hauptinhalt gestalten können.
- Beispieldatei menu_content.html aufrufen (neues Fenster)
Die wichtigsten Hinweise entnehmen Sie direkt aus der HTML-Datei.
Topmenü {$topmenu} und Navigationspfad {$path}
In dieser Datei zeige ich Ihnen Beispieldaten für das Topmenu und den Navigationspfad.
- Beispieldatei topmenu_path.html aufrufen (neues Fenster)
Frontend-Loginbereich {$felog}
- Beispieldatei felog.html {$felog} aurufen (neues Fenster)
Sie finden diese Beispieldateien auch im schon erwähnten Zip-Archiv template15.zip. Schauen Sie einfach dort herein und vollziehen Sie die Benennung der Stilregeln nach!
Listen- und Blogeinträge
- Beispieldatei list_blog.html aurufen (neues Fenster)
Schauen Sie in die Datei list_blog.html. Dort zeige ich Ihnen, wie Listen- und Blogeinträge formatiert werden.
Der HTML-Quellcode
Nun können Sie den HTML-Quellcode der index.html und den CSS-Quellcode der cmbasic.css ganz nach Belieben bearbeiten und ergänzen. Bauen Sie die Seite grafisch so auf, wie es Ihnen gefällt und wie es Ihrem Können entspricht. Sie müssen dafür - anders geht es leider nicht - aber wirklich ein HTML-/CSS-Könner sein.
Anpassen des CSS-Pfades
Das Layout steht und gefällt Ihnen? Herzlichen Glückwunsch! Nun müssen Sie am Schluss nur noch den Pfad zur CSS-Datei anpassen. Ersetzen Sie also den Platzhalter mytemplate an zwei Stellen durch {$cssfolder}. Auf diese Weise wird später der Name des Templates dynamisch eingetragen. (Sie könnten zwar den Namen des Ordners auch direkt im Pfad stehenlassen. Die PHP-Einschubs-Variante ist jedoch sicherer.)
Ergänzung der PHP-Zeilen
Aber das genügt noch nicht! Nach dem Bearbeiten wird es Zeit, das Template in die für CMBasic gültige Form umzuwandeln. Zur Erinnerung: CMBasic benötigt eine Datei namens index.php. Ergänzen Sie zuerst am Anfang der PHP-Datei folgende fünf Zeilen. Notieren Sie also noch vor der Dokumenttyp-Deklaration:
Am Schluss, also unterhalb des ausschaltenden HTML-Tags, notieren Sie folgende zwei Zeilen:
Benennung auf index.php ändern
Ändern Sie dann noch Benennung von index.html zu index.php und tragen Sie in der config.inc.php den Namen Ihres CSS-Ordners ein.
Legen Sie die index.php in den Stammordner und legen Sie Ihren individuellen CSS-Ordner, im Beispiel mytemplage oder modern oder wie auch immer, unter dem Pfad css ab.
Template für Weitergabe vorbereiten
Sie wollen das Template weitergeben? Dann benennen Sie die index.php in index.php.tpl und legen diese Datei direkt im CSS-Ordner ab. Im Beispiel also unter mytemplate bzw. modern. Das ist die Art und Weise, in der auch die anderen Templates vorbereitet wurden.