CSS Styling of quotations in SPIP

SPIP provides shortcuts to insert quotes from other authors, include computing "codes" and formatting poetry. The HTML generated by SPIP for this reference material is easy to format afterwards using style sheets.

SPIP quotations

In order to make insertion of quotations easier, SPIP 1.7, SPIP 1.7.2 offered the following shortcut :

<quote>This is a quotation.</quote>

which displays as:

This is a quotation.

It’s appearance on the browser is controlled with the use of the Cascading Style Sheets selector: blockquote.spip.

Note that, when using the <quote> shortcut, SPIP will generate the <blockquote> HTML tag which indents the quotation. You can use the tag <q> for in line quotations, but this will not be styled with the CSS described here


SPIP 1.7, SPIP 1.7.2 also introduced a specific shortcut to quote a piece of poetry, with the following syntax:

<poesie>Here is some poetry.</poesie>

which displays as :

Here is some poetry.

It’s appearance on the browser is controlled with the use of the CSS selector: div.spip_poesie.

Showing "computer" code within SPIP

In order to show "reserved computer words" within SPIP text (as is done repeatedly in these documentation pages), it’s necessary to encapsulate the code as text with the following SPIP typographical shortcut:

<code>Some code in the text</code>

The relevant CSS style selector is .spip_code.

First introduced in SPIP 1.3, the extremely useful shortcut

<div class="base64" title="PGRpdiBjbGFzcz0icHJlY29kZSI+PHByZSBjbGFzcz0ic3BpcF9jb2RlIHNwaXBfY29kZV9ibG9jayIgZGlyPSJsdHIiIHN0eWxlPSJ0ZXh0LWFsaWduOiBsZWZ0OyI+PGNvZGU+Li4uDQo8L2NvZGU+PC9wcmU+PC9kaXY+"></div>

allowed for the inclusion and display of a block of code, which makes copy/paste of examples much easier. The appearance of such blocks is controlled by the CSS selector: .spip_cadre.

These last two typographical shortcuts, and their CSS selectors, aren’t actually often used, except for technical documentation (just like this document) or when it’s important to quote a section of code, or a list of files and/or directories.

Note that when inserting code inline, the HTML generated is an inline span tag. However, when inserting a block of code which starts with a new blank line, SPIP uses a block div tag. This way, you can control the style of the inline and block code quotes differently with span.spip_code and div.spip_code

Author Mark Published : Updated : 21/03/23

Translations : català, English, Español, français, italiano, Nederlands