List Items as Buttons

Attention

Pitfall!

With pure Docutils the directive for specifying CSS classes is class . With Sphinx you have to use .. rst-class:: ... instead because class is already used in the Sphinx-Python-domain.

How Does It Work?

The t3SphinxThemeRtd theme for TYPO3 comes along with style that make the items of an unordered list appear as “buttons”. To put this into action the <ul> tag needs to have one of the following (css-) classes.

To assign a class place a .. rst-class:: THENAME right in front of the list like so:

.. rst-class:: horizbuttons-attention-m

- horizbuttons-attention-m
- two
- three `with link <#>`__

Available Styles

horizbuttons-attention-m

Like admonition attention (blue)

horizbuttons-important-m

Like admonitions error , important (yellow)

horizbuttons-note-m

Like admonitions generic , note , see also (neutral, grey)

horizbuttons-primary-m

Use the primary = key color (TYPO3 orange)

horizbuttons-striking-m

Shall be very striking and unusual, something to not be be overseen.

horizbuttons-tip-m

Like admonitions hint , tip (green)

horizbuttons-warning-m

Like admonitions caution , danger , warning (red)

horizbuttons-attention-xxl

Like admonition attention (blue)

horizbuttons-important-xxl

Like admonitions error , important (yellow)

horizbuttons-note-xxl

Like admonitions generic , note , see also (neutral, grey)

horizbuttons-primary-xxl

Use the primary = key color (TYPO3 orange)

horizbuttons-striking-xxl

Shall be very striking and unusual, something to not be be overseen.

horizbuttons-tip-xxl

Like admonitions hint , tip (green)

horizbuttons-warning-xxl

Like admonitions caution , danger , warning (red)

horizbuttons-attention-xxxl

Like admonition attention (blue)

horizbuttons-important-xxxl

Like admonitions error , important (yellow)

horizbuttons-note-xxxl

Like admonitions generic , note , see also (neutral, grey)

horizbuttons-primary-xxxl

Use the primary = key color (TYPO3 orange)

horizbuttons-striking-xxxl

Shall be very striking and unusual, something to not be be overseen.

horizbuttons-tip-xxxl

Like admonitions hint , tip (green)

horizbuttons-warning-xxxl

Like admonitions caution , danger , warning (red)