If you already know the CSS language (otherwise first read this article: "Introduction to style sheets"), you can very easily modify the appearance of your site without even having to know anything about SPIP’s internal language of loops and tags.
Creating your own stylesheet
When you first install SPIP, the squelette templates are distributed with several "external stylesheets" which combine together the rules used to generate the graphical mark-up of your site. You can modify these files and add your own rules to them, but it’s generally a better idea to do these modifications and additions in your own CSS stylesheet so that your creativity is not obliterated when you next install an update to the SPIP core software.
Important: never work directly in the files supplied by default, otherwise you will run the very serious risk of losing all your customisations when you update SPIP itself! To avoid losing the changes, almost make copies of any "core" files that you do decide to change anyway.
1. Create a file named my_styles.css (or whatever it is you have decided to call it) and store it in your "squelettes" folder. You will copy into this file all the style rule definitions that you would like to use and modify; but for the purposes of this tutorial, we’re going to assume that you’re starting off with a completely empty stylesheet.
2. Call this stylesheet in the header section of your squelette templates, i.e. between the <head> tags in the HTML file (right after the title and other similar meta tag fields). This call should look something like this:
<link rel="stylesheet" type="text/css" href="#CHEMIN{my_styles.css}" />
Often a single style sheet is sufficient for the entire graphic design of a site, but you can declare as many style sheets as necessary.
Respecting the "cascade"
It is important to keep in mind how the cascade component of CSS: when several style definitions are applicable to a single given element, the closest style for the element is the one that takes priority. What is close is affected by the order in which the style rules are "read", so this is therefore a very important matter.
- External stylesheets
If you use several stylesheets, note that the order in which they are referenced in the page header is important. If you first call my_styles.css and then spip_style.css, then the rules in the latter file will take priority, because they are closer to the elements to which they apply, which means that they will override your rules. Remember, then, to call your stylesheets in the opposite order:
<link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}">
<link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}">
- Styles defined in the HTML code
If you do not want to touch the CSS files, you can still continue to insert, in all the necessary spots, the graphical instructions directly into the HTML code of your squelette templates: either by defining some style rules in the head section, and/or by attaching the style rules directly onto the HTML tags inside the page.
The style attached directly to the tags, being the closest to the elements in question, will take priority over those defined in the head, which themselves will take priority over any external stylesheets.
Styles that have "class"
So how can we change, for example, the appearance of all of the sub-headings generated by SPIP? This is actually very easy. Open up your my_styles.css file in a text editor and add the following line:
h3.spip { color: red; font-size: 18px; }
Now reload the page: all of the sub-headings now magically appear in red; note that if you have any other h3 content on your page, then they will not be displayed in red.
A brief explanation of the syntax of this page formatting rule is in order:
- h3.spip just before the braces means that the rule only applies to the <h3> tags that have been assigned a class attribute equal to "spip". Note: none of the <h3> tags without that attribute, and no other tags that do have that attribute but are not actually <h3> tags, will be affected by this rule.
If you add in your own style rules, note that the value assigned to the class attribute is completely arbitrary. The only thing that matters, is that you use the same name in the HTML code (class="toto") and in your CSS stylesheet (.toto { ... }).
Remember, though, that you can not actually rename the class attributes associated with the code generated by SPIP (which have style definitions all combined in [spip_style.css{}->1177]).
- The braces contain the list of graphical properties associated with the style rule as defined. In our example we note the the colour is set to be read and that the font in question will be displayed with a size of 18 pixels.
Note that all of the properties that are not defined in this list retain their normal values for the tag in question: in our example, the h3 will always still generate a text displayed in bold, because nothing in your style definition has instructed that "standard" rule to be overwritten.
Managing the cache
The fact that the style rules are defined in a separate file has an important consequence. In fact this file, as opposed to your squelette templates, is not managed by SPIP (it doesn’t need it at all!). This means that if you modify a stylesheet, you do not need to empty the SPIP cache: just reload the page from your browser . This makes it even easier to adjust the layout.
Remember still that your stylesheet must be declared in your HTML files, and that they must be recalculated any time that you change them for their contents to be reflected on the browser screen.