In the previous article, we saw what were the general advantages of using CSS stylesheets. Now we’re going to look at some specific CSS stylesheet applications within SPIP.
Styles defined by SPIP
Within SPIP, certain styles play a major role: they are used to modify the graphical properties of elements which are not defined in your HTML code (the code you enter into your squelette templates), but in the code that is generated by SPIP itself. In fact, SPIP assigns several styles to the code that it generates all by itself.
As an example of this, when you use SPIP shortcuts within the text body of your articles (e.g. for bolding text, assigning italics, creating sub-headings, tables, etc.), SPIP produces the necessary HTML tags for these effects, all of which are then also assigned a particular CSS selector attribute.
For instance,
This is a [link->http://www.spip.net/]
is turned into HTML code as shown below:
This is a <a href="http://www.spip.net/" class="spip_out">link</a>
So why is this interesting to know? These tags are assigned a specific name for the class attribute: this name defines into which "class" they belong, i.e. a collection of HTML elements which all inherit the same graphical properties as defined in the stylesheet.
In our example, the HTML code is supplemented with the CSS selector named as "spip_out". The webmaster is then free to customise the graphical display of out-going links by simply modifying the style rule for "spip_out" elements (a different colour, a coloured background, a specific font, etc.).
Most of SPIP’s text-formatting shortcuts can be defined in this way using stylesheets. This is equally valid for the automatically generated forms (respond in a forum, sign a petition...) and many other contexts as well. While some are very useful to everyone, others are meant only for webmasters keen on outlandish effects.
Where is the definition of those style sheets?
The graphical properties assign the HTML page contents are all combined into the .css files that accompany the squelette templates. The templates and their style sheets are grouped in the squelettes-dist/ directory.
- The style definitions specific to SPIP are found in the "external style sheet" named spip_style.css file. This collects together all of the style rules associated with the code as generated by SPIP itself (detailed in this section).
- Another stylesheet named spip_admin.css is used to control the appearance of the administration buttons for ("recalculate this page" etc.).
You’re welcome, and encouraged, to change these styles but you’d be well-advised to do so in a CSS file of your own to prevent your changes from being overwritten when you install an updated SPIP version.
Of course you can also insert those style definitions directly into your templates.