List Items as Buttons

On this page:

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-attention-m

  • two

  • three with link

horizbuttons-important-m

Like admonitions error, important (yellow)

  • horizbuttons-important-m

  • two

  • three with link

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-striking-m

  • two

  • three with link

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-attention-xxl

  • two

  • three with link

horizbuttons-important-xxl

Like admonitions error, important (yellow)

  • horizbuttons-important-xxl

  • two

  • three with link

horizbuttons-note-xxl

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

horizbuttons-primary-xxl

Use the primary = key color (TYPO3 orange)

  • horizbuttons-primary-xxl

  • two

  • three with link

horizbuttons-striking-xxl

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

  • horizbuttons-striking-xxl

  • two

  • three with link

horizbuttons-tip-xxl

Like admonitions hint, tip (green)

horizbuttons-warning-xxl

Like admonitions caution, danger, warning (red)

  • horizbuttons-danger-xxl

  • two

  • three with link

horizbuttons-attention-xxxl

Like admonition attention (blue)

  • horizbuttons-attention-xxxl

  • two

  • three with link

horizbuttons-important-xxxl

Like admonitions error, important (yellow)

  • horizbuttons-important-xxxl

  • two

  • three with link

horizbuttons-note-xxxl

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

horizbuttons-primary-xxxl

Use the primary = key color (TYPO3 orange)

  • horizbuttons-primary-xxxl

  • two

  • three with link

horizbuttons-striking-xxxl

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

  • horizbuttons-striking-xxxl

  • two

  • three with link

horizbuttons-tip-xxxl

Like admonitions hint, tip (green)

horizbuttons-warning-xxxl

Like admonitions caution, danger, warning (red)

  • horizbuttons-danger-xxxl

  • two

  • three with link