Template:Userbox — wikis

<3	Enter text here

Userbox template

Make your own userboxes! You can use this template or the UserboxThemed variant that has built-in color themes.

Note that any images you upload must follow our rules. If you want to use an existing image, check out Category:Icons for ideas.

Beauty and accessibility tips

Make sure you have plenty of contrast between the text color and the background color. Use light/dark or dark/light.
Avoid neon colors (e.g. neon green) because these hurt some people's eyes.
Avoid flashing or distracting animations.
Make sure your font sizes don't cause overflow.

Courtesy

Don't add a userbox to someone else's page without permission.
Skip spammy, NSFW, or disrespectful topics/language.
Be cautious about political topics, or just skip them. Our purpose is to educate about wikis, not start fights with other users.
Don't create userboxes that are racist, sexist, transphobic, or derogatory towards any other group.

Note

Our rules apply to images you upload for userboxes.

Admins reserve the right to:

Delete userboxes for any reason
Edit userboxes to fix poor contrast, typos, poor formatting, or images that violate our rules

Want to add this template to your wiki?

You absolutely can! Initial creator MissLunaRose made this for sharing.

How admins can add CSS for text link color control

For more info, see How I control template link colors with CSS at the Autism Living Wiki.

Text links inside a userbox aren't a good idea unless you can use CSS to control link color. Otherwise, text links may be hard to read in dark and/or light mode.

Want to make it happen? First, you'll need access to the wiki's CSS, which only admins have. Go to both desktop and mobile CSS and paste this:

.dark-links a { color: DarkSlateGray; }

This code creates the "dark-links" class and says that any link within a "dark-links" box will be DarkSlateGray. You can change the "DarkSlateGray" to any HTML-friendly dark color you want, including hex codes and colors from this color list.

You can also make more classes for your userboxes if you want. Here's an example you could copy-paste and play with:

.dark-links a { color: DarkSlateGray; }
.light-blue-links a { color: Azure; }
.navy-links a { color: Navy; }

When you're making a userbox, use the "class" parameter to specify which class you want to use (e.g. "light-blue-links") in a given userbox. Make sure you've done a hard refresh on your browser to see the link coloration take effect.

More info

This is imported and adapted from the Autism Living Wiki.

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Border color	`border-color`	Color of border Example white, #abc	Unknown	suggested
Left BG color	`logo-bg-color`	Background color for left logo area Example e.g. lavender, #abc	Unknown	suggested
Image on the left (optional)	`image`	If you don't put an image here, you may use text instead.	Unknown	suggested
Image width	`width`	Width of image (default 25px, box size is 45px)	Unknown	suggested
Image link (optional)	`imagelink`	Name of a wiki page to link the image to Example Autism Living Wiki	Unknown	suggested
Image alt text	`alt`	Not needed for decorative images (i.e., most userbox images). Add very short, concise text if needed for screen readers Example Heart, Smile	Unknown	optional
Left logo text	`logo`	If you aren't using an image, put an emoji or a few letters.	Unknown	optional
Left font size (if using text)	`logo-size`	Default: 14pt Example 12pt, 16px	Unknown	optional
Left text color (if using text)	`logo-color`	no description Example black, #333	Unknown	optional
Right info text	`info`	The text on the right side Example This user is beautiful	Unknown	suggested
Right info BG color	`bg-color`	no description Example #BBDEE8	Unknown	suggested
Right info text color	`info-color`	Brown is #943025. (default: black) Suggested values `white` `#943025` Example #943025, #333, black	Unknown	suggested
Right info font size	`info-size`	Tip: up to 11pt for 2 lines of text; try 12pt for one line of text (default: 10pt) Example 9pt, 12pt	Unknown	suggested
Special classes	`class`	Optional special CSS classes, if enabled my admins	Unknown	optional
Left styles	`logo-styles`	Special CSS styles for the left logo area Example line-height: 20px;	Unknown	optional
Right info styles	`info-styles`	Special CSS styles for the info area	Unknown	optional
CSS filter	`filter`	Special CSS filter for the image Suggested values `brightness(200%)` `brightness(50%)` `hue-rotate(90deg)` `contrast(150%)` Example brightness(200%)	Unknown	optional
For template usage only: Is this a demo?	`demo`	Only relevant for the template namespace. Put "Yes" to override the "List of userbox" category inclusion. Suggested values `Yes` `No` Example Yes	Unknown	optional