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.
1. body {
background: #31302c;
}
This changes the color of your background. Remove
#31302c and replace it with your chosen hex color code.
If you would like a image background replace the above code with:
<![CDATA[
body{
background:url(BACKGROUND_IMAGE_URL_HERE);}
]]>
2. body,font,div,p,a {
color: #000000;
font-family: Trebuchet MS;
font-size:9px;
}
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)
3.a:link, a:visited, a:active,{
color: #000000;
text-decoration:none;
}
This will change the links (color), Replace
#000000 with a hex color code.
4.a:hover {
color: #31302c;
text-decoration:none;
}
This will change the links (color) when hovering over them, Replace
#31302c with a hex color code.
5.h1 {
color: #000000;
font-size: 17px;
font-weight: bold;
font-family: Trebuchet MS;
text-align:left;
border:none;
}
Your headers: just change the parts in bold. To add a new header use the code below
<![CDATA[<h1>NEW HEADER</h1>]]>
6..sf {
display:none;
}
This code removes the neopets copyright text, if you wish to leave it on, please remove this code.
7.#container {
width: 458px;
background: #FFFFFF;
border:1px solid #666666;
}
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
click here for an example shown on a petpage
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!
