CMSimple_XH Dokumentation

Die CSS Formatierung im Template ändern

Formatierung des Templates mittels CSS in der Stylesheet Datei
Das Template01 ist jetzt zwar funktional an CMSimple_XH angepasst worden, allerdings muss noch die Formatierung von Schriftart, -größe, Farbe, Anordnung, ... mittels CSS definiert werden.
Als Informations- und Nachschlagewerk für CSS bietet sich beispielsweise das Wiki von SelfHTML an.

In dem folgenden Abschnitt werden die Anpassungen an der CSS-Formatierung aufgeführt, die in der Stylesheet.css vom "template01" eingetragen werden.

Als grundlegende Formatierung werden für die ganze Website einige Rahmenbedingungen vorgegeben:
    Die Schriftart und -größe werden für alle Bereiche definiert:
    Änderung in der Stylesheet.css:

    body {
        /* font: 12px/18px Arial, sans-serif; (auskommentiert, 
          kann auch gelöscht werden) */
        font: 100% Arial;
    }

    Die Formatierungen für H1 - H6 und ein Abstand zwischen den "P-Blöcken" im Content werden definiert :
    Ergänzung in der Stylesheet.css:

    .wrapper {
    ...
    }
    /* Formatierung für h1 - h3 */
    h1,h2,h3{
        font-size:130%;
        color:#004090;
        padding-top:.5em;
        padding-bottom:.5em;
        text-shadow:0 1px 1px gray
    }
    /* Formatierung für h4 - h6 */
    h4,h5,h6{
        font-size:110%;
        color:#004090;
        text-shadow:0 1px 1px gray
    }
    /* Abstand zwischen den "P-Blöcken" im Content*/
    p{
        margin:1em 0;
        line-height:1.3
    } 

 Header formatieren: (Hintergrundfarbe, Seitentitel)
    Eine andere Hintergrundfarbe dem Header zuweisen:

    .header {
        ...
        background: #FFFF66; /* old: #FFE680, new: #FFFF66 */
    }

    Der Seitentitel formatieren:
    Der Seitentitel soll im Header zentriert, in einer größeren Schrift und in Farbe dargestellt werden:
    Ergänzung in der Stylesheet.css:

    .header h1{
        font-size:2.5em;
        text-align:center;
        padding:1.1em;
        color:#990000;
    }

    Damit die "H1" Formatierung im Header erkannt und genutzt werden kann, muss die Wiedergabe des Seitentitels als "H1" im Template gekennzeichnet werden:
    Ergänzung in der template.htm:

    <header class="header">
        <h1><?php echo sitename()?></h1>
        <!-- Header -->
    </header><!-- .header-->

Menü (linke Spalte) formatieren
In der linken Spalte (Menü) soll eine andere Hintergrundfarbe, Menü Schriftgröße, Zeilenabstände und Einrückungen bei den untergeordneten Menülevel sichtbar sein:
    Ergänzung in der Stylesheet.css:

    .left-sidebar {
        ...
        background: #FFF996;  /* old: #B5E3FF */
        font-size: 1em;
    }
    /* Abstand zwischen den "P-Blöcken" im Content*/
    p{ 
        margin:1em 0;
        line-height:1.3
    } 
    /* Einrückung bei einer Auflistung */
    li{
        line-height:1.5em
    }
    ul,ol{
        list-style:none;
        margin-left: 10px;
    }

In der linken Spalte (Menü) soll unterhalb des Seitenmenüs (H1 - H3 Menülevel) (etwas abgesetzt) jeweils ein Link zum Inhaltsverzeichnis und zum Kontaktformular (bei einer eingetragenen Mailadresse in der CMSimple_XH Konfiguration) angezeigt werden.
    Ergänzung in der template.htm:

    <aside class="left-sidebar">
        <!-- Left Sidebar -->
        <?php echo searchbox();?>
        <?php echo toc();?>
        <?php echo tag('br');?>
        <ul>
            <li><?php echo sitemaplink();?></li>
            <li><?php echo mailformlink();?></li>
        </ul>
    </aside><!-- .left-sidebar -->

News (rechte Spalte) formatieren
In der rechten Spalte (News) soll eine etwas kleinere Schriftgröße und runde Ecken des News Bereiches sichtbar sein, sowie der Text nicht bis an den Rand gehen (Abstand des Textes zum Außenbereich).):
    Ergänzung bzw. Änderungen in der Stylesheet.css:

    .right-sidebar {
        float: left;
        width: 200px;
        /*margin-left: -200px; (auskommentiert, kann auch gelöscht werden)*/
        margin-left: -210px;
        position: relative;
        background: #FFACAA;
        font-size: 0.9em;
        border-radius:5px;
        padding: 5px 5px 5px 5px; 
    }
Anmerkung: "margin-left:" wurde wegen dem 2 x 5px Rand auf 210px erhöht.

Footer formatieren
Im Fußbereich soll eine etwas kleinere Schriftgröße und runde Ecken des Footer Bereiches sichtbar sein, sowie der Text zentriert dargestellt werden:
    Ergänzung bzw. Änderungen in der Stylesheet.css:

    .footer {
        height: 50px; /* old: 80px */
        background: #BFF08E;
        text-align:center;
        font-size: 0.8em;
        border-radius:5px;
        padding-top: 30px; 
    }
    Anmerkung: Damit die Höhe vom Footer bei 80px bleibt, 
    muss die Pixelangabe von padding-top von height abgezogen werden.

Das Ergebnis sieht bis an dieser Stelle der Anleitung wie folgt aus:

Hartmut Keil - http://cmsimplexh.webdesign-keil.de - Stand: 11.01.2016