Note
This version of the guide covers the new PHP-based rendering of Documentation with the TYPO3 Documentation theme.
If the project you are looking at has a file Documentation/guides.xml it is using the new rendering.
Otherwise, consider to migrate the Documentation or head over to the legacy version of this guide: How to document, Sphinx based.
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)