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.

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 or, in the case of a single output: {| !Template Output !Plain Code
 * <"pre"><"/pre">
 * <"/pre">
 * <"pre"><"/pre">
 * <"/pre">
 * <"pre"><"/pre">
 * <"/pre">
 * <"pre"><"/pre">
 * <"pre"><"/pre">
 * <"pre"><"/pre">
 * <"pre"><"/pre">
 * <"pre"><"/pre">
 * <"pre"><"/pre">

Notable UBX Examples
{| !Template !Template Code !Why Is It Good?
 * Giving the image's color to the border.
 * Users a color theme similar to FANDOM's logo, text could be fixed by setting "info-s" to "8" for homogeneity
 * Follow a theme to the typical "terminal-like" color palette.
 * Uses the icon's BG color on the UBC's BG color.
 * Another good example of a simple UBX associating the image color to the border.
 * Users a color theme similar to FANDOM's logo, text could be fixed by setting "info-s" to "8" for homogeneity
 * Follow a theme to the typical "terminal-like" color palette.
 * Uses the icon's BG color on the UBC's BG color.
 * Another good example of a simple UBX associating the image color to the border.
 * Follow a theme to the typical "terminal-like" color palette.
 * Uses the icon's BG color on the UBC's BG color.
 * Another good example of a simple UBX associating the image color to the border.
 * Uses the icon's BG color on the UBC's BG color.
 * Another good example of a simple UBX associating the image color to the border.
 * Uses the icon's BG color on the UBC's BG color.
 * Another good example of a simple UBX associating the image color to the border.
 * Another good example of a simple UBX associating the image color to the border.
 * Another good example of a simple UBX associating the image color to the border.
 * Another good example of a simple UBX associating the image color to the border.
 * Another good example of a simple UBX associating the image color to the border.