Learn to make a simple petpage layout for your page using this guide (:

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
+ The text in green are parts you can change.

This changes the color of your background. Remove #31302c and replace it with your chosen hex color code.

This section changes your whole page font. Replace #000000 with a hex color code, replace Trebuchet MS with a font of your choice and replace 9 with your font size (number)

This will change the links (color), Replace #000000 with a hex color code.

This will change the links (color) when hovering over them, Replace #31302c with a hex color code.

Your headers: just change the parts in bold. To add a new header use the code below
<h1>NEW HEADER</h1>

This code removes the neopets copyright text, if you wish to leave it on, please remove this code.

Edit your main table. You can adjust the width by changing the number beside it. You can change the table background color by replacing #FFFFFF to a different hex color and you can change the tables' border color by replacing #666666 with a different hex color code.
Some border styles you may want to use:
x solid
x dotted
x dashed
x ridge
x double

adding your owner banner
Replace http://i196.photobucket.com/albums/aa150/Cupkake101/other/petpagetutban2.png with your banner URL.

example

drag to address bar for full size

Coding

Good luck with your layout guest. All you have to do is copy and paste this code into one of your petpages and edit away!

<style /> body { background: #31302c; } body,font,div,.ip,a { color: #000000; font-family: Trebuchet MS; font-size:9px; } a:link, a, .pa, a:visited, a:active { color: #000000; text-decoration:none; } a:hover { color: #31302c; text-decoration:none; } h1,.pa { color: #000000; font-size: 17px; font-weight: bold; font-family: Trebuchet MS; text-align:left; border:none; } .sf { display:none; } #container { width: 458px; background: #FFFFFF; border:1px solid #666666; } .cred { font-size:8px; line-height:8px; letter-spacing:.8px; } </style /> <div align="center"> <div id="container"> <img src="http://i196.photobucket.com/albums/aa150/Cupkake101/other/petpagetutban2.png"> <h1>header 1</h1> text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, <p> text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, <p> text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, <p> <h1>header 2</h1> text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, <p> text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, <p> text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, text here, <p> <div class="credits"> Content by <a href=/userlookup.phtml?user=myusernamehere>*your username*</a> <br> Base petpage code by <a href=/~Davin213>kachi008</a> </div>

HTML/CSS guides

Want to beautify your petpage? i suggest reading these guides ^^
x http://www.neopets.com/~art
x http://www.neopets.com/~csshelp
x http://www.neopets.com/~cssish
x http://www.neopets.com/~Itefa
x http://www.neopets.com/~Kaxian
x http://www.neopets.com/~YurbleBurble_26

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc.,
BG: playground.everydayicons.jp THANKS!

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions