قالب:Sidebar

Template documentation

This documentation is transcluded from قالب:Sidebar/doc. (edit | history)

This template is a metatemplate for the creation of sidebar templates, i.e. boxes that are vertically-aligned navigation templates. Sidebars, like infoboxes, are usually positioned on the right-hand side of a page.

{{Sidebar with collapsible lists}} is a version of {{Sidebar}} that adds collapsibility to its sections, i.e. the means to show or hide sections by clicking links beside their headings.

Templates using the navbox (navbox) or nomobile (sidebar) classes are not displayed on the mobile web site of English Wikipedia. Mobile page views account for approximately 62% of all page views (90-day average as of January 2022).

Note that MOS:LEAD discourages the placement of sidebars in the lead section of articles.

Usage

{{Sidebar
| name = {{subst:PAGENAME}}
| class =            
| wraplinks =        <!-- "true" otherwise (default:) omit -->
| float =
| templatestyles = 
| child templatestyles = 
| grandchild templatestyles = 

| outertitleclass = 
| outertitle = 

| topimageclass = 
| topimage = 
| topcaption = 

| pretitleclass = 
| pretitle = 

| titleclass = 
| title = 

| imageclass = 
| image = 
| caption = 

| headingclass = 
| contentclass = 

| aboveclass = 
| above = 

| heading1 = 
| heading1class = 
| content1 = 
| content1class = 

| heading2 = 
| heading2class = 
| content2 = 
| content2class = 

| heading3 = 
| heading3class = 
| content3 = 
| content3class = 

<!-- (omitting infinite heading/content parameters) -->

| belowclass = 
| below = 
| navbar = 

}}

Note that discourages the placement of sidebars in the lead section of articles, though they may be included on a case-by-case basis.

Parameters

