SPIP 1.9.2
SPIP 1.2 When you use typographical shortcuts in articles under SPIP, and make some text bold or italics, or create hypertext links, headings, etc. SPIP generates the necessary HTML tags, each tag then becoming associated to a CSS class.
For instance,
This is a [link->http://www.spip.net/]
is turned into HTML code as in the following:
This is a <a href="http://www.spip.net/" class="spip_out">link</a>
So, the HTML code is completed by requesting a CSS style called "spip_out". The web designer is therefore free to customize the presentation layout of her site as much as she likes by defining the "spip_out" style (changing the text or background colour, or the font-style, etc.).
Most of SPIP’s text-formatting shortcuts can be defined in this way using style sheets. While some are very useful others are meant only for webmasters keen on outlandish effects.
Where is the definition of those style sheets?
When installing SPIP with the default templates, the style sheet definition can be found in the spip_style.css file.
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 shorcuts 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 shorcut:
{{{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 shortcut:
<code>Some code in your text
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 shortcut:
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 centered 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 shortcut is:
----
can be changed in hr.spip.
Bold and Italics
Bold and italics formats are defined by the following shortcuts:
Some text {{set to bold}}, some text {set to italics}
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 exlusive 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 et a:hover,
- the behaviour of subheadings, h3.spip,
- forms.