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- 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- 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)