No parameters are mandatory. If {{navbar}} links are to function correctly (unless their appearance is suppressed; see the navbar parameter below), the parameter name needs to be set (to the name of the sidebar's page). (This does not apply if the Lua module that produces , Module:Sidebar, is being used directly.)

Parameter	Explanation
|above=	Same as the |above= offered by {{Navbox}}.
|name=	The sidebar's name, i.e. the name following "Template:" in the title shown at the top of the sidebar's page. Required if the V This is the bold middot template, it looks like this: " · ". It works similarly to the html+wiki markup sequence "&nbsp;'''&middot;''' ". That is, a non-breaking space, a bolded middot and a normal space. {{dot}} and {{middot}} redirect here and can be used as alternative names for this template. This template is usually used for dotted lists, such as for link lists in navigation boxes. (For lists that have a font-size 80% or less of normal font-size, the bold middot "·" becomes too small. Then use the bullet "•" instead.) This template is used when you want something smaller than a bullet "•", "–" or "—". Normal usage The recommended usage is to use no space before the template and one space after the template, like this: Salt{{·}} Pepper The template can also be used with no space after it, but then the code does not wrap in the edit window thus making editing harder. Like this: Salt{{·}}Pepper Both examples will render one space on each side of the dot, like this: Salt · Pepper If it line breaks then the line break will come after the dot, not before, like this: Salt · Pepper For long dotted lists each list item can be put on its own line, with no spaces between each item and the template. Like this: Salt{{·}} Pepper{{·}} Curry{{·}} Saffron (It doesn't matter if there are no or some spaces at the end of the lines, after the templates.) As before it will render one space on each side of the dots, like this: Salt · Pepper · Curry · Saffron And if it line breaks then the line break will come after one of the dots, not before, like this: Salt · Pepper · Curry · Saffron When using the template to separate words in italics (typically lists of artworks in navboxes), put it within the italics to display with proper spacing on both sides. Compare: ''Salt''{{·}} ''Pepper'' ''Salt{{·}} Pepper'' Salt · Pepper Salt · Pepper (This also improves code brevity and clarity.) Usage issues Putting one or more spaces before the template will cause it to render differently, like these examples: Salt {{·}}Pepper Salt {{·}}Pepper Salt {{·}} Pepper Salt {{·}} Pepper Then it will render with two spaces before the dot, and one after, like this: Salt  · Pepper] And if it line breaks it might break before the dot, like this: Salt · Pepper Alternatively an &nbsp; can be added before and after the template to create extra padding around the middot. Technical details The space before the dot is a non-breaking space. That means it will not line break and will not collapse together with normal spaces that come before the template. The space after the dot is a normal space. That means it wraps (allows line breaks) and it will collapse together with normal spaces that come after the template to form one single space. Under some circumstances dotted link lists misbehave. They might get unexpected line wraps or they might expand outside the box they are enclosed in. Dot size reference list · <small> middot · middot · <small> bold middot · bold middot • <small> bullet • bullet • bold bullet – ndash — mdash See also There are several other templates with similar functionality: {{•}} – Bullet "•" is mostly used for dotted lists that use small font sizes. When making dotted lists you might need to handle proper word wrapping (line breaking): T This is the bold middot template, it looks like this: " · ". It works similarly to the html+wiki markup sequence "&nbsp;'''&middot;''' ". That is, a non-breaking space, a bolded middot and a normal space. {{dot}} and {{middot}} redirect here and can be used as alternative names for this template. This template is usually used for dotted lists, such as for link lists in navigation boxes. (For lists that have a font-size 80% or less of normal font-size, the bold middot "·" becomes too small. Then use the bullet "•" instead.) This template is used when you want something smaller than a bullet "•", "–" or "—". Normal usage The recommended usage is to use no space before the template and one space after the template, like this: Salt{{·}} Pepper The template can also be used with no space after it, but then the code does not wrap in the edit window thus making editing harder. Like this: Salt{{·}}Pepper Both examples will render one space on each side of the dot, like this: Salt · Pepper If it line breaks then the line break will come after the dot, not before, like this: Salt · Pepper For long dotted lists each list item can be put on its own line, with no spaces between each item and the template. Like this: Salt{{·}} Pepper{{·}} Curry{{·}} Saffron (It doesn't matter if there are no or some spaces at the end of the lines, after the templates.) As before it will render one space on each side of the dots, like this: Salt · Pepper · Curry · Saffron And if it line breaks then the line break will come after one of the dots, not before, like this: Salt · Pepper · Curry · Saffron When using the template to separate words in italics (typically lists of artworks in navboxes), put it within the italics to display with proper spacing on both sides. Compare: ''Salt''{{·}} ''Pepper'' ''Salt{{·}} Pepper'' Salt · Pepper Salt · Pepper (This also improves code brevity and clarity.) Usage issues Putting one or more spaces before the template will cause it to render differently, like these examples: Salt {{·}}Pepper Salt {{·}}Pepper Salt {{·}} Pepper Salt {{·}} Pepper Then it will render with two spaces before the dot, and one after, like this: Salt  · Pepper] And if it line breaks it might break before the dot, like this: Salt · Pepper Alternatively an &nbsp; can be added before and after the template to create extra padding around the middot. Technical details The space before the dot is a non-breaking space. That means it will not line break and will not collapse together with normal spaces that come before the template. The space after the dot is a normal space. That means it wraps (allows line breaks) and it will collapse together with normal spaces that come after the template to form one single space. Under some circumstances dotted link lists misbehave. They might get unexpected line wraps or they might expand outside the box they are enclosed in. Dot size reference list · <small> middot · middot · <small> bold middot · bold middot • <small> bullet • bullet • bold bullet – ndash — mdash See also There are several other templates with similar functionality: {{•}} – Bullet "•" is mostly used for dotted lists that use small font sizes. When making dotted lists you might need to handle proper word wrapping (line breaking): E {{navbar}} links at the bottom of the sidebar are to function correctly, unless their appearance is suppressed (see the navbar parameter below) or is not being used as a wrapper for Module:Sidebar. When is used as a wrapper, setting |name={{subst:PAGENAME}} is recommended.
|float=	Accepts the values none and left. The former aligns the box left without floating and the latter with floating behavior. The default float is right and does not need specifying. Prefer this parameter (and passing it to any using templates such as with {{Helpbox}}) to specifying your own floats in TemplateStyles.
|outertitle=	Use to place a title for the sidebar immediately above the sidebar.
|topimage=	Use to place an image at the top of the sidebar, i.e. above |title= (if used). Full wiki syntax is expected (i.e. [[File:...]]). To add a caption below the image, use |topcaption=.
|pretitle=	Use to place a line such as "Part of the X series on" before the title.
|title=	Use to place a title for the sidebar at the top of the sidebar. (If |topimage= is used, it will appear immediately below it).
|image=	Use to place an image between the |title= (if used) and first section. As with |topimage=, full wiki syntax is expected (i.e. [[File:...]]). To add a caption below the image, use |caption=.
|headingn= |contentn=	The nth heading / content. contentn is required if headingn is also to appear.
|templatestyles=	See #TemplateStyles.
|class= or |bodyclass= |outertitleclass= |topimageclass= |pretitleclass= |titleclass= |imageclass= |aboveclass= |headingclass= |contentclass= |headingnclass= |contentnclass= |belowclass=	Classes can be used to make styles easier to target for TemplateStyles. |class= must be used for this purpose for an entire sidebar (otherwise a page with multiple sidebars may take styles intended only for one sidebar). An example for a template named "Template:Example Sidebar" might have the class |class=example-sidebar. |headingnclass= and |contentnclass= can be used to target a specific heading or content group. This should be needed only rarely. These classes can also be used for microformats. Dot before a class-name can be omitted: |class=foo.
|below=	Same as the |below= offered by {{Navbox}}. (Use, for example, to add one or more portal links to the bottom of the template (shown, by default, in bold).)
|navbar=	When |name= is specified, set to "off", "none", etc. (without quotes) to remove the {{navbar}} links () that otherwise appear at the bottom of the sidebar.

TemplateStyles

The TemplateStyles parameters |templatestyles=, |child templatestyles=, and |grandchild templatestyles= take the pagename of a 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:

1. Always add a template-specific class in |class= so that the styles added to one sidebar will not "leak" into another sidebar. For example, Template:DYK tools has |class=dyk-tools and the Template:DYK tools/styles.css page targets .dyk-tools for all of its added styling.
2. Do not assume Template:Sidebar will continue to have a table structure (i.e., do not target table 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.

|templatestyles=

This parameter is intended for a template or module calling {{sidebar}} directly.

|child templatestyles=

This parameter is intended for a template or module which calls a sidebar with |templatestyles=.

|grandchild templatestyles=

This parameter is intended for a template or module which calls a sidebar with |child templatestyles=.

The canonical list of classes output with each kind of element of a sidebar (i.e. output for all |contentn=, or all cases of |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:

.sidebar

The top-level sidebar class.

.sidebar-outer-title

The class associated with a |outertitle=.

.sidebar-top-image

The class associated with a |topimage=.

.sidebar-top-caption

The class associated with a |topcaption=.

.sidebar-pretitle

.sidebar-pretitle-with-top-image

The classes associated with a |pretitle=. Only one of these will be output per sidebar, depending on whether |topimage= is present.

.sidebar-title

.sidebar-title-with-pretitle

The classes associated with a |title=. Only one of these will be output per sidebar, depending on whether |pretitle= is present.

.sidebar-image

The class associated with a |image=.

.sidebar-caption

The class associated with a |caption=.

.sidebar-above

The class associated with a |above=.

.sidebar-heading

The class associated with a |headingn=. Every heading will have this class.

.sidebar-content

.sidebar-content-with-subgroup

The classes associated with |contentn=. Every content group will have one of these classes, depending on whether the specific content has a subgroup.

.sidebar-below

The class associated with a |below=.

.sidebar-navbar

The class associated with a |navbar=.

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

{{Sidebar
| title                = Child Example
| class                = sidebar-example
| templatestyles = Template:Sidebar/example/styles.css
}}

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

{{Sidebar
| title                     = {{{title|Title Child Example}}}
| class                     = sidebar-example {{{class|}}}
| templatestyles      = Template:Sidebar/example/styles.css
| child templatestyles = {{{child templatestyles|}}}
}}

{{Sidebar/child example
| title                = Title Grandchild Example
| class                = sidebar-child-example
| child templatestyles = Template:Sidebar/child example/styles.css
}}

Handling long links

{{Normalwraplink}} may be used to handle individual links that should wrap within the sidebar or otherwise need to be made to wrap, in order to prevent the sidebar from becoming too wide. Use {{normalwraplink|longlinkname}}, where |longlinkname is the long link without its square brackets.

Use the |wraplinks=true parameter to enable link wrapping (disabling nowraplinks CSS class) for the whole template.

Nesting

One sidebar template can be nested (embedded) into another one by using the |child= parameter. This feature can be used to create a modular sidebar, or to create more well-defined and logical sections.

{{Sidebar
| title = Top-level title
| content1 =
 {{Sidebar |child=yes
  | title = First subsection
  | heading1 = Heading 1.1
  | content1 = Content 1.1
 }}
| content2 =
 {{Sidebar |child=yes
  | title = Second subsection
  | heading1 = Heading 2.1
  | content1 = Content 2.1
 }}
| below = "below" text
}}

Note in the examples above that the child sidebar is placed in a content field, not a heading field. Notice also that the section subheadings do not appear in bold if this is not explicitly specified. To obtain bold section headings, move the titles to the heading field, using

{{Sidebar
| title = Top-level title
| heading1 = First subsection
| content1 = 
 {{Sidebar |child=yes
  | heading1 = Heading 1.1
  | content1 = Content 1.1
 }}
| heading2 = Second subsection
| content2 = 
 {{Sidebar |child=yes
  | heading1 = Heading 2.1
  | content1 = Content 2.1
 }}
| below = "below" text
}}

Deprecated parameters

The following parameters are deprecated in favor of TemplateStyles and templates/modules using them are categorized into Category:Sidebars with styles needing conversion. The category page has further conversion information.

A specific real conversion example is Template:DYK tools where the styles were moved to Template:DYK tools/styles.css.

Parameter	Explanation	TemplateStyles replacement class
|style= or |bodystyle=	Additional CSS for the whole sidebar.	Class assigned to the template in |class=
|basestyle=	Additional CSS for a grabbag of parameters: |pretitle=, |title=, |headingn=, and |listtitlen= (for {{sidebar with collapsible lists}}).	See related parameters for targeting pretitle, title, all headings, and all lists. Applies before the specific style parameter so must be placed above that parameter's declarations if any in the TemplateStyles sheet.
|outertitlestyle=	Additional CSS for |outertitle=.	.sidebar-outer-title
|topimagestyle=	Additional CSS for |topimage=.	.sidebar-top-image
|topcaptionstyle=	Additional CSS for |topcaption=.	.sidebar-topcaption
|pretitlestyle=	Additional CSS for |pretitle=.	.sidebar-pretitle or .sidebar-pretitle-with-top-image
|titlestyle=	Additional CSS for |title=.	.sidebar-title or .sidebar-title-with-pretitle
|imagestyle=	Additional CSS for |image=.	.sidebar-image
|captionstyle=	Additional CSS for |caption=.	.sidebar-caption
|abovestyle=	Additional CSS for |above=.	.sidebar-above
|headingstyle=	Additional CSS for section headings.	.sidebar-heading
|headingnstyle=	Additional CSS for |headingn=.	Class assigned to the heading in |headingnclass=
|contentstyle=	Additional CSS for all section content.	.sidebar-content and/or .sidebar-content-with-subgroup
|contentnstyle=	Additional CSS for |contentn=.	Class assigned to the content in |contentnclass=
|belowstyle=	Additional CSS for |below=.	.sidebar-below
|navbarstyle=	Additional CSS for the generated navbar.	.sidebar-navbar
|navbarfontstyle=	Additional CSS passed to the navbar module to target the VTE (colors usually).	.sidebar-navbar li, .sidebar-navbar a

Tracking category

• [[:Category:|Category:]] (٠)
• [[:Category:|Category:]] (٠)

See also

• Last pre-Lua version
• {{Sidebar with collapsible lists}}
• {{Infobox}}
• {{Side box}}
• Wikipedia:UBLIST, for help using unbulleted lists within content.