SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [uk] [vi] [zh] Espace de traduction

Download

SPIP and Style Sheets (CSS)

April 2004 — updated on : August 2010

All the versions of this article:

The SPIP-generated code is flush with opportunities for easy CSS styling.


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. Since SPIP 1.8, 1.8.1, the templates and the stylesheets are all stored in the dist/ directory. Since SPIP 2.0, they are now all stored in the squelettes-dist/ and/or squelettes/ directories. In even earlier versions, they were found at the site root.

-  When installing SPIP with the default templates, the style sheet definition can be found in the 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 (available since SPIP 1.8, 1.8.1) 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.

Note that cascading style sheets aren’t a SPIP-related norm, but a Web Standard. A great amount of documentation can be found on CSS — see for instance the W3C page on this matter.

In order to follow what’s coming next, you’re advised to open the "spip_style.css" in a text editor.

Hypertext Links

The first two definitions can change the appearance of "a" and "a:hover"; they’re very basic and apply to all the links displayed on your web page — you can display links without decoration (they won’t be underlined), and manage the way they behave when the mouse pointer hovers over them).

Next come three definitions that are specific to typographical short-cuts in SPIP: "a.spip_in", "a.spip_out", "a.spip_url".

-  a.spip_in applies to links pointing to pages inside your site, as in this example:

This is an [internal link->article1177]

-  a.spip_out applies to links pointing to pages outside your site, as in this example:

This is an [external link->http://www.spip.net/]

-  a.spip_url deals with those URLs that are turned into hypertext links, as in this example:

[->http://www.spip.net/]

(this shortcut displays the plain URL with an hypertext link leading to the address http://www.spip.net/).

The main advantage of these three different styles is to distinguish between links pointing inside the site and those pointing to other sites.

Subheadings

Subheadings are created by the following short-cut:

{{{A Subheading}}}

Their style can be defined using h3.spip. This style is probably one of the most important because it enables you to set the font-size, the font-family, and the position of subheadings in articles. You’re likely to have to edit it according to your graphic and typographical choices.

The default definition of subheadings is as follows:

Note in particular the margin and padding properties which give you control over spacing between the subheading and the adjacent paragraphs. Without this setting the subheading would be very likely to be either too close to the rest of the text or not close enough (depending on your taste).

Codes and Frames

Code elements are defined by the following short-cut:

<code>Some code in your text</code>

They can be set by the .spip_code style which is seldom used except in technical documentation like this one, containing bits of computer code, or file and directory names.

The <cadre>...</cadre> tag, introduced with SPIP 1.3, makes it possible to display some source code in a form element in which the text can be easily selected for copying and pasting elsewhere. The associated style is .spip_cadre, the default definition of which is:

Footnotes

Footnotes are defined by the following short-cut:

The text[[footnote]]

They are defined by the p.spip_note style. This style can be useful to avoid inserting changes into the HTML code when using the SPIP #NOTES tag in your templates.

Tables

Tables in SPIP are defined in the following way:

| {{Name}} | {{Date of Birth}} | {{Country}} |
| John | 5/10/1970 | Canada |
| Lakshmi | 12/2/1975 | India |
| Julia | 31/1/1957 | Jamaica |
| Mary | 23/12/1948 | New Zealand |

This table will be displayed like this:

Name Date of Birth Country
John 5/10/1970 Canada
Lakshmi 12/2/1975 India
Julia 31/1/1957 Jamaica
Mary 23/12/1948 New Zealand

Style sheets give you fine control over the way tables are displayed:

-  table.spip gives you control over the general behaviour of the table — in particular its position (left, right or centred etc.);

-  table.spip tr.row_first defines the behaviour of the “first row” of the table (in yellow above) (for “the first row” to be taken into account its contents must be set to bold);

-  table.spip tr.row_even for the even rows;

-  table.spip tr.row_odd for the odd rows;

-  table.spip td enables you to change the behaviour of the table cells.

One advantage is the possibility to choose different colours for "row_odd" and "row_even", so that table rows can be displayed in two alternate colours (here light grey and dark grey).

Horizontal Rule <hr>

A horizontal separating line whose short-cut is:

can be changed in hr.spip.

Bold and Italics

Bold and italics formats are defined by the following short-cuts:

They can be changed through the styles: b.spip and i.spip, though there doesn’t seem any point in changing them.

Paragraphs

Paragraphs created by SPIP where some amount of space is left between two paragraphs can be changed through the p.spip style. This is useful as you’re advised not to make such changes in your HTML markup, according to W3C recommendations.

Forms

Various forms are used on the public site: for the internal search engine, for posting a message on a forum, for registering to the private area, etc.

These are the relevant styles with their translation: .forml (form), .spip_encadrer (spip-frame) .spip_bouton (spip-button) .formrecherche (search-form).

Their default definitions are:

-  .forml defines “text-boxes” in forms; this is useful to set the width and background-colour of boxes;

-  .spip_encadrer; when a form is made up of several “blocks”, the separation between them can be set with this style (for instance, to put a border around each block, or leave some space before or after a block...);

-  .spip_bouton changes the appearance of the “Submit” button in the form;

-  .formrecherche changes the appearance of the “search” box in the search-engine form.

Images and documents

From [SPIP 1.8], the style of images and documents inserted using the shortcuts <docXX|left> et <imgXX|right> may be defined using these classes:
-  .spip_documents for the box containing the thumbnail image and the document information,
-  .spip_doc_titre which controls the display of the title,
-  .spip_doc_descriptif which controls the display of the description.

Conclusion

In the style sheet you can’t fail to notice that some styles have been left undefined, by default. This is because they’re seen as rather superfluous, and are there for the exclusive benefit of webmasters eager to create special graphic effects.

Generally speaking, the styles which have a marked effect on a site while being easy to set are those applying to:
-  links over a page, a and a:hover,
-  the behaviour of subheadings, h3.spip,
-  forms.


Show the template of this page Site powered by SPIP | Translation area | Private area