User:HyperSonicBoom/Userbox Shop/Easy Tutorial
Welcome to my Userbox Easy Creation Tutorial! Here, I will tell you step-by-step on how to make a userbox direct from scratch.
1. Go to the page where you want to create it. It should start with a Template: suffix or be hosted on one of your user subpages.
2. Start by entering this code:
{| cellspacing="0" style="width: 238px; background: colour here; border: solid #000000 1px"
This is the code for a default userbox size. Change "colour here" to the name of the colour you want the right and biggest part of the box to be or use one of the internet-colours (as I call it).
3. Now, go to the next line and put this code:
| style="width: 45px; height: 45px; background: colour here; text-align: center; font-size: {{{5|{{{id-s|14}}}}}}pt; color: {{{id-fc|black}}};" | '''[[Image:Example.svg|40px]]'''
This is the code for the small section. Change "colour here" to the background colour of the userbox. Change "Image:Example.svg" to the image you want for your userbox, you can find a large assortment at Wikimedia Commons, and change the "40px" to the size of the image you want, don't make it too big or your userbox will be bigger than we want it to be. If you want words instead of an image, change the entire image code to letters.
4. Now, we are nearing completion. Take this code and put it on a different line:
| style="font-size: {{{info-s|8}}}pt; padding: 4pt; line-height: 1.25em; color: {{{info-fc|black}}};" | Userbox text |}</div>
Change the "black" in the code {{{info-fc|black}}} to the font colour you would like. Then, replace "Userbox text" to the text you want in the userbox. You have to put the "|}</div>" at the end on a seperate line, it won't show up correctly here.
5. Now, doublecheck this tutorial to make sure that you did everything right. Then, hit the "Show preview" button to make sure you did it. If you did it right, click "Save page" or tweak some stuff that you may have messed up if it doesn't look right.
6. To put your userbox into your userboxes, take the name of the page you saved it on and put it in template coding ({{Page name here}}).
Once you become more experienced with userbox making, you can even make better ones, where the picture is on the other side, or maybe a picture on both sides!
Gee, wasn't that easy!
If you needed help or have something for me to add to the tutorial, please leave a message on my talk page.