Don’t my forms look smart!

You remember that style sheets, used in association with SPIP, enable you to adapt the display of typographical shortcuts to your layout. It’s the same thing for SPIP-generated forms — their graphic look can be adjusted in order to fit seamlessly into your layout.

To make the most of this article, you really need some background knowledge about the HTML tags specifically used in HTML forms.

To each form its own style

All of the SPIP forms used on the public site are enclosed with a div tagged with the same style class, .formulaire_spip, which makes it very easy to make changes that will handle all of these forms in one swoop.

For example, to make all the input field descriptions show in bold (the <label> tags) din your forms, style them with:

.formulaire_spip label {
    font-weight: bold;
}

Since SPIP 1.9, each form is also endowed with a style all of its own. So to balance the generic changes above, these classes allow you to style each type of form without impacting the other types.
Each of these styles is named in the same way as the tag that calls the form and its squelette template file. For example, the HTML form for searching is called formulaire_recherche.html; this is inserted into template files using the #FORMULAIRE_RECHERCHE tag; and its associated style class is also .formulaire_recherche.
Since SPIP 1.9.2, the form templates have been relocated and renamed to match this example: dist/formulaires/recherche.html.

Styling the data entry fields

The .forml stle class is applied to the form data entry fields. It is used to define the background colour and sizes of the input fields, as well as their character size and font. For example:

.forml {
    width: 99%;
    padding: 1px;
    border: 1px solid #666;
    font-family: Verdana;
    font-size: 11px;
}

This style is particularly useful for standardising all the input fields, regardless of the tags that it is attached to, such as <input> and <textarea> tags, both of which are present in the forum form.

Since SPIP 1.9, each data entry field is tagged with an explicit term and enclosed in an HTML <label> tag. The appearance of these tags are modified using this style definition: .formulaire_spip label.

CSS styles not only allow you to change the colours and fonts for text content, but also to manage the relative positioning of the objects on the page itself. They even allow you to precisely define the position of elements in relation to each other (e.g. <input>, <textarea> and <label>), without needing to use a <table> element to position them on the page.

Buttons coloured your way

Here’s some news that will delight CSS beginners. The background colour of form fields and buttons can be changed too [1]. The .spip_bouton style is the one used for SPIP’s form buttons.

For example, for buttons to have a light blue background and a border which is sufficiently visible (thick, set in relief and dark blue), add the following style rule into your CSS file — which is called my_styles.css unless you haven’t followed our instructions very strictly:

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

The form for the forums offers a toolbar of typographical shortcuts. The appearance of this toolbar is controlled by the .spip_barre style. So to modify the appearance of the icons shown on the toolbar, and for example to distinguish each of them when the mouse hovers over an icon, you would define styles for .spip_barre a img and then .spip_barre a:hover img.

Organising your elements in a visibly logical fashion

The various elements of a form are more rigorously grouped into "logical blocks" using special <fieldset> and <legend> HTML tags. Their appearance is then quite simply controlled using .formulaire_spip fieldset and .formulaire_spip legend, (which was previously provided using .spip_encadrer). This is useful to enclose each form section with a border, and to free up some space between each of those sections if you so choose.

Some additional styles are used to refine the presentation of your forms even further:

-  The appearance of error messages and other responses returned by the forms can be customised using the .reponse_formulaire style.

-  Some forms enable a preview of the data entered before definitively submitting the form. The appearance of the preview panel is controlled by the .previsu style.

-  And finally, this last style is not for use within the forms, but is linked with the site’s internal search form: .spip_surligne is used to highlight the search terms as they occur in the results pages.