How to make a userpage

Rockin Toon · #1 (**permalink**) 01-29-2009, 03:35 AM

The first thing you want to do is think about what you want on your page like:
• Toons information
• Things you like
• Screenshots
• Games
• Etc…

I like to start with the background first.

Depending on what style you want,
You can use a solid color background and put in a color code. Color Codes

Code:

<center><table bgcolor= "Color Code goes here" height=100% width=100%><tr><td>

Put userpage content here

</td></tr></table></center>

An example with a color code would be

Code:

 <center><table bgcolor= "#6600cc" height=100% width=100%><tr><td>

Put userpage content here

</td></tr></table></center>

(Okay so if you're new to HTML, you are probably thinking WHATS THIS!?! CODES?? I Give Up! My advice is, Dont Give Up, this all gets easier!
Definition: HTML- is a markup language that is used to create documents on the World Wide Web incorporating text, graphics, sound, video, and hyperlinks.
That doesn't seem so hard now does it?)

Or
You can use any image to be the background. When I’m looking for new background images I google search something like {background images, background pictures, background html} just search through the options until you find one you want. Here are a couple sites you can make your own backgrounds for free
Texture Backgrounds
Stripe Backgrounds
Tartan Backgrounds
Once you find the image you want save it to your computer
Now you need to get the URL for it, and to do that you want to upload it into a host site. I suggest the TTH Gallery, simply because its right here, FREE, and easy to get the URL.
Another site you could choose is Fileave, this site is free however you do have to become a member there.

Now that you have the URL you can put it in this code

Code:

<center><table border=0 background="Put URL here" height=100% width=100%><tr><td>
Put userpage content here 
</td></tr></table></center>

An example with the URL

Code:

 <center><table border=0 background="http://forums.toontownhall.com/gallery/images/580/large/1_102058p51eq55ydg.jpg" height=100% width=100%><tr><td>
Put userpage content here 
</td></tr></table></center>

Also with image backgrounds you can choose to have solid color in the center here is the code for that

Code:

<center><table border=0 background="Put URL Here" height=100% width=100%><tr><td> 
<table style="border:#000000 6px outset" bgcolor="#000099" height=80% width=80%><tr><td>
Userpage Content here
</tr></td></table>
</tr></td></table></center>

Note:
• The first part of the code will be your image background, you can make the space (amount of image background) from top to bottom larger by making space in between the background codes
For Example:
<center><table border=0 background="Put URL Here" height=100% width=100%><tr><td>

<table style="border:#000000 6px outset" bgcolor="#003399" height=80% width=80%><tr><td>

Userpage content here

</tr></td></table>

</tr></td></table></center>
There are several different ways to create blank space but I think that way is easiest.
• The First part of your background code looks like this <table ...........><tr><td> and you want that at the top of the page.
The Second part of the background code looks like this </tr></td></table> and you want it at the bottom. All of the stuff you want on your page will go in between, this is so all the content on the page gets included in the main background.

• You can end a background and start a new one by putting the Second part of the background code next to the first like this </tr></td></table><table ...........><tr><td> just make sure you add in another ending for the second background which is this </tr></td></table>

• You can change the height and width to any percentage you would like
Hint: The lower the number the smaller the solid center will be. I would stay within 75%-90%

• Other things can be modified in this code like the colors(#000000), border size(6px), border style(outset)

Information:
Now that you have on your background and you are ready to add more stuff keep in mind that the codes you put on your page will be in order.
For example: You want a picture of your toons above your toon information so you will put that image code above the toon information text.
Don’t forget if you wanted to add more space in between things you hit enter until you have created the amount of space you want, then add in the next thing you want in.

You can center your content by using this

Code:

 <center>Content here</center>

You can also use this code to be more specific with placement.

Code:

<div align="center">Put content here</div>

Note:
• You can change "center" to "right" or "left" but only for the <div align="center"></div> code.
• Everything will default to left, however if you want everything center you can put the <center> at the top and </center> at the bottom of the page and just put the align="left"/"right" code around the content you want to position.

Borders are a lot of fun you can make so many changes with them - colors, style, size and they can go around anything - marquees, images, sections etc…

Code:

 <table style="border:#9900ff 6px double" bgcolor="#33ccff" height=30% width=60%><tr><td><center>content here</center>
</tr></td></table>

Border with a Marquee

Code:

<table style="border:#9900ff 6px dashed" bgcolor="#000000" height=30% width=60%><tr><td><marquee behavior=scroll direction="up" scrollamount="5"><div style="color:#ffffff"><center> content here</center></div></marquee></tr></td></table>

Border with Scroll Box

Code:

<div style="overflow: auto; width: 500px; height: 150px; background-color:#000000;color:#1400f5;border:4px outset; border-color:#1400f5; scrollbar-base-color:#1400f5"><center>IMAGES AND TEXT GO HERE
IMAGES AND TEXT GO HERE
IMAGES AND TEXT GO HERE
IMAGES AND TEXT GO HERE
If there is not enough stuff
in this scroll box then the 
scroll bar will not appear
IMAGES AND TEXT GO HERE
IMAGES AND TEXT GO HERE
IMAGES AND TEXT GO HERE
IMAGES AND TEXT GO HERE</center>
</div>

Types of borders
• Dashed
• Dotted
• Solid
• Outset
• Inset
• Ridge
• Double
• Groove
• And of course None

Sizes
The sizes range from 1px and up. I like size 6px for most of my borders.
Note:The larger the number before px the larger the border will be.

Colors
The color codes can be changes to whatever you want the color to be. The border color and the background can be different colors.

Width and Height
Depending on the size you want, you can adjust the percent between 1%-100% the % is dependent on the size of the persons screen viewing your page.
If you wanted an exact size then you take out the % and add parenthesis("") around the number. I always start with "200" and make the number larger or smaller depending what size I need it to fit. The height needs to be in parenthesis rather than % or it just fits the space of the content.
Hint:You can use parenthesis for exact size instead of % (sizes that vary) anywhere.
Note:
• If you only want it the size of a certain image you do not have to include height and width in the code
• I have also included the <center></center> in this code so if you do not want it centered simply take out that code which is around the "content here."

Text Color

Code:

<div style="color:#33ccff"> Text goes here</div>

Text Style and Size

Code:

<font face="monotype corsiva,Courier New" size="4">Text goes here</font>

Text Color, Style, and Size together

Code:

<div style="color:#33ccff"><font face="monotype corsiva,Courier New" size="4">Text goes here</font></div>

Note:
• You can change the font to the style you want. The second font is incase the viewer does not have the first font on their computer - it will display your second choice.
• You can change the color and font of your text by replacing it with the font you want instead.
• You can change the size from "1" to "7," "7" being the largest.
• There are also cool places to make your own text like:
Ducky Text
Cool Text

Hidden Text
This will place a comment within your codes that cannot be seen by viewers, for example, "Place all images above this line."

Code:

 <!--Put text here-->

Bullet List
This will make a list with your text using bullets.

Code:

<UL TYPE="disc">
<LI>First Comment on List</LI>
<LI>Second Comment on List</LI>
</UL>

Bullet Styles
You can change the TYPE="" to the bullet style you choose.
• "disc"-Solid Cirlcle
• "circle"-Hollow Circle
• "square"- Solid Square

Number List
This will add a list to your text using numbers.

Code:

<OL TYPE="A">
<LI>First Comment on List</LI>
<LI>Second Comment on List</LI>
</OL>

Number Style
You can change the TYPE="" to the number style you choose.
• "A"- A,B,C….
• "a"- a,b,c…
• "I"- I,II,III…
• "i"- i,ii,iii…
• "1"-1,2,3…

Note: You can add in more lines to your list by adding another <LI>...</LI> tag.

This is the code you use for putting things like pictures, screenshots, edits, etc.. on your page

Code:

<img src="Image URL Here">

You can also put your Images side by side by using this code

Code:

<table width=750><tr><td>
<img src="url for image">
</td>
<td>
<img src="url for image">
</td></tr></table>

Note:
• You can adjust the size of the width depending on the size of your images.
• This will also work with text

Everyone wants music on their page, you can accomplish this by finding a music player host, or by uploading your music into a host like Fileave and using this code
Music

Code:

<embed src="Song Link Here" width=300 height=16 autostart=true loop=true volume=100>

If you would like a video on your page then you use this code. You will need to find a video host, unfortunately I do not have any recommendations.
Video

Code:

<embed src="Video Link Here" HEIGHT="240" WIDTH="320" AUTOSTART="FALSE" LOOP="False">

You can have it
• Autostart- AUTOSTART="true" will make the Music/Video start when the page loads. AUTOSTART="false" will keep the Music/Video from playing immediately when the page load.
• Loop- LOOP="true" will play the Music/Video repeatedly. LOOP="false" will play the Music/Video once.
• Hidden- HIDDEN="false" will show the control box. HIDDEN="true" will hide the control box.
Note:You can customize the hieght and width numbers ("300") to get the size you want.

Advice
If you get an HTML code for your page from a site for like a music player, game, or slideshow and it links out to another site try and taking out all of the <a href=…………>Junk in between</a> all that does is link you to that site. And if you’re having trouble you can always PM me and I can help get it off.

So many things can be done with marquees and they really help animate your page
There are several different actions a marquee does. Here are some codes but a lot more can be found

Bouncing marquee

Code:

 <marquee behavior="alternate" direction="up" width="100%"><marquee direction="right" behavior="alternate">Text or Image here</marquee></marquee>

Scrolling marquee

Code:

 <marquee behavior=scroll direction="left">Your message here</marquee>

Marquee with a background color

Code:

<marquee bgcolor="# you color code here">your message here</marquee>

Alternating Marquee

Code:

 <marquee behavior="alternate" width="100%">your message here</marquee>

Wild Marquee

Code:

<marquee bgcolor="#color code" width="20%">your text here</marquee><marquee bgcolor="#color code" width="20%" direction="right">your text here</marquee><marquee bgcolor="#color code" width="20%">your text here</marquee><marquee bgcolor="#color code" width="20%" direction="right">your text  here</marquee>

Hiding Marquee

Code:

 <marquee                           behavior="alternate"><marquee width="200">hiding </marquee></marquee>

Hovering Marquee

Code:

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Hover marquee</marquee>

Click to Stop Marquee

Code:

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Click to Stop Marquee</marquee>

Note:
• The directions are Left,Right,Up.Down and can all be substituted if you want it to scroll right instead of left simply change it to right.
• Remember, it’s okay to experiment with colors, width, speed, etc. to get the style you want.
• You can change the speed of the marquee by adding in the scroll amount. The larger your number is, the faster your marquee will be.
Here is an example with scrollamount

Code:

<marquee behavior=scroll direction="left" scrollamount="5">Text or Image here </marquee>

This is fun for next buttons or just to have a table of contents
I wont put this one in a code box because there are two parts to it

First you take this code <a href="#Toons"> Meet my Toons</a> and put it around the section of the page you are referring to
and where you want that section to jump or go to you put this <a name="Toons">my toons</a>

Note:
• You can do this as many times as you want plus make it go up the page, down the page, or up and down the page.
• The #Toons can change to whatever title you want it to be like #Top,#Apple,etc… it doesn’t matter, however where you want your page to jump must match the
title just make sure you do not include the # in this code <a name="Toons">my toons</a>
• The “Meet My Toons” and “My Toons” are examples and it will be your Content that will go there.

This will create a pop up message when someone is entering your userpage.
Very annoying to me LOL so I do not recommend them

Code:

<SCRIPT language="JavaScript">alert("The comment you want in this annoying pop up goes here")</SCRIPT>

Of course there are many more codes and awesome things you can do but hopefully this will give you a good start. Also if you see any errors or know a code you would like added please let me know. Learn lots of cool new stuff and Feel free to PM me if you have any questions.

K. Jon Kit · #2 (**permalink**) 01-29-2009, 08:56 AM

OWOOO! the color code link doesn't work
This is really awesome!
Thanks KJK

White Nights · #3 (**permalink**) 01-29-2009, 09:08 AM

Awesome guide!
Still am really blank on how to do it. Guess I have to do one step at the time.

Never worked with userpages, so I guess its time to try, lol!!!

Thanks Rockin Toon for taking the time to make this guide!

Anita

serendipity · #4 (**permalink**) 01-29-2009, 09:26 AM

Thank you Rockin Toon!

I know what I'm going to be working on this weekend!

Edit: OK, I tried. I really, really tried

I got lost somewhere in "backgrounds" lol!

Edit again: All credit for anything in my userpage at this point goes completely to Rockin Toon! YOU ROCK!

Karma · #5 (**permalink**) 01-29-2009, 10:24 AM

What a great thread!! Ty for the helpful info

Lady Gigglesnout · #6 (**permalink**) 01-29-2009, 01:35 PM

Besides the rockin' userpage, this guide is awesome ! Keep on rockin

!

WitchyDaMom · #7 (**permalink**) 01-30-2009, 11:40 AM

A very big hug to you! I have been asking my daughter to help me with my userpage, but she is extremely busy with school. But thanks to your guide, I created my userpage on my own! WOO HOO! It is very simple, but I am proud of it!

Thanks again!

Rockin Toon · #8 (**permalink**) 01-30-2009, 12:44 PM

Thank you everyone!
I'm going to make a userpage just using this thread and add information or more direction where it's needed.

Quote: Originally Posted by WitchyDaMom

A very big hug to you! I have been asking my daughter to help me with my userpage, but she is extremely busy with school. But thanks to your guide, I created my userpage on my own! WOO HOO! It is very simple, but I am proud of it!

Thanks again!

Your Welcome! I'm so happy it helped you! and your page looks Great!

Good Ol' Lollipop Poppentooth · #9 (**permalink**) 01-30-2009, 02:31 PM

Wow, thanks for this great guide, RT! This is a huge help for people like me learning HTML. I'm amazed that you taught yourself how to do all of this stuff! Way to go!!

Big Flip · #10 (**permalink**) 02-01-2009, 04:08 AM

Thank you for posting this, Rockin Toon.

It is great with the Userpage FAQ page on the ToonTown Hall Wiki.