Wikia

Community Central

Comments8

Carnage's Guide to Templates: Userboxes

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 Edit

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 Edit

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 Edit

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 Edit

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

Regular Edit

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 Edit

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 Edit

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 Edit

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

Code Edit

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 Edit

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.

Around Wikia's network

Random Wiki