Davin213 got their homepage at Neopets.com

Davin's Petpage Tutorial

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

All hex color codes will start off with # followed with 6 numbers or letters. Example: #D87093
For a list of hex color codes to use click here or here.
A variety of Neopets related backgrounds can be found here.
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!
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

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:
<h1>NEW HEADER</h1>

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

<div style="position: absolute;" id="right"> <h1>Title</h1> ALL YOUR TEXT HERE <h1>Title</h1> ALL YOUR TEXT HERE If you want more headers just keep using <h1> & </h1> <div align="right"> Base code by <a href=/~davin213>Kachi008</a> </div> </div>
You can replace "Title" with whatever title you want:)

Right box

<div style="position: absolute;" id="left"> <h1>Title</h1> OTHER THINGS HERE </div> 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; 
	}

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:
<h1>NEW HEADER</h1>

It should now look similar to this..

All your text can go here

with all your content or whatever you would like to put in.
Same with the headers, replace

Header

with whatever you would like to put.

Adding your owner banner
Replace http://i42.tinypic.com/110aw3m.gif with your banner URL.

Additional codes

I want to remove the

NEOPETS, characters, logos, names and all related indicia

text, what is the code for that?

	.sf {
		display: none;
	}

Tips

Maybe these pages will help you make your page nicer. :)

Link back

Other pages for you to visit

Thank you for visiting

Thanks for stopping by. I hope you found this tutorial helpful in some way.
Do you have a question? Just neomail me and I'll try to help.
Any errors? Please neomail me with them!
Suggestions? They're appreciated ^^

Since 27/10/07

neopets, petpage tutorial, neopets petpage layout tutorial, petpage coding, petpage, page coding, neopets petpages, layouts, coding, code, simple petpage coding, kachi008, davin213, tutorials, fhaeline

Les caractères, logos et noms NEOPETS et toutes les appellations qui y sont liées
sont des marques déposées de Neopets, Inc., © 1999-2010.
® denotes Reg. US Pat. & TM Office. Tous droits réservés.
Politique de Confidentialité | Astuces Sécurité | Contactez-nous
A Propos de Neopets | Plaquette de Presse
Utiliser ce site implique que tu acceptes les Termes et Conditions