Schön sind sie, meine Formulare!

Sie erinnern sich, daß die Stylesheets, wenn man sie mit SPIP verwendet, die Anpassung der Darstellung der typographischen Abkürzungen an Ihre Seitendarstellung erlauben. Bei den von SPIP erzeugten Formularen verhält es sich nun ebenso: deren graphisches Erscheinungsbild kann modifiziert werden, damit sie sich nahtlos in das Design Ihrer Site einfügen.

Nochmals: wir wollen an dieser Stelle nicht sämtliche von SPIP gelieferten Stile vorführen. Sie sollten aber wissen, daß Sie das Erscheinungsbild sämtlicher Formulare des öffentlichen Bereichs ändern können: des Formulars zum Posten in den Foren, des Suchformulars, des Formulars zum Unterschreiben von Petitionen usw.  [1]. Wir beschränken uns hier darauf, einige Rezepte anzugeben.

Farben und Oberflächen

Hier folgt eine Neuigkeit, mit der wir den CSS-Anfängern eine Freude bereiten wollen: man kann die Farbe der Felder und der Buttons der Formulare ändern  [2].

Wenn beispielsweise die Buttons eine hellblaue Grundfarbe haben sollen, stellen Sie in Ihrer CSS-Datei die folgende Regel auf (wenn Sie dieser Einführung buchstabengetreu gefolgt sind, trägt diese Datei den Namen meine_styles.css):

.spip_bouton {
    background-color: #b0d0FF;
    color: black;
}

Von nun an erscheinen die Buttons mit einer hellblauen Grundfarbe (die Eigenschaft background-color) und schwarzer Beschriftung. Merken Sie sich, daß .spip_bouton der Stil ist, der für die Buttons der SPIP-Formulare benutzt wird.

Modifizieren wir nun das Erscheinungsbild der Umrandung der Buttons. Die traditionelle Oberflächengestaltung der HTML-Buttons wirkt ein wenig altertümlich. Man könnte beschließen, die Umrandung abzuflachen und den Button selbst im Gegenzug zu vergrößern, damit er gut sichtbar bleibt. Zum Beispiel:

.spip_bouton {
    background-color: #b0d0FF;
    color: black;
    border: 2px solid #000060;
}

Wenn die Eigenschaft border auf diese Weise definiert wird, führt das zu einem zwei Pixel breiten Rand von flachem («solid» in der CSS-Sprache) Aussehen und dunkelblauer Farbe um die Buttons herum. Man könnte außerdem die Beschriftung der Buttons modifizieren (mit den Eigenschaften font-size und font-family, wie man es bei den vorhergehenden Schritten dieser Einführung gelernt hat).

Und wie steht es mit den Feldern? Dafür müssen Sie lediglich Ihre Auswahl anstatt auf den Stil .spip_bouton auf den Stil .formul anwenden.

Platz da!

Stylesheets erlauben nicht nur die Änderung von Farben und Schriftarten, sondern auch die Verwaltung der Anordnung der Objekte auf der Seite relativ zueinander. Ohne hierbei allzusehr ins Detail zu gehen, wollen wir zeigen, wie man den Formularen etwas Luft verschaffen kann:

.formulaire {
    background-color: #e8f4ff;
    font-family: Verdana, Arial, sans-serif;
    font-size: 90%;
    font-weight: normal;
    border: 1px solid black;

   padding: 10px;

}

Hier modifizieren wir die Anzeige des Stils .formulaire; dies ist der allgemeine Stil für alle von SPIP erzeugten Formulare. Mit der Modifizierung dieses Stils bezweckt man, auf die Anzeige sämtlicher Formulare Einfluß zu nehmen. In unserem Beispiel hat man ihnen eine sehr helle Grundfarbe und eine Schrift verordnet. Darüberhinaus aber hat man mit der Eigenschaft padding die Raumverteilung im Inneren aller Formulare individuell maßgeschneidert modifiziert. Beachten Sie, daß diese Raumverteilung sich genau am Inneren der Begrenzung orientiert, die durch die Eigenschaft border definiert wird: das Formular wir dabei als unabhängiger rechteckiger Block betrachtet.

Anmerkung: Die Stylesheets gestatten sogar, die Anordnung dieser rechteckigen Blöcke relativ zueinander genau zu definieren, ohne daß man zur Seitendarstellung Tabellen verwenden müßte. Eine genauere Behandlung dieses Themas würde allerdings den Rahmen dieser Einführung sprengen.