Editing Template:Sidebar/doc (section)

=== TemplateStyles ===
{{further|Wikipedia:TemplateStyles}}

The TemplateStyles parameters {{para|templatestyles}}, {{para|child templatestyles}}, and {{para|grandchild templatestyles}} take the pagename of a [[WP:TemplateStyles|TemplateStyles]] page and turn it into a TemplateStyles tag. The TemplateStyles tag is a much more powerful way to add styling to a sidebar.

Some rules of use:
# Always add a template-specific class in {{para|class}} so that the styles added to one sidebar will not "leak" into another sidebar. For example, [[Template:DYK tools]] has {{para|class|dyk-tools}} and the [[Template:DYK tools/styles.css]] page targets <code>.dyk-tools</code> for all of its added styling.
# Do not assume Template:Sidebar will continue to have a table structure (i.e., do not target <code>table</code> or any other table HTML in the TemplateStyles page). The table structure is soft-deprecated and will go away at some point in the future.

These tags are loaded in this order: Core templatestyles ([[Module:Sidebar/styles.css]]), templatestyles, child, and then grandchild, which can be used to 'cascade' the styles.

; {{para|templatestyles}}
: This parameter is intended for a template or module calling {{tl|sidebar}} directly.
; {{para|child templatestyles}}
: This parameter is intended for a template or module which calls a sidebar with {{para|templatestyles}}.
; {{para|grandchild templatestyles}}
: This parameter is intended for a template or module which calls a sidebar with {{para|child templatestyles}}.

The canonical list of classes output with each kind of element of a sidebar (i.e. output for all {{para|content<sub>n</sub>}}, or all cases of {{para|above}}) can be found in [[Module:Sidebar/configuration]] in the "class" table. The below is a non-authoritative but otherwise sufficient list for most generic styling:
{{div col}}
; <code>.sidebar</code>
: The top-level sidebar class.
; <code>.sidebar-outer-title</code>
: The class associated with a {{para|outertitle}}.
; <code>.sidebar-top-image</code>
: The class associated with a {{para|topimage}}.
; <code>.sidebar-top-caption</code>
: The class associated with a {{para|topcaption}}.
; <code>.sidebar-pretitle</code>
; <code>.sidebar-pretitle-with-top-image</code>
: The classes associated with a {{para|pretitle}}. Only one of these will be output per sidebar, depending on whether {{para|topimage}} is present.
; <code>.sidebar-title</code>
; <code>.sidebar-title-with-pretitle</code>
: The classes associated with a {{para|title}}. Only one of these will be output per sidebar, depending on whether {{para|pretitle}} is present.
; <code>.sidebar-image</code>
: The class associated with a {{para|image}}.
; <code>.sidebar-caption</code>
: The class associated with a {{para|caption}}.
; <code>.sidebar-above</code>
: The class associated with a {{para|above}}.
; <code>.sidebar-heading</code>
: The class associated with a {{para|heading<sub>n</sub>}}. Every heading will have this class.
; <code>.sidebar-content</code>
; <code>.sidebar-content-with-subgroup</code>
: The classes associated with {{para|content<sub>n</sub>}}. Every content group will have one of these classes, depending on whether the specific content has a subgroup.
; <code>.sidebar-below</code>
: The class associated with a {{para|below}}.
; <code>.sidebar-navbar</code>
: The class associated with a {{para|navbar}}.
{{div col end}}

==== Example TemplateStyles parameter use ====

For an example of a sidebar which does not need to support children templates of its own (whether because it has no children or because it wants no children):

<syntaxhighlight lang="wikitext">
{{Sidebar
| title                = Child Example
| class                = sidebar-example
| templatestyles = Template:Sidebar/example/styles.css
}}
</syntaxhighlight>

For an example of a sidebar which does have its own children and an example of one of the children (grandchild templates have a similar use):

<div style="display: flex">
<syntaxhighlight lang="wikitext">
{{Sidebar
| title                = {{{title|Title Child Example}}}
| class                = sidebar-example {{{class|}}}
| templatestyles       = Template:Sidebar/example/styles.css
| child templatestyles = {{{child templatestyles|}}}
}}
</syntaxhighlight>
<syntaxhighlight lang="wikitext">
{{Sidebar/child example
| title                = Title Grandchild Example
| class                = sidebar-child-example
| child templatestyles = Template:Sidebar/child example/styles.css
}}
</syntaxhighlight>
</div>