SPIP 1.9.2
You remember that style sheets, used in association with SPIP, enables 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 in your layout.
Let’s say once again that we don’t intend to go over all the styles provided with SPIP. However, you ought to know that you can change the look of all forms in the public site: forum posting forms, search forms, petition signing forms etc. [1] We’ll just give you some tips.
Colours and borders
Here’s some news that will delight CSS beginners. The background colour of form fields and buttons can be changed [2].
For example, for buttons to have a light blue background, 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;
color: black;
}Now, buttons are displayed with a light blue background (background-color property), and a black text (color property). Note that .spip_bouton is the style used for SPIP’s buttons and form fields.
Let’s now modify the look of the button borders. Traditional HTML button borders look rather old-fashioned. You can decide to make borders flat, and, on the other hand, to make them thicker for the buttons to stand out. For example:
.spip_bouton {
background-color: #b0d0FF;
color: black;
border: 2px solid #000060;
}This border property creates a dark blue-coloured, flat-looking ("solid" in CSS language), 2 pixels-wide borders round the buttons. The font type can also be changed through the font-size and font-family properties as seen in the former stages of this overview.
What about fields? Just apply the styles you’d like, to .forml instead of .spip_bouton.
A little breathing space
Style sheets make it possible not only for colours and font types to be changed but also for the relative position of objects in the page to be managed. Without going too far into the subject let’s see how forms can be given some inner spacing:
.formulaire {
background-color: #e8f4ff;
font-family: Verdana, Arial, sans-serif;
font-size: 90%;
font-weight: normal;
border: 1px solid black; padding: 10px;
}Here, we’re changing the way the .formulaire style is displayed, i.e. the main style of all SPIP-generated forms. The advantage of changing this style is that the look of all these forms can be controlled. Here, we’re setting a very light background colour, and a font style. But more importantly, the inner spacing of each form is changed separately. This is achieved through the padding property. Take good note of the fact that this breathing space effect is achieved precisely inside the borders defined by the border property. In fact, the form is seen here as an independent rectangular block.
Note: style sheets make it even possible to precisely set the layout of those rectangular blocks, in relation to one another, without using tables. However, the subject is much too wide to be dealt with in this introduction.