Our Product Page Generator will help you create unique product pages. Click Here for More Information
Home About Contact FAQ Guestbook Site Map Links Chat Group
Home Support Previous Updates Site Map Terms of Use Privacy Policy
Updated March 1, 2010
-  Powered by Jspunkette  -


Basic Codes

To use these codes, copy (Ctrl + C) and paste (Ctrl + V) whatever you want onto your page in whatever category you want it in!

| How do I make my stuff centered? left? right? |
| How do I create spaces between stuff? paragraphs? |
| How do I make my text different? |
| How do I put images on my page? |
| How do I make scrollable boxes? |

Alignment

To align your content however you want, whether it be center/left/right, you must first know that it won't align everything - it just depends on where you place the code.

  Alignment to the Center  

To center your content, place the following code at the beginning of where you want the content to be centered
Please also include the </p> in the code, because it tells the computer to stop the alignment.

  Alignment to the left  

To align your content to the left, place the following code at the beginning of where you want the content to be at the left.
Please also include the </p> in the code, because it tells the computer to stop the alignment.

  Alignment to the right  

To align your content to the right, place the following code at the beginning of where you want the content to be at the right.
Please also include the </p> in the code, because it tells the computer to stop the alignment.

| Back to Top |

Spaces/Paragraphs

There are different ways to create spaces between things. One thing I must note, whenever you're inputting something in your profile (or a website), if you're typing up something in your about me panel - for instance, like just random things about yourself, the paragraphs you intended to make - wont show up unless you use a code. This isn't like a type-writer, pushing enter or tab won't give you the desired effect. This is where html comes in play.

  Spaces  

To add more space between text/images, like to make them really far apart - put this code where you want some space. Now, this code will only create one space - kind of how a regular sentence would space their words - but think about how much space it would create if you used multiple ones in a row?

Using      A LOT      OF      SPACE

Add this code anywhere you want an extra space to show up.

&nbsp;

  Paragraphs  

To make paragraphs, just put this code in-between your paragraphs (it can be images too).
Remember: Please put </p> after your paragraph, because it tells the computer that's when the paragraph ends.

  Line-Breaks  

To make a line-break, just put this code wherever you need it.

A
Line
Break

| Back to Top |

Changing your Text Style/Color/Size/Font

You can do different things with words on your homepage (or any page on the web). You can change the color, font, size - you can even make your text bold, well..the list goes on and on.
On other websites, they might give you some different codes for the same effect. My codes, in my opinion, are easier. Whichever you use is fine, but I'm giving you the easiest (in my opinion).

  Font-Style  

By font-style, I mean making your text bolder - or using italics - that kinda stuff. They'll only work on your text!!

This text is bold

This text is underlined

This text is italic

This text has a line on top of it.

This text is underlined and has a line on top

  Font-Size  

That's right! You can make your text tiny (but be kind and let people be able to read it! We don't want to use a magnifying glass to read your text!). Or you can make it really big (not too big, then your page will go wacky). There's different variations of this code, but again - I'm going to give you the easiest (in my opinion).

This text is tiny!
This text is usually what's on default
This text is bigger!

The code below, replace the # with a number from 1-10. The higher the number, the bigger it is. The number can go up to 10. Have fun!

  Font-Color  

There are 2 different ways that you can change the font color. One is just using words like "red", "white", etc. in the code - the other is using HEX color codes. If you use a graphic program (I recommend the free program, paint.net), they sometimes tell you the HEX color code of a certain color. If not, you can visit my hex color code chart to find the right color!

You can also find a full list of color names by clicking here

Note: The color names that are valid and that will work are: fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, Orange, Pink

I used the word "red" in this one
I used a HEX code to make a different color red

  Font-Type  

To change your font on y our text, you must know that there's only a few fonts that almost every computer can see. If you use a font that isn't on the list below, then just know that not everyone will be able to see your text the same way you do. Click Here if you want to read about other fonts as well, interesting read (will open in a new window, thanks Indigo007 for this!)

This font is called Arial
This font is called Times New Roman
This font is called Verdana
This font is called Georgia
This font is called Comic Sans Serif
This font is called Trebuchet

  Combining Codes  

You can combine the codes so it isn't so cluttered. Example:

This text has a font of arial, it's red, and the size is 4

| Back to Top |

Images

To put images on your profile/site, you must first upload your desired pictures to an image hosting site (like FileDen. A popular one is photobucket, but I would recommend FileDen.) Usually the image hosting site will give you the html code once you upload it, if not - here's the code:

| Back to Top |

Scrollable Boxes

I've been asked about this code a lot. This will create your OWN box, and make it scroll. I've made this code so it will only scroll if there's a lot of stuff in the box, you'll thank me later.
This are things called Div's. That's what the HTML world calls them at least, haha. Anyway, you can change it to whatever size you want. I've made this code width=200px height=200px. You can change it to whatever you want. You can also make it bordered. I will tell you how to make it bordered below. You can change the color of the text in it, and you can also position it wherever you want in the panel (optional, and this will be discussed in the Advanced Codes section. The positioning part is recommended only for advanced users.)

I will make an example of what the code will look like, and then explain what each part means. It's better this way, and then I will show you different ideas of a box - and they will be pre-made boxes. It's up to you on what you want.

<div style="border:1px solid; border-color:#ffffff; color:#ffffff; width:200px; height:200px; overflow:auto;">
Put whatever you want in the box here, whether it's images or text - or whatever </div>

  Border  

This is the part of the code where you can make a border around the box! There's a lot of ways to make the border your own. You can change the style of your border, color, and how thick the border will be.
These are the different border styles you can use:

This border is called solid. I've made the width of this div 200px by 50px. The thickness of the border is 2px.

This border is called double. I've made the width of this div 200px by 50px. The thickness of this border is 2px.

This border is called dotted. I've made the width of this div 200px by 50px. The thickness of this border is 2px.

This border is called dashed. I've made the width of this div 200px by 50px. The thickness of this border is 2px.

This doesn't have a border. In order to make your box without a border, you just type in border:0px;

To change the width of your border, just change the 1px to whatever size, 1px is the smallest without having no borders. After the 1px you put in the style. Just change it to whatever style you want, you have 4 to choose from: solid, double, dotted, or dashed. To change the color of your border, just put in the hex code of your choice. Hex Code Colors can be found in the HEX Colors section.

  Color  

This changes the color of your text IN the box. By now you should know that you can change it to whatever HEX color you want, go to the HEX Colors section for the colors.

  Width/Height  

This changes the size of your box. Just change the width: and height: to whatever you want. You change the sizes by pixels. The higher the number, the bigger it is. For example: 500px is bigger than 100px. Just experiment. At least you're learning!

  Overflow  

This makes your box 'scrollable'. I would HIGHLY recommend just keeping it on auto, auto means that if the content in your box is larger than the box itself - it will scroll. If the content in your box is smaller than the box itself - it will not scroll. Just because I care about you guys, I'm just gonna tell you to put in auto. ONLY because I know the other options aren't good. If you're curious and want to know what the other options are, contact me through email or in the group

  Pre-made Div Boxes  

Put whatever content you want in here, images/text - whatever!

Put whatever content you want in here, images/text - whatever!

| Back to Top |