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!):

#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:

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

Title

OTHER THINGS HERE
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:

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!):

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.

header

All your text can go here.

Content by guest

Base code by Davin213

I'm hoping that you already know what to do with this section. :)
For this section just replace 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.

Please mail all petpage tutorial related (http://www.neopets.com/~davin213) neomail to kachii



Since 27/10/07

http://www.neopets.com/ ,neopets, petpage tutorial, neopets petpage layout tutorial, petpage coding, petpage, page coding, neopets petpages, layouts, coding, code, simple petpage coding, kachi008, davin213, tutorials, fhaeline, http://www.neopets.com/~fhaeline, http://www.neopets.com/~davin213




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® 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