Die Stile von CMBasic
Kasten im rechten Bereich: »Einzelkasten«
Wie wird der Einzelkasten im rechten Bereich formatiert? Solch ein Kasten wird durch ein div mit der Stilklasse kasten erzeugt. Für die Überschrift des Kastens sorgt (ab CMBasic 1.3) eine h3. (In früheren CMBasic-Versionen war es das Tagpaar <b></b>.) Der eigentliche Text des Kastens steckt in einem Unter-div.
Überschrift des Kastens
Der Quelltext sieht also folgendermaßen aus:
<div class="kasten">
<h3>Überschrift des Kastens</h3>
<div>Text des Kastens.</div>
</div>
Die »Mehrfachkästen« im rechten Bereich
Und mit welchen Stilregeln werden die neuen Mehrfachkästen formatiert? Also die Kästen, die Sie übereinanderstapeln können und die es erst ab CMBasic 1.3 gibt?
Überschrift des Kastens
Überschrift des Kastens
Der Quelltext sieht folgendermaßen aus:
<div class="boxcover">
<div class="box">
<h3>Überschrift des Kastens</h3>
<div>Text des Kastens.</div>
</div>
<div class="box">
<h3>Überschrift des Kastens</h3>
<div>Text des nächsten Kastens.</div>
</div>
</div>
Tipp: Wir liefern auch eine modifizierte Stildatei cmbasic.css für das Template standard mit. Diese Datei wird benötigt, um den Boxeffekt für die übereinandergestapelten Kästen zu erzeugen. Sie haben Ihre eigene CSS-Datei schon modifiziert? Übertragen Sie im Zweifelsfalle diese neuen Stilregeln in Ihre eigene CSS-Datei. Achten Sie auf die Zeile:
Hinzugefügt haben wir auch folgende Stilregel, und zwar oberhalb des eben vorgestellten Bereichs.
.kasten h3 {
margin-top: 0px;
}
Diese Regel sorgt dafür, dass die Kastenüberschrift des Einzelkastens im Firefox nicht zu viel Abstand nach oben erhält.
Individuelle Grafik im Navigationspfad
Diese individuelle Grafik wird ausnahmsweise nicht über CSS gesteuert, aber trotzdem fügen wir die Info an dieser Stelle ein. Also ... erstellen Sie einfach eine Grafik mit dem Namen pathimage.gif. Das kann beispielsweise ein kleiner Pfeil sein. Legen Sie diese im entsprechenden Template-Ordner ab. Fertig.
Wenn CMBasic keine derartige Datei findet, benutzt das System weiterhin das Zeichen >. Und das ist ja nun auch nicht schlimm.
Inhalte bearbeiten mit HTML
Sie wollen Ihre Datensätze direkt im HTML-Code bearbeiten? Sie haben TinyMCE deaktiviert bzw. die Option HTML abgehakt? Bravo!
Überschriften
- Nutzen Sie für die Hauptüberschrift das Tagpaar <h1></h1>
- Eine Unterüberschrift formatieren Sie mit <h2></h2>. Diese bekommt im voreingestellten Template ein rotes Karo vorangestellt
- Auch eine <h3></h3> ist gut zum Gliedern geeignet.
- Insgesamt gibt es sechs Überschriftsebenen
Einleitungsabsatz
- Beginnen Sie Ihren Einleitungsabsatz so: <div class="lead"> und beenden Sie ihn folgendermaßen: </div>. Dann wird diese Passage fett hervorgehoben.
Absätze
- Normale Absätze notieren Sie zwischen <p></p> oder auch zwischen <div></div>
- Der Unterschied: Absätze schaffen einen größeren Abstand vor und nach sich.
Kästen im Fließtext
- Kästen können Sie auch zuweisen: <div class="rahmen"></div> weist einen Rahmeneffekt zu. Das sieht so aus:
- Außerdem gibt es einen Tipp-Kasten: <div class="tipp"></div> weist einen Tipp-Kasten zu. Das sieht so aus:
Zeichenformatierung
- Zur Zeicheformatierung empfehlen wir das Tag-Paar <b><b>, da es fett formatiert.
- Sie können auch das Tag-Paar <strong><strong> verwenden.
- Von anderen Formatierungen wie Kursiv oder Unterstrichen raten wir ab!
Einrückungen
- Für Einrückungen empfehlen wir das Tag-Paar <blockquote><blockquote>
Linien
- Und so weisen Sie eine Linie im Quellcode zu: <hr />. Und so sieht sie aus:
Bearbeiten mit TinyMCE
Klar, bequemer geht natürlich das Bearbeiten mit TinyMCE. Und auch hier kann die Codequalität überzeugen. Arbeiten Sie wie mit Ihrer Textverarbeitung:
Verwenden Sie die gleichen Stile, die wir eben besprochen haben. Im rechten Pull-down-Menü finden Sie z.B. Überschriften und Absätze, im linken die Kästen und alle nutzerdefinierten Stile. Markieren und zuweisen lautet die Devise!
Benutzerdefinierte Stile festlegen
... können Sie in der Datei cmbasic.css im unteren Abschnitt. Der Rahmeneffekt wird z.B. durch diesen Selektor erzeugt:
- .rahmen
Hier ein Bild der CSS-Datei im CSS-Editor Topstyle. Wer CSS beherrscht, kann hier ganz einfach seine eigenen Stile hinzufügen.
