Editing Template:Infobox/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 an infobox.

Some rules of use:
# Always add a template-specific class in {{para|bodyclass}} so that the styles added to one infobox will not "leak" into another infobox. For example, [[Template:Infobox settlement]] has {{para|bodyclass|ib-settlement}} and the [[Template:Infobox settlement/styles.css]] page targets <code>.ib-settlement</code> for all of its added styling.
# Do not assume Template:Infobox 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: Horizontal list templatestyles ([[Template:Hlist/styles.css]]), unbulleted list templatestyles ([[Template:Plainlist/styles.css]]), core templatestyles ([[Module:Infobox/styles.css]]), templatestyles, child, and then grandchild, which can be used to 'cascade' the styles.

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

The canonical list of classes output with each kind of element of an infobox (i.e. output for all {{para|data<sub>n</sub>}}, or all cases of {{para|above}}) can be found in [[Module:Infobox]] in the "addClass" rows. The below is a non-authoritative but otherwise sufficient list for most generic styling:

{{div col}}
; .infobox : The top-level infobox class.
; .infobox-title : The class associated with a {{para|title}}.
; .infobox-above : The class associated with a {{para|above}}.
; .infobox-image : The class associated with a {{para|image<sub>n</sub>}}. Every image will have this class.
; .infobox-caption : The class associated with a {{para|caption<sub>n</sub>}}. Every caption will have this class.
; .infobox-header : The class associated with a {{para|header<sub>n</sub>}}. Every header will have this class.
; .infobox-subheader : The class associated with a {{para|subheader<sub>n</sub>}}. Every subheader will have this class.
; .infobox-label : The class associated with a {{para|label<sub>n</sub>}}. Every label will have this class.
; .infobox-data
; .infobox-full-data
: The classes associated with {{para|data<sub>n</sub>}}. Every data row will have one of these classes, depending on whether the specific data has a label.
; .infobox-below : The class associated with a {{para|below}}.
; .infobox-navbar : The class associated with a {{para|navbar}}.
{{div col end}}

==== Example TemplateStyles parameter use ====
For an example of an infobox 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">
{{Infobox
| title                = Child Example
| bodyclass            = ib-example
| templatestyles = Template:Infobox/example/styles.css
}}
</syntaxhighlight>

For an example of an infobox 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">
{{Infobox
| title                = {{{title|Title Child Example}}}
| bodyclass            = ib-example {{{bodyclass|}}}
| templatestyles       = Template:Infobox/example/styles.css
| child templatestyles = {{{child templatestyles|}}}
}}
</syntaxhighlight>
<syntaxhighlight lang="wikitext">
{{Infobox/child example
| title                = Title Grandchild Example
| bodyclass            = ib-child-example
| child templatestyles = Template:Infobox/child example/styles.css
}}
</syntaxhighlight>
</div>