In order to make it easier to format text, SPIP offers a certain number of "SPIP shortcuts" which implement an automatic processing of the relevant text to change the presentation of the text: they will be automatically replaced by standard html tags, with attributes for CSS style selectors, usually with the class selector spip. In order to take advantage of these styling possibilities, you need only modify or replace the CSS styles associated to these typographic shortcuts.
SPIP paragraphs
In order to generate a paragraph when writing in SPIP, just enter a blank line. Paragraphs are then automatically generated by SPIP around blocks of text, like this:
<p class="spip">Here is the text of my paragraph</p>
So, for example, you can change the spacing between paragraphs by simply changing the CSS styling for: p.spip.
Note: this only applies to text that is broken into paragraphs; text written as a single block, i.e. as a single paragraph, has not been enclosed within HTML
<p>and</p>tags in versions prior to SPIP 2.
Bold and italics
Bold and italics can be assigned to text with the following shortcuts:
Some text {in italics}, some text {{in bold}}
Their appearance is managed by the respective CSS style definitions for the selectors: i.spip and strong.spip. These styles leave little margin for manipulation given their specific nature, and are not refined any further by default.
SPIP sub-headings
Sub-headings are generated by using the following typographical shortcut:
{{{A SPIP sub-heading}}}
which generates an HTML <h3> tag.
Their appearance is managed by the CSS selector h2.spip (prior to SPIP 4.0, it was h3.spip [1]). This styling selector is without doubt one of the most important, because it can be used to define the size, font, colour and relative positioning of sub-headings within articles and sections: you will certainly be well-served by the proliferation of options available for presenting such headings.
In particular, note that the margin and padding attributes are very useful to change the spacing between sub-headings and surrounding text. Without this control, sub-headings can easily appear either too “squashed up” against the text or too distant from the text that it precedes.
SPIP horizontal separation rule
The horizontal separation bar is generated with the SPIP shortcut:
----
Its appearance is managed by the CSS selector: hr.spip.
Note: The horizontal bar (
<hr>) can be a tricky element to style, as the CSS styling that is applied is often interpreted differently by different browsers.
Page notes
Notes at the bottom of the page are generated with the SPIP shortcut:
This is the normal portion of the text[[here is a referenced note displayed at the bottom of the page.]].
Their appearance is managed with two CSS selectors:
- a.spip_note allows you to visually differentiate the reference links to the notes displayed at the bottom of the page from other linked resources (that is, by their reference number, be that in the text body or at the bottom of the page);
- p.spip_note manages the visual display of the notes themselves; quite often unused (as many prefer to specify the style more simply by inheriting presentation characteristics from the parent tag in the page template).