User blog:CreddieLuv4eva/A How-To Blog-Full Instructions for Making Your Own Userboxes!! :)

Here are instructions for making your own userbox. It's not that hard-just make sure to follow instructions carefully. If you have further questions, don't be afraid to ask! HTML coding requires careful concentration, but it's not too difficult, I promise :)

1. First, copy this script. This is sample coding for a template from @Katydidit's page, he has it on his profile for using to customize your own templates for userboxes. I suggest you check his page out for further help.

<>

cellspacing="0" cellpadding="0" style="width:238px; background:Red; border:3px solid blue;"
 * style="width:45px; height:45px; background:#violet; text-align:left; font-size:14pt;"|PICNAME
 * style="font-size:10pt; padding:4pt; line-height:1.25em;"|This user will always love Creddie!!!

The first paragraph surrounded by the < >, is instructions for getting the code right. The second paragraph is sample coding you can edit. We'll get to both of these in a moment.

2. Next-go to the Userboxes page. Think of what you want to call your template-for example, iCarlyLover. It's best to keep it short and simple. Now, create a new comment on the page, and write the name of the template with 2 { } around it, so it looks like this-, for example. Post the comment. Once it has posted, click on the link you have created that says Template iCarlyLover. It will take you to the page, where you can edit the userbox template and make it look the way you want.

3. Once you are on the editing template page, paste the script on it. Before you begin to edit, first get your code ready. Make sure that this {| is before 'cellspacing'. Than check that both ' |style ' lines begin on their own line-the first line should end with the File:PICNAME|70px]], and the second line ends with 'Creddie!!!" or the last words of your phrase. Also make sure there are 2 [ ] around the File:PICNAME section, but before the | on either side-it should look like this: |[[File:PICNAME|70px . Lastly, make sure this |} is after the last word of the phrase (Creddie!!! in this case) and STARTS ON ITS OWN LINE. You're all set!

4. Once you have prepared your code, it's time to edit. Remember, your template code is the second paragraph-it looks like this-

cellspacing="0" cellpadding="0" style="width:238px; background:Red; border:3px solid blue;"
 * style="width:45px; height:45px; background:#violet; text-align:left; font-size:14pt;"|PICNAME
 * style="font-size:10pt; padding:4pt; line-height:1.25em;"|This user will always love Creddie!!!


 * }

a. Add a picture to your template. The picture should have been already added to the wiki. If you're not sure if it has been or not, upload your own copy of the picture to page (you know how to this, right?). Then copy the code (in this case, Creddiekiss.jpg) and put it in File:PICNAME by deleting PICNAME and added Creddiekiss.jpg.

b. Change colors if you want. For example, to change the background to blue, put Blue in the place of Red in this part of the code- background:Red;. To change the border to black, for example, put solid black in the place of blue in this code- border:3px solid blue;. This is also where you can change the size of your border, 3px, 4px, etc. Keep it within 2-7 pixels though so it doesn't overwhelm your pic.

c. Change font size if you like by finding this code "font-size:10pt and changing the font.

d. Most important-change the phrase/set of words. Find the last part of the code, "|This user will always love Creddie!!!, and change it to whatever you want (This user is a fan of SPENCER!!, for example).

Use the first paragraph of instructions for further reference.

Your code is now ready!

5. Once you have made all the changes you want, press the Preview button to view it. If you want to make further changes, keep editing.

If you like how it looks, edit out the first paragraph of instructions so only your code is left (see above), and press Publish when you're ready.

You have now created your first userbox! To put it anywhere, use the name for it with two { } around it so it looks like this-, for example.

Any questions? I can help! Feel free to share your creations here!