 |
Summary | Styles [details] to make it more obvious they are clickable |
 |
Preview | via Theme Creator |
 |
Repository | Ger / Component - Better Hide Details · GitLab |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Description
This component makes it more apparent that the headline of [details] functions like a button. Nested details have more intense colour for every level and it is clear where each element ends.
Screenshots
With the Hide Details Button Style theme-component
Without the Hide Details Button Style theme-component
This is the same without the component being active on a regular install:
Source used in the example
[details=Title line]
Content
[details=Closed nested title]
Nested Content
[/details]
[details=Nested title]
More nested Content
[/details]
[/details]
[details=Second details]
More Content
[/details]
Text
[details=Additional details]
Even more Content
[/details]
(↑ Regarding the Discourse meta formatting of hide details, I am not entirely sure what affects theming on this install or if that might be an upcoming feature.)
Features
- Makes clear where a
[details]starts/ends and that it can be clicked - The currently selected
[details]is visually highlighted on TAB. - Several edge cases such as nesting, multiple successive
[details]are handled - Appears live in editor preview
- Basic display in the “Recent replies” etc. streams
- Uses the Tertiary colour of the colour scheme
- Separate arrow for multi-line summary titles
Remarks
- I have tested it with all themes of the Discourse instance I am a participant of and it worked there
- It partially uses more recent CSS features, so colors might not work correctly on old browsers
- If Discourse changes how
[details]are structured or styled in the future, this theme-component will probably break.
It would be better if there’s setting to backgroud color.