Welcome!

This tutorial will teach you how to make a very simple pet lookup by giving you a base code and explaining each part of it so that you can edit it to your liking. I do not offer graphics help or make customs, so please don't ask. Also, please refrain from asking me for help with your petpage, as I have limited knowledge of this. I have friends (links are to the right under Special Gals) who offer tutorials for petpages and user lookups. Feel free to visit their pages.

Examples of lookups using this coding can be found here and here (yes, these are my own pets). You can view the original template here. If you have any questions, feel free to neomail me.

If you use this base code, do not claim it as your own. The credit link must stay on. And yes, there are ways to prove it's mine.
Rules:

1. You do not need permission to use this coding for premades and customs. However, you do need to keep the credit link to my page in every pet lookup you make. You may reword the text credit or even make your own button if you don't like the ones provided, but it must be clear that the coding was done by me and must link directly to this page.

2. If you neomail me for help, please include which pet you are attempting to make a lookup for and specifically what problems you're having. It also helps immensely if you leave your coding as it is if you're having problems (if possible) so that I can look at your coding and see what's going wrong.

3. Did I mention not to remove the credit? If you get a neomail from me asking you to put the credit on, do the right thing and put the credit back on. Arguing that "you coded it yourself" or ignoring me will only get you reported faster and you won't get a second neomail from me asking you again.
Common Problems:

1. Header/background not showing up? The most common cause of this (in association with my coding) is a simple space between "url" and the first parenthesis ( in the header code. If there is a space there and you're having problems, remove it. Very simple. ;)

2. The header image is not the right size. There are two ways to fix this. The first is to edit your image in whatever photo editing program you use (if you don't currently use one, I've heard that GIMP is a good free one) and resize it to the dimensions that are in the header code. The second suggestion is to change the width and/or height that is specified in the header code to match your image.


Note: If you use any single parts of this coding (just the background code, or just the font code) they must be inside the style tags.

Here's the code to copy and use:

You can paste it here on the "edit pet description" page.

Text in green are the areas you can change.
Text in blue are tips on what that part of the code is for.


1.body{background:#BBBBBB;background-image: url(YOUR_IMAGE_HERE.gif);}
This changes the entire page background to the color/image of your choice.

2.body, td, p{color:#000000;font-family: georgia; font-size:12px;}
a:link, a:visited, .content {color: gray; font-family: georgia; font-size: 12px;}
a:hover{color:#000000;}
This changes your font and links color, type, and size.

3.#main{background:#555555;border:1px solid #000000;width:700px;}
This changes the background and border color behind the modules.

#content{width:100%;}

4..contentModuleHeader,.contentModuleHeaderAlt,.ds {color:#FFFFFF;background:#444444;border-bottom:1px solid #000000;}
This changes the font color, background colors and borders for the module headers.

5..contentModuleTable,.contentModuleTable img {border:1px solid black; background: #DDDDDD;}
This changes the colors and borders of the content modules (the boxes that hold your info like pet, stats, description, etc). ContentModuleTable img adds the border around all the images.

.contentModule,.contentModuleContent,.cs {background:none;border:none;}

6..sidebar,#footer,#nst,.user,.nav_image,.bb{display:none;}
This removes the sidebar that shows your active pet, the footer at the bottom of the page, and the navigation.

7. #header{width:700px;height:150px;background:#FFFFFF url
(http://i23.tinypic.com/2087336.png);border:none; background-position:center;background-repeat:no-repeat;}
This is where you can change the color and add your own image for the header at the top of the page. Not good at making graphics and don't want the header to show up? Just replace the entire header code with this:
#header{display:none;}


Border style suggestions: solid,dashed,dotted,ridge
Font suggestions: arial, tahoma, georgia, century gothic
Color Hex Codes: Click here

Keeping and Altering the Navigation Bar

If you'd like to use the real navigation that appears at the top of any page instead of the simplified text links given in this template, it is important that you remove ".nav_image" from section 6(found above). You can then use the following to change the colors of the default navigation and move it around to where you need it to be. This code will not work if you have your header removed. If you've removed the header because you don't want an image and want only the navigation bar to be visible, change your entire header code to #header{width:700px;height:150px;background:none;border:none;} and change the width and height to whatever you want them to be.

1.#template_nav{margin-left:-125px;margin-top:-40px;}
This moves the entire navigation bar. Putting in something like -150 in the left margin will move the navigation more to the left. Same goes with the top margin.

2.li.nav_image{margin-left:-10px;}
Each text word (account, pet central, etc) is actually an image. Changing this number will either put more or less space between these images, making the navigation wider or slimmer.

3.ul.dropdown{background:#FFFFFF;border:1px solid #000000;}
This changes the background and border of the drop-down menu.

4..dropdown li a{color:#000000!important}
This changes the color of the links on the drop-down menu.

5..dropdown li a:hover{color:#BBBBBB!important}
This changes the hover color of the links on the drop-down menu.

Copy and Paste:
Link back to me!









My Special Gals ;)







Affiliates (CLOSED)









Other Helpful Pages







Need a Side Account?


Remember to activate it!

Current Visitors




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