Davin's Petpage Tutorial

UPDATE: No credit needed! Just grab & go! There are two different styles of petpage tutorials here. You can either choose the one or two column petpage. The two column petpage tutorial is at the top because I've noticed that they seem to be more popular. The one column petpage tutorial is near the bottom.

Editing

1. All hex color codes will start off with # followed with 6 numbers or letters. Example: #D87093
2. For a list of hex color codes to use click here or here.
3. A variety of Neopets related backgrounds can be found here.
4. It's handy to have a edit petpage tab and your notepad document open at the same time so you can check, edit and preview what you've done so far!
5. Text in GREEN are the parts you can change, the others you can just ignore, if you like.

Two column petpage layout

You can find an example of this template here.

Before we start, open notepad or any other text editing program. Remember to place a style tag in front of your coding otherwise it will not work. (Thank you Becca for neomailing me about this. I lost your username/neomail)
All your coding goes in between these two style tags.

and when you're done end it off with...


Now onto the coding :)

1. Main font
BODY, TABLE,TD { color: #000000; font-family: Verdana; font-size: 8.5pt; }
This part of the code will change your page font, color and size.
Pretty much all of it is self explanatory.
Some common readable fonts are Verdana, Tahoma, Arial, Georgia and Times new roman.
For a hex color code list click here.
To adjust the size of your font just type in a larger number with the one that's already there. To decrease the size just lower the number. Don't remove pt though!

2. Main background
BODY { background: url(http://i42.tinypic.com/110aw3m.gif) ; }
If you have a image background just stick the url in between the two parentheses.
If you want a solid color backgroud remove url(http://i42.tinypic.com/110aw3m.gif) and replace it with a hex color code.

3. Left and right box
#RIGHT, #LEFT { top: 75px; margin: 6px; padding: 6px; border: 1px solid #e5e4e4; }
This part will change how both of your boxes will look. The left and right one.
top: Changes how far it is from the top of the page.
margin: Changes the spacing around the box.
padding: Changes the spacing around the text in your box
border: Changes the width, style, color of the border around your box.
1px: If you want the border thicker just increase the number "1"
solid: There are quite a few other border styles including (test them out!):

• solid
• ridge
• double
• dashed
• dotted

#e5e4e4: hex color code, if you don't like that color just replace it with another.

4. The box to the left. (Main box)
#LEFT { left: 300px; width: 500px; height: auto; background: #FFFFFF; }
You can just stick this code in if you don't want it changed.
This will change how the right box will look.
left: This will adjust how your box is far from the left side of your screen. The higher the number the further.
(You don't really need to change this though unless you want it more the the left or right.)
width: This changes the width of your box.
height: This changes the height of your box. Currently it has "auto" if you want a specific height, type it in. Auto will adjust the box depending on how much content is inside.
background: This changes the background color.

5. Side bar (Right box)
#RIGHT { left: 815px; width: 200px; height: auto; background: #FFFFFF; }
Basically the same as above.

6. Headers
h1,.pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #e5e4e4; }
This will change your headers.
Again, most of it is self explanatory.
color: This changes the text color on your header.
font-size: This changes the font size.
font-weight: This changes the font weight. bold, normal, 300, 600, 900.
text-align: This aligns the text in your header. left, right, center.
margin: Changes spacing around the header.
padding: Changes spacing around the header text.
border: Changes the size, style and color. Explained here.

To add a new header use the code below:

NEW HEADER

7. Links
a:link, a, .pa, a:visited, a:active { color: #999999; text-decoration: none; }
This section changes how the links look on your page.
color: Changes the color of your links. Replace #999999 with another hex color code.
text-decoration: This part changes whether your links have any decoration. Currently it has none.
You can use:

• none
• underline
• overline
• line-through

8. Hover Links
a:hover { color: #000000; text-decoration: none; }
This changes the color and decoration of links when your mouse hovers over them.
Same as above.

It should now look similar to this..

Now for the actual content
This part should be be placed beneath your closing [/style ] tag.

Left box

You can replace "Title" with whatever title you want:)

Right box

I'm hoping that you already know what to do with this section. :)
Add your title, add link etc.

One column petpage layout

You can find an example of this template here.
Before we start, open notepad or any other text editing program. Remember to place a style tag in front of your coding otherwise it will not work. (Thank you Becca for neomailing me about this. I lost your username/neomail)
All your coding goes in between these two style tags.

and when you're done end it off with...


Now onto the coding :)

1. Main background
BODY { background: url(http://i42.tinypic.com/110aw3m.gif) ; }
This changes the image of your background. If you would like to use another type of background replace the text in bold with your background image URL.
If you would like a solid background replace the above code with:
BODY { background: #COLOR; }
Change #COLOR to a hex color code.

2. Main font
BODY, TABLE,TD { font-family: Verdana; color: #000000; font-size: 8.5pt; }
This section changes your whole page font. Replace #000000 with a hex color code, replace Verdana with a font of your choice and replace 10 with your font size (number)

3. Links
a:link, a, .pa, a:visited, a:active { color: #999999; text-decoration: none; }
This section changes how the links look on your page.
color: Changes the color of your links. Replace #999999 with another hex color code.
text-decoration: This part changes whether your links have any decoration. Currently it has none.
You can use:

• none
• underline
• overline
• line-through

4. Hover Links
a:hover { color: #000000; text-decoration: none; }
This changes the color and decoration of links when your mouse hovers over them.
Same as above.

5. Content Box
#container { width: 500px; background: #FFFFFF; border: 12px solid #e5e4e4; }
In this section you can change how your box looks.
width: This changes the width of your box.
background: This changes the background color.
border: Changes the width, style, color of the border around your box. 1px: If you want the border thicker just increase the number "12"
solid: There are quite a few other border styles including (test them out!):

• solid
• ridge
• double
• dashed
• dotted

6. Headers
h1,.pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #e5e4e4; }
This will change your headers.
color: This changes the text color on your header.
font-size: This changes the font size.
font-weight: This changes the font weight. bold, normal, 300, 600, 900.
text-align: This aligns the text in your header. left, right, center.
margin: Changes spacing around the header.
padding: Changes spacing around the header text.
border: Changes the size, style and color. Explained here.

To add a new header use the code below:

NEW HEADER

It should now look similar to this..
Now for the actual content
This part should be be placed beneath your closing [/style ] tag.