Fandom

Community Central

Comments8

Carnage's Guide to Templates: Userboxes

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Carnage's Guides
Guides to Templates
Guides to CSS


Hello everyone, I'm Carnage with another guide of templates, but this time, I'm going to show you a tutorial on how to create a userbox. This is the sequel to my first blog, User blog:Ultimate Dark Carnage/Carnage's Guide to Templates: Navboxes. Many people are confused on making userboxes, and this blog might help those people, especially people that are new to the network. You must add your userbox to the Template:Userbox page. If you ever need help with creating userboxes, follow the instructions below:


Method 1

Here is the first method of creating a userbox. This is the basic userbox, and these boxes do not have images. Here are the tips on how to create this userbox:

Regular

Here is the regular userbox. This is the easiest method of creating a userbox. Here is an example:

{| align="center" width="40%" style="border: {{{bwidth|1px}}} solid {{{bcolor|blue}}}; background: {{{bgcolor|maroon}}}; color: {{{tcolor|white}}}; text-align: center;"
| {{{content|Content}}}
|}

Note: You do not have to align the userbox, but you must set the width to no more than 40%.
Here is the template code:

{{Userbox
|bwidth = 1px
|bcolor = blue
|bgcolor = maroon
|tcolor = white
|content = Content
}}

Here is the result of the code:

Content

Rounded

Here is the rounded userbox. Here is an example:

{| align="center" width="40%" style="border: {{{bwidth|1px}}} solid {{{bcolor|red}}}; background: {{{bgcolor|silver}}}; color: {{{tcolor|navy}}}; border-radius: {{{bradius|10px}}};"
| {{{content|Content}}}
|}

Note: If you want to make your userbox round, you must use border-radius. Here is the template code:

{{Userbox/Rounded
|bwidth = 1px
|bcolor = red
|bgcolor = silver
|tcolor = navy
|bradius = 10px
|content = Content
}}

Here is the result of the code:

Content

Method 2

Here is the second method of creating a userbox. These boxes have only one image. Here are the tips on creating the userbox:

Regular

This is the regular userbox. Here is an example:

{| align="center" width="40%" style="border: {{{bwidth|2px}}} solid {{{bcolor|brown}}}; background: {{{bgcolor|chocolate}}}; color: {{{tcolor|white}}}; text-align: center;" 
| [[File:{{{image|Placeholder.png}}}|{{{imagesize|50px}}}]]
| {{{content|Content}}}
|}

Here is the template code:

{{Userbox/Image
|bwidth = 2px
|bcolor = brown
|bgcolor = chocolate
|tcolor = white
|image = Placeholder.png
|imagesize = 50px
|content = Content
}}

Here is the result of the code:

Placeholder Content

Rounded

This is the rounded userbox with an image. Here is an example:

{| align="center" width="40%" style="border: {{{bwidth|2px}}} solid {{{bcolor|gold}}}; background: {{{bgcolor|orangered}}}; color: {{{tcolor|navy}}}; text-align: center; border-radius: {{{bradius|20px}}};" 
| [[File:{{{image|Placeholder.png}}}|{{{imagesize|75px}}}]]
| {{{content|Content}}}
|}

Here is the template code:

{{Userbox/Image (Rounded)
|bwidth = 2px
|bcolor = brown
|bgcolor = chocolate
|tcolor = white
|bradius = 10px
|image = Placeholder.png
|imagesize = 50px
|content = Content
}}

Here is the result of the code:

Placeholder Content

Method 3

This is the third method of creating a userbox. The userboxes have two images. Here are the tips on creating the userbox:

{| align="center" width="40%" style="border: {{{bwidth|2px}}} solid {{{bcolor|brown}}}; background: {{{bgcolor|chocolate}}}; color: {{{tcolor|white}}}; text-align: center;" 
| [[File:{{{image|Placeholder.png}}}|{{{imagesize|50px}}}]]
| {{{content|Content}}}
| [[File:{{{image2|Placeholder.png}}}|{{{imagesize2|50px}}}]]
|}

Here is the template code:

{{Userbox/Image
|bwidth = 2px
|bcolor = brown
|bgcolor = chocolate
|tcolor = white
|image = Placeholder.png
|imagesize = 50px
|image2 = Placeholder.png
|imagesize2 = 50px
|content = Content
}}

Here is the result of the code:

Placeholder Content Placeholder

CSS

This part of the tutorial is for people who does CSS. Here are the tips on creating a userbox with CSS:

Code

You must have class="userbox" on your template for the CSS to work. Here is the CSS code that you can add to your wiki's MediaWiki:Wikia.css or MediaWiki:Common.css:

table.userbox {
    border: 2px solid red;
    background: silver;
    border-radius: 5px;
    color: navy;
    width: 40px;
}
 
table.userbox img {
    opacity: 0.6;
}
 
table.userbox img:hover {
    opacity: 1;
}
 
table.userbox a {
    color: red;
}

Conclusion

Many people are confused about the subject of creating a userbox, but blogs like this has taught them how to create the userboxes. If you have any ideas, feedback, and/or other stuff, you can comment on this blog.

Also on Fandom

Random Wiki