User blog:Perfectdisasters/How To Make a Userbox

Okay, so a lot of you must be wondering how to make a userbox. Well here are the instructions(:

Step One: Naming Your Userbox
The first step to making a userbox is to decide what you want to call it. This should be something simple and short. However, make sure that it has never been used before.



Step Two: Create A Blank Template Page



Next, you need to create a template page. Go to any page of the wiki and click contribute.





A drop down menu will appear, allowing you to select the following options:

~Edit this page

~Add a video

~Add a photo

~Add a page ~Wiki Activity

 Select Add a page.

<p style="color:rgb(0,0,0);line-height:21px;">

<p style="color:rgb(0,0,0);line-height:21px;">A pop up will appear. When you type the title, make sure you start with Template:

<p style="color:rgb(0,0,0);line-height:21px;">This will not work if you do not start with Template:

<p style="color:rgb(0,0,0);line-height:21px;">After the procedure of typing in Template: (make sure the collin ":" is there too), type in the name of your userbox.

<p style="color:rgb(0,0,0);line-height:21px;">For example: Template:ANT Farm Lover

<p style="color:rgb(0,0,0);line-height:21px;">(It is capital & spacing sensitive so be careful).

<p style="color:rgb(0,0,0);line-height:21px;">After naming it, select "Blank Page" and click on "Add a Page".

<p style="color:rgb(0,0,0);line-height:21px;">

<h2 style="color:rgb(0,0,0);line-height:21px;">Step Three: The Userbox Code

<p style="color:rgb(0,0,0);line-height:21px;">cellspacing="0" cellpadding="0" style="width:200px; background: Color Here; border:3px solid black;" ERASE THIS TEXT AND HIT THE ENTER BAR HERE|style="width:45px; height:45px; background:#violet; text-align:left; font-size:14pt;"| ERASE THIS TEST AND HIT THE ENTER BAR HERE|style="font-size:10pt; padding:4pt; line-height:1.25em;"|Message Here

<p style="color:rgb(0,0,0);line-height:21px;">Copy and paste this code into your blank template page.

<p style="color:rgb(0,0,0);line-height:21px;">Follow what the bolded line indicates. If you do not, the userbox will not be created.

<p style="color:rgb(0,0,0);line-height:21px;">In the beginning of the code, make sure you add "{|" (minus the quotation marks). This symbol should not be on its own line. It must go right before 'cellspacing' in the code. This step is '''very important. '''If you forget to do this step, your userbox won't be a a userbox at all. It will just a line of text.

<p style="color:rgb(0,0,0);line-height:21px;">At the end of this code you have to include a symbol that looks like this "|}" (minus the quotation marks), but make sure that it is ON IT'S OWN LINE. This step is very important, because if you forget it then your userbox will never end and it will eat all text after it.

<p style="color:rgb(0,0,0);line-height:21px;">There are places where it is written in bold "ERASE THIS TEXT AND HIT ENTER BAR HERE", which means that in those places you should erase the bolded text that says "ERASE THIS TEXT AND HIT ENTER BAR HERE", and hit the enter bar to send the next words to a new line of text. You should end up with three lines of text, not including the final line that contains only the "|}" symbol. Please do not erase the | symbol. It should be at the beginning of every line, except for the first line where the beginning should be {|

<p style="color:rgb(0,0,0);line-height:21px;">

<h2 style="color:rgb(0,0,0);line-height:21px;">Step Four: Personalizing Your Userbox

<p style="color:rgb(0,0,0);line-height:21px;">Please note that the bolded text is where you should personalize the userbox.

<h4 style="color:rgb(0,0,0);line-height:21px;">CHANGING THE COLOR OF YOUR USERBOX:

<p style="color:rgb(0,0,0);line-height:21px;">In the spot where I have written in bold "Color Here" you should erase that and type in the color you want. Please note that if you want a color such as light blue you should put the text as one word lightblue. There are many color available for this step. Basic colors such as red and yellow are available, as well as more specific colors such as hotpink. There are even colors like gold or silver or maroon or crimson. You can try to type in colors and see if they are available. If the background color is not showing up, then that means that that color is not available and you should chose another one.

<h4 style="color:rgb(0,0,0);line-height:21px;">PUTTING A PICTURE IN YOUR USERBOX

<p style="color:rgb(0,0,0);line-height:21px;">In order to put a picture inside of a userbox, that picture first needs to be uploaded to the wikia. If that picture is not uploaded, then please go the gallery and click "add a picture" to add your picture now. Once you have made sure that the picture does exist, you should copy the name of the file and put it into the spot that says File Name Here in bold. You can find the name of the file by clicking on the picture, it will open in a new window and the name is on top. Make sure to include the .jpg or the whatever it is that the file name ends with. And yes, this picture can be a gif image and it works the same way. Be careful about the size of your image. Shrink it if necessary.

<h4 style="color:rgb(0,0,0);line-height:21px;">THE MESSAGE

<p style="color:rgb(0,0,0);line-height:21px;">The message goes where it says: "message here" replace that text with what you want it to say. Commonly, a userbox begins with "This user" but that is not necessary.

<h4 style="color:rgb(0,0,0);line-height:21px;">HEIGHT AND WIDTH

<p style="color:rgb(0,0,0);line-height:21px;">I have left the height and width and what is good for the average userbox, but you can change it if necessary.

<p style="color:rgb(0,0,0);line-height:21px;">

<p style="color:rgb(0,0,0);line-height:21px;">

<p style="color:rgb(0,0,0);line-height:21px;">Once you have fixed everything, it should be simliar to my code above. (The difference should be the file name, colors and message.

<p style="color:rgb(0,0,0);line-height:21px;">

<p style="color:rgb(0,0,0);line-height:21px;">When you think you are finished, look to the right. On the side, there is a button that says: Preview

<p style="color:rgb(0,0,0);line-height:21px;">Click on that.

<p style="color:rgb(0,0,0);line-height:21px;">

<p style="color:rgb(0,0,0);line-height:21px;">The preview of your usebox will popup.

<p style="color:rgb(0,0,0);line-height:21px;">If everythings correct, click Publish.

<p style="color:rgb(0,0,0);line-height:21px;">Now you can use your userbox anywhere on the wiki! (Make sure it's appropriate though.)

<p style="color:rgb(0,0,0);line-height:21px;">To use your new userbox, use these –  and type in your userbox code.

<p style="color:rgb(0,0,0);line-height:21px;">