Welcome guest!

So you're in need of a petpage layout, eh? Well, you've come to the right place!
Using this guide, you will be able to create a 2-column petpage layout.

Rules

Do not steal my work and coding.
Meaning, do not take the entire code and say you made it. Sure, taking bits and pieces is fine. But not the ENTIRE thing without crediting back.
Oh, and keep the credits on the coding, please.

ALSO: DO NOT, I repeat, DO NOT offer to make people petpage layouts using MY coding, even if you do leave the credit on. It's kind of you to want to do that for others, but please refrain from doing so. If they need help making one, then help them. I simply can't and don't have the time to go around Neopets looking for people who have done this.

Before you get started

Before you get started, you'll need the layout template. Click here to copy the template. Change it however you wish.
You should also know where to go to edit your petpage. Why, here of course!
Your final layout will look similar to this layout.

Let's Talk Coding

YOU SHOULD HAVE SOME KNOWEDGE OF CODING BEFORE PLAYING WITH THE CODE
Above is the code to the petpage template. Everything in red, you can change. The rest, I would advise you don't touch it, unless you know a good amount about coding.

But what does it mean?

Now, I'll tell you about the red parts of the codes.

1. The first thing you can and SHOULD change is the background and background color. It's pretty straight-forward. The background will look like this:

(Drag the image into the address bar to view its actual size)

2. If your main image is saved as a .png, KEEP THIS PART OF THE CODE IN. If not, you can take it out if you want.

3. This controls the lil' box at the top of the petpage that says "Pets, games, homepages, chat..." If you want to totally get rid of it, keep this code in. If you have a counter from Boing Dragon, then you'll need to change this part of the code to "table {background:COLOR}" to make it a lil' less noticable.

4. This code controls the text that will go on the page. Change this however you wish.

5. This part of the code controls the links that go on to your page. "A" controls the links that will go into the main column. "#Navi a" controls the links in the navigation column. "A:hover, #navi a:hover" controls how the links will look when you hover over them.

6. This part controls the first header. It codes like normal text.

7. Change this url to the url of your main image url.

8. This is very straightforward. All your main content goes here.

The Code

To copy the code: Right-click inside the box, select "Select All," right-click the highlighted text, and hit "Copy." Voila.

I need Help!!

Here are some pages you can look to for CSS/HTML help if needed. Also, feel free to neomail me if you need help!

Contacting Fan

Have a question or need some help? You can reach me by Neomailing fan_iz_still_evil.

Link Back

Wish to link back to this page?

Affiliates

If you want to affiliate with this page, please neomail me asking.

Beanie's HTML Help | Ray's Graphix Site

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