SPIP 1.9.2
SPIP-defined styles
As you know now style sheets make it possible to centralize and manage graphic definitions much more easily than when inserted in the HTML markup. This makes the use of CSS a benefit though not necessarily one you couldn’t do without: you can still write graphic definitions here and there in your HTML markup while using a style sheet as well. In SPIP style sheets have an extra function: they’re used to edit the graphic definitions of elements that are not defined in your HTML markup (that of your template)! As a matter of fact, SPIP itself automatically generates a vast number of various display styles. So typographical shortcuts (hypertext links, subheadings, bold and italic styles, tables etc.) are turned into HTML markup in order to be displayed on the screen. This is also the case for automatic forms (forum posting, petition signing, etc.) and the like.
To enable you to change the graphic display of these styles SPIP gives them specific and fixed names (you can find a list of them in “SPIP and Style Sheets”). For example, {{{subheadings}}} don’t generate a simple <h3> tag, but a <h3 class="spip"> tag. What’s the advantage of this? Such tags have a specific name in the class attribute. That name defines the “class” subheadings belong to, i.e. a number of HTLM elements which will inherit the same graphic properties as defined in the style sheet.
Well, and how do I change the display of all SPIP subheadings? Very simply — all you need to do is open your my_styles.css (if you gave it that name) in any text editor, and add the following lines:
h3.spip {
color: red;
font-size: 18px;
}Now reload the page, and all SPIP subheadings will be displayed in red, as if by magic. Note that the other <h3> tags in your page, if any, won’t be displayed in red. If nothing of the kind is displayed check you’ve declared the style sheet in the template (inside the <head> tag as explained in the previous article), and reload the page.
Let’s briefly explain the syntax of this layout declaration :
- h3.spip, just before the curly braces, means that the declaration will apply only to <h3> tags with a class attribute equal to “spip”. Please note: neither <h3> tags without this attribute, nor tags with this attribute but not being <h3> tags will be affected.
- Curly braces enclose the list of graphic definitions associated to the style in question. Note that all the undefined properties in this list will keep their original value for the tag in question. In the present case, the <h3> tag will always render a text in bold style since nothing in the style says anything to the contrary.
- The properties listed and enclosed in braces are separated, or ended, by a semi-colon. A property is made up of a name, followed by a colon, and one or several values. Here we see the colour’s set to red and the font will be displayed in a 18 pixel size.
Important: if you add your own styles you must be aware that the name given to the
classattribute is totally arbitrary. Your browser won’t see any difference whether this atttribute is calledspip,menu-sectionsouhorsel321. The only thing that matters is that this name corresponds to the declaration you made in your style sheet.
As you can notice CSS language is very straightforward, and uses the same kind of vocabulary as classic HTML markup. While making your way into CSS you’ll keep coming across notions that are more or less taken from HTML markup, such as border, width, height etc.).
Managing the cache
Your style sheet being defined in a separate file (the now famous my_styles.css) is of great importance. In fact, that file, contrary to your templates, isn’t managed by SPIP, which doesn’t require it. As a consequence, if you edit your style sheet you won’t have to empty SPIP’s cache — you only need to reload your page in your browser. This makes layout-setting even easier.
Let’s just remind you that your style sheet must be declared in (i.e. linked to) your HTML files, and that these must be regenerated once for that declaration to be taken into account: the <link rel="stylesheet" type="text/css" href="mes_styles.css"> line must be “in the cache” for the browser to be able to fetch it.