View source for Template:Userbox/doc

{{Documentation subpage}}
{{Lua|Module:Userbox}}
{{High-use}}
<!-- Categories go at the bottom of this page and interwikis go in Wikidata. -->

This template can be used to quickly create a [[Wikipedia:Userboxes|userbox]] for display on a user's [[Wikipedia:User pages|user page]] without having to know HTML or Wikitable syntax.

'''''[[WP:NFCC|Nonfree]] images must not be displayed in userboxes, and are subject to summary removal by any editor without any notice being required.'''''

== Sandbox reminder==
* Always practice or experiment in the [[Template:Userbox/sandbox]] or [[Template:Userbox/testcases]]
* Once you are satisfied: Copy your code!
* In your Browser's address bar, change "sandbox" or "testcases" to the name of your new Userbox.
** Example: 
** '''CHANGE''' [{{Fullurl:Template:Userbox/sandbox}} http://en.wikipedia.org/wiki/Template:Userbox/sandbox]<!--Display http://, but allow possibility of https:// access.-->
** '''TO''' [{{Fullurl:Template:Userbox/sandbox}} https://en.wikipedia.org/wiki/Template:Userbox/WhateverYourNewBoxNameIs]
** If the name of your new Userbox is taken, create a different name.
* You will be prompted to Start or Create your new Template Userbox!
* Paste your code into the space provided.

== Usage ==
<!-- Abstract usage of the template, one variable per row. -->
<syntaxhighlight lang="wikitext" style="overflow: auto">
{{userbox
| bodyclass     = <!--Adds an HTML class attribute to the entire template's HTML table, to allow for styling, emission of microformats, etc.-->
| border-c      = <!--border color (default=id-c or #999999)-->
| border-s      = <!--border width in pixels (default=1)-->
| float         = <!--left|right|none (default=left)-->
| id            = <!--id image or text (image size should normally not exceed 90x45px)-->
| id-a          = <!--id horizontal alignment left/center/right/justify (default=center)-->
| id-c          = <!--id background color (default=#DDDDDD)-->
| id-fc         = <!--id font color (default=info-fc or black)-->
| id-h          = <!--id box height in pixels (default=45)-->
| id-lh         = <!--id line height (default=1.25em)-->
| id-op         = <!--id other CSS parameters-->
| id-p          = <!--id cell padding (default=0 1px 0 0)-->
| id-s          = <!--id text size in points (default=14)-->
| id-w          = <!--id box width in pixels (default=45)-->
| info-class    = <!--Adds an HTML class attribute to the "info" HTML table-row, to allow for styling, emission of microformats, etc.-->
| info          = <!--info text or image-->
| info-a        = <!--info horizontal alignment left/center/right/justify (default=left)-->
| info-c        = <!--info background color (default=#EEEEEE)-->
| info-fc       = <!--info font color (default=black)-->
| info-lh       = <!--info line height (default=1.25em)-->
| info-op       = <!--info other CSS parameters-->
| info-p        = <!--info padding (default=0 4px 0 4px)-->
| info-s        = <!--info text size in points (default=8)-->
| nocat         = <!--block page category declarations; see [[WP:NOCAT]] (default=false)-->
| usercategory  = <!--user category (optional, unlinked and without the "Category:" part)-->
| usercategory2 = <!--user category (optional)-->
| usercategory3 = <!--user category (optional)-->
| usercategory4 = <!--user category (optional)-->
| usercategory5 = <!--user category (optional)-->
}}
</syntaxhighlight>
* All parameters are optional.
* Images should normally be scaled to x45px or less.
<!-- Explain what this template's parameters do -- if no params, delete the definition. -->

Most HTML-based tables use only a handful of these attributes. The following subset can be used to quickly convert an HTML userbox into the format used here:

<syntaxhighlight lang="wikitext">
{{userbox
| border-c = 
| id       = 
| id-c     = 
| id-fc    = 
| id-s     = 
| info     = 
| info-c   = 
| info-fc  = 
| info-lh  = 
| info-s   = 
}}</syntaxhighlight>

== Examples ==
{|
! style="width: 300px;" | Code
! Result
|-
| <syntaxhighlight lang="wikitext">{{userbox
| border-c      = #aaffaa
| border-s      = 2
| id            = foo
| id-c          = #ffffee
| id-s          = 20
| info          = ''foo bar''
| info-c        = #ffeeff
| info-s        = 12
}}</syntaxhighlight> || {{userbox|id=foo|id-s=20|id-c=#ffffee|info=''foo bar''|info-c=#ffeeff|info-s=12|border-c=#aaffaa|border-s=2}}
|-
| colspan="2"| Below example shows the default appearance of a userbox, which is (much) higher than the 45px.<br>Compare the height of the one below with the above userbox.
|-
| <syntaxhighlight lang="wikitext">{{userbox
| border-c      = #aaffaa
| border-s      = 2
| id            = foo logo
| id-c          = #ffffee
| info          = ''We are trying to see 
default distance in between text 
lines, see the distance in 
between cell content and its border, 
and also see total height.''
| info-c        = #ffeeff
}}</syntaxhighlight> || {{userbox|id=foo logo|id-c=#ffffee|info=''We are trying to see default distance in between text lines, see the distance in between cell content and its border, and also see total height.''|info-c=#ffeeff|border-c=#aaffaa|border-s=2}}
|-
| colspan="2"| Below example shows how we can change that userbox and further specify parameters to bring down<br>the overall height of the userbox to the recommended height of 45px, even with four text lines.<br>Cell padding parameter "''info-p''" can also be set at "''1pt 1pt 1pt 2pt''", or "''1pt 2pt''" for better appearance,<br>when there are 4 text lines.
|-
| <syntaxhighlight lang="wikitext">{{userbox
| border-c      = #aaffaa
| border-s      = 1
| id            = foo logo
| id-c          = #ffffee
| id-lh         = 1.1em
| id-s          = 14
| info          = ''We have specified values 
to lessen the distance between 
text lines and padding space between 
cell content and its border.''
| info-c        = #ffeeff
| info-lh       = 1.05em
| info-p        = 1pt
| info-s        = 8
}}</syntaxhighlight> || {{userbox|id=foo logo|id-s=14|id-lh=1.1em|id-c=#ffffee|info=''We have specified values to lessen the distance between text lines and padding space between cell content and its border.''|info-c=#ffeeff|info-s=8|info-p=1pt|info-lh=1.05em|border-c=#aaffaa|border-s=1}}
|-
| colspan="2"| Below example is for advanced users, showing how we can specify other [[Cascading Style Sheets|CSS]] properties,for example, "''font-family''",<br>to change the font or "''text-decoration''" to add lines around the text. Below, on the right side are two userboxes:<br>the top one is displayed without either parameters; and the bottom userbox is displayed by using the below code,<br>with the help of the "''info-op''" field. 
|-
| <syntaxhighlight lang="wikitext">{{userbox
| border-c      = #afa
| border-s      = 2
| id            = foo logo
| id-c          = #ffe
| id-lh         = 1.1em
| id-s          = 14
| info          = foo bar
| info-c        = #fef
| info-op       = font-family: 'Courier New', monospace; text-decoration: wavy overline green;
| info-s        = 14
}}</syntaxhighlight> || colspan="2"| {{Userbox|id=foo logo|id-s=14|id-lh=1.1em|id-c=#ffe|info=foo bar|info-c=#fef|info-s=14|border-c=#afa|border-s=2}} <br style="clear:both">&#160;<br /> {{Userbox|id=foo logo|id-s=14|id-lh=1.1em|id-c=#ffe|info=foo bar|info-c=#fef|info-s=14|info-op=font-family: 'Courier New', monospace; text-decoration: wavy overline green;|border-c=#afa|border-s=2}}
|}

==Microformats==
; bodyclass : This parameter is inserted into the "class" attribute for the userbox as a whole.
; info-class : This parameter is inserted into the "class" attribute for the info component.

This template supports the addition of [[microformat]] information. This is done by adding "class" attributes to various data cells, indicating what kind of information is contained within. To flag a userbox as containing [[hCard]] information about a person, for example, add the following parameter:

<syntaxhighlight lang="wikitext">
| bodyclass     = vcard
</syntaxhighlight>

''or''

<syntaxhighlight lang="wikitext">
| info-class    = vcard
</syntaxhighlight>

''then'' (for example):

<syntaxhighlight lang="wikitext"><nowiki>
| title         = …the books of <span class="fn">[[Iain Banks]]</span>
</nowiki></syntaxhighlight>

...and so forth.

Examples include:

* <code>{{tlu|User:UBX/Iain Banks}}</code> - person
* {{tlx|User Microformats}} - group (WikiProject Microformats)
* {{tlx|User Brum}} - place (Birmingham)

See [[Wikipedia:WikiProject Microformats]] for more information on adding microformat information to Wikipedia.

== Template Data ==
{{TemplateData header}}

<TemplateData>{
	"description": "This template can be used to quickly create a userbox for display on a user's user page without having to know HTML or Wikitable syntax.",
	"params": {
		"bodyclass": {
			"label": "Body class",
			"description": "Adds an HTML class attribute to the entire template's HTML table, to allow for styling, emission of microformats, etc.",
			"type": "string",
			"required": false
		},
		"border-c": {
			"label": "Border color",
			"description": "Color of the outer border",
			"type": "string",
			"default": "#999",
			"required": false,
			"aliases": [
				"border-color"
			]
		},
		"border-s": {
			"label": "Border width",
			"description": "border width in pixels",
			"type": "number",
			"default": "1",
			"required": false,
			"aliases": [
				"border-width"
			]
		},
		"float": {
			"label": "Float",
			"description": "left|right|none",
			"type": "string",
			"default": "left",
			"required": false,
			"suggestedvalues": [
				"left",
				"right",
				"none"
			]
		},
		"id": {
			"label": "Logo",
			"description": "id image or text",
			"type": "content",
			"required": false,
			"aliases": [
				"3",
				"logo"
			],
			"suggested": true
		},
		"id-a": {
			"label": "Logo content horizontal alignment",
			"description": "Horizontal alignment of logo content; left/center/right/justify",
			"type": "string",
			"default": "center",
			"required": false,
			"suggestedvalues": [
				"left",
				"center",
				"right",
				"justify"
			]
		},
		"id-c": {
			"label": "id-c",
			"description": "Two-in-one alias for border color and logo background color. Lower priority than border-c and logo-background",
			"type": "string",
			"required": false,
			"aliases": [
				"1"
			],
			"example": "#d0d0d0"
		},
		"id-fc": {
			"label": "Logo font color",
			"description": "Logo font color; if not specified, defaults to info font color",
			"type": "string",
			"default": "black",
			"required": false,
			"aliases": [
				"logo-color"
			]
		},
		"id-h": {
			"label": "Logo height",
			"description": "Logo box height in pixels",
			"type": "number",
			"default": "45",
			"required": false,
			"aliases": [
				"logo-height"
			]
		},
		"id-lh": {
			"label": "Logo line height",
			"description": "Logo line height",
			"type": "string",
			"default": "1.25em",
			"required": false,
			"aliases": [
				"logo-line-height"
			]
		},
		"id-op": {
			"label": "Extra logo styling",
			"description": "Add additional arbitrary CSS styling to the logo",
			"type": "string",
			"required": false,
			"aliases": [
				"logo-other-param"
			],
			"example": "opacity: 0.25"
		},
		"id-p": {
			"label": "Logo padding",
			"description": "Logo cell padding",
			"type": "string",
			"default": "0 1px 0 0",
			"required": false,
			"aliases": [
				"logo-padding"
			]
		},
		"id-s": {
			"label": "Logo font size",
			"description": "Logo text size in points",
			"type": "string",
			"default": "14",
			"required": false,
			"aliases": [
				"5",
				"logo-size"
			]
		},
		"id-w": {
			"label": "Logo width",
			"description": "id box width in pixels",
			"type": "number",
			"default": "45",
			"required": false,
			"aliases": [
				"logo-width"
			]
		},
		"info-class": {
			"label": "Info CSS classes",
			"description": "Adds an HTML class attribute to the \"info\" HTML table-row, to allow for styling, emission of microformats, etc.",
			"type": "string",
			"required": false
		},
		"info": {
			"label": "Info",
			"description": "info text or image",
			"type": "content",
			"required": true,
			"aliases": [
				"4"
			]
		},
		"info-a": {
			"label": "Info content horizontal alignment",
			"description": "Horizontal alignment of info content; left/center/right/justify",
			"type": "string",
			"default": "left",
			"required": false,
			"suggestedvalues": [
				"left",
				"center",
				"right",
				"justify"
			]
		},
		"info-c": {
			"label": "Info background color",
			"description": "Info background color",
			"type": "string",
			"default": "#e0e0e0",
			"required": false,
			"aliases": [
				"2",
				"info-background"
			]
		},
		"info-fc": {
			"label": "Info font color",
			"description": "info font color",
			"type": "string",
			"default": "black",
			"required": false,
			"aliases": [
				"info-color"
			]
		},
		"info-lh": {
			"label": "Info line height",
			"description": "Info line height",
			"type": "string",
			"default": "1.25em",
			"required": false,
			"aliases": [
				"info-line-height"
			]
		},
		"info-op": {
			"label": "Extra info styling",
			"description": "Add additional arbitrary CSS styling to the info",
			"type": "string",
			"required": false,
			"aliases": [
				"info-other-param"
			],
			"example": "opacity: 0.25"
		},
		"info-p": {
			"label": "Info padding",
			"description": "info padding",
			"type": "string",
			"default": "0 4px 0 4px",
			"required": false,
			"aliases": [
				"info-padding"
			]
		},
		"info-s": {
			"label": "Info font size",
			"description": "info text size in points",
			"type": "number",
			"default": "8",
			"required": false,
			"aliases": [
				"info-size"
			]
		},
		"nocat": {
			"label": "nocat",
			"description": "block page category declarations (see WP:NOCAT)",
			"type": "string",
			"default": "false",
			"required": false
		},
		"usercategory": {
			"label": "usercategory",
			"description": "user category (optional)",
			"type": "string",
			"required": false
		},
		"usercategory2": {
			"label": "usercategory2",
			"description": "user category (optional)",
			"type": "string",
			"required": false
		},
		"usercategory3": {
			"label": "usercategory3",
			"description": "user category (optional)",
			"type": "string",
			"required": false
		},
		"usercategory4": {
			"label": "usercategory4",
			"description": "user category (optional)",
			"type": "string",
			"required": false
		},
		"usercategory5": {
			"label": "usercategory5",
			"description": "user category (optional)",
			"type": "string",
			"required": false
		},
		"logo-background": {
			"label": "Logo background color",
			"description": "Background color of logo",
			"type": "string",
			"default": "#ddd"
		},
		"id-class": {
			"label": "Logo CSS classes",
			"description": "CSS class or classes for the logo; optional",
			"type": "string",
			"default": "(none)"
		}
	},
	"format": "block",
	"paramOrder": [
		"bodyclass",
		"float",
		"border-c",
		"border-s",
		"id",
		"id-a",
		"logo-background",
		"id-c",
		"id-fc",
		"id-h",
		"id-s",
		"id-lh",
		"id-p",
		"id-w",
		"id-class",
		"id-op",
		"info",
		"info-a",
		"info-c",
		"info-fc",
		"info-lh",
		"info-p",
		"info-s",
		"info-class",
		"info-op",
		"nocat",
		"usercategory",
		"usercategory2",
		"usercategory3",
		"usercategory4",
		"usercategory5"
	]
}</TemplateData>

==See also==
{{UBT}}
<includeonly>{{Sandbox other||
<!-- Categories go here and interwikis go in Wikidata. -->
[[Category:Userboxes|*]]
[[Category:User namespace templates]]
[[Category:Wikipedia metatemplates]]
}}</includeonly>