User:TabbyGarf/Guides:Userbox Etiquette

Disclaimer

This userbox etiquette is part of a project of UBX (Userbox) uniformization applied in part by some administrators on their own userboxes. This etiquette tries to obtain overall sameness of style by being visually attached to the default wiki theme. This sameness is achieved by attributing the page background color to the userbox's "id-c" and "info-c" values. Another way of reaching that sameness is setting a userbox height (id-h) of 45 pixels, this value is also set to the picture (id value). You are not obligated to follow the etiquette as you wont get banned for breaking it. It's your UBX. your style. However in the case of let's say less niche/more general Userboxes (like an admin status UBX, User info UBX like {{User:TabbyGarf/MemberFor}}, {{User:TabbyGarf/UserHelper}} or {{User:TabbyGarf/Translator}}. This guide supposes you know how userboxes work.

Template

Such a userbox can be made thanks to multiple ways.

UBXThis is a simple UBX template following the etiquette. This is the output from the code below.

{{userbox
| border-c      = #e87057
| border-s      = 2
| id            = UBX <!-- or [[File:filename.extension|45px|link=]] -->
| id-c          = #333
| id-h          = 45
| id-s          = 12
| id-w          = 45
| info          = sample text
| info-c        = #333
| info-fc       = #fff
| info-s        = 8
}}
<noinclude>
{{documentation}}
</noinclude>

To follow more the wiki's theme you can see i've set the border-c value to "#e87057" to fit the Hyperlink color.

If you dont want to bother touching any code you can use this UBX generator as long as you follow the template values for "id-h", "id-w" and "id" in case you use an image.

Documentation

Adding documentation is necessary for userbox usage. To make a documentation you need to put {{documentation}} inside the tags and make a "/doc" sub-page for example, User:TabbyGarf/UserHelper's documentation page is User:TabbyGarf/UserHelper/doc. You can use a table to show different outputs of your UBX. (Remove quotation marks.)

{|
!Template Output
!Plain Code
|-
|{{User:K-Fee/UBX}}
|<"pre">{{User:K-Fee/UBX}}<"/pre">
|-
|{{User:K-Fee/UBX|Auto}}
|<pre>{{User:K-Fee/UBX|Auto}}<"/pre">
|-
|{{User:K-Fee/UBX}}
|<"pre">{{User:K-Fee/UBX|Strand}}<"/pre">
|-

or, in the case of a single output:

{|
!Template Output
!Plain Code
|-
|{{User:K-Fee/UBX}}
|<"pre">{{User:K-Fee/UBX}}<"/pre">
|-

Remarks made over time

Please do not use to put a color for your UBX text, as info-fc and id-fc both exist. Also try to avoid using effect because it can be ugly.

Notable UBX Examples

Template	Template Code	Why Is It Good?
TabbyGarf/Guides:Userbox Etiquette is obsessed with Garfield and wants you to know it!	{{User:TabbyGarf/Garfield}}	Giving the image's color to the border.
This user despises FANDOM (Wikia).	{{FANDOMDespise}}	Users a color theme similar to FANDOM's logo, text could be fixed by setting "info-s" to "8" for homogeneity
This user is a hacker.	{{UserHacker}}	Follow a theme to the typical "terminal-like" color palette.
This user supports Black Lives Matter.	{{BLM}}	Uses the icon's BG color on the UBC's BG color.
This person is obsessed with 「2D」凶悪犯 and wants you to know it!	{{BDSM}}	Another good example of a simple UBX associating the image color to the border.