Navigation

Other user lookup tutorials, finished lookup sample shown:

Step 1: The Images
Step 2: The Coding
Reference Picture

Basic Rules

Please leave some form of link/credit on your lookup.
You may use this code for premade lookups.
But again, please do not claim this code as your own once you've made a lookup. It's still against the rules.
If you're not sure about what is and is not ok with me regarding credit and use of my code, neomail me.

Introduction

This tutorial will lead you through the process of making a userlookup with the stats all in a scrollbox. Here is a preview of what the finished lookup could look like:

If any questions arise in the process, feel free to neomail me.

Step 1: The Images

First, you need an image. I went here and started with this one:

Next, copy and paste the image into your image program. Any image program works just fine. There are 3 basic steps.

1. Crop out the portion of the image you actually want to use.

2. Draw a box on your image for your stats, and then draw another smaller one for your text so your image looks something like this:

3. And now that it's fully functional, add whatever you think will make it look better. After some editing in which I added text, a border, and a few other effects, I end up with this:

I also made a background image to go with it. This is completely optional.

That's it for the images. Move on to Step 2.

Step 2: The Coding

Underneath is the basic code you will be learning.
Text in RED are things you will be changing.
Text in BLUE are my notes to you on what exactly the red things change.
The blue numbers correspond to numbers on the image of the actual lookup below the code.

#img{left:50px;top:50px;}

body{background:#000D30 url('http://img.photobucket.com/albums/v393/uber_faerie68/spacefaeriebg.gif');}

#stats{width:580px;height:300px;left:354px;top:275px;overflow:auto;}
#text{text-align:center;left:353px;top:138px;
		width:580px;height:100px;overflow:auto;}

.contentModuleHeader, .contentModuleHeaderAlt{color:#6087FF;background-color:#000D30;}

.contentModuleTable, .contentModuleContent
{border:none;background-color:#FFFFFF;}
.contentModule{background-color:#FFFFFF;border:1px solid #000D30;}

.medText, div, td{color:#000D30;font:8pt garamond;}
a:link, a:visited{color:#091E6F;text-decoration:none;font:8pt garamond;}
a:hover{color:#6087FF;font:8pt garamond;}

#usershop img{width:100px;height:100px;}
#userneopets img{width:130px;height:130px;}
#usertrophies img{width:50px;height:50px;}
</style />
<img id="img" style="position:absolute;" src="http://img.photobucket.com/albums/v393/uber_faerie68/spacefaerie.jpg">
<div id="text" style="position:absolute;">
(<a href="/myaccount.phtml">My Account</a>)
(<a href="/petcentral.phtml">Pet Central</a>)
(<a href="/explore.phtml">Explore</a>)
(<a href="/games/arcade.phtml">Games</a>)
(<a href="/neoboards/index.phtml">Boards</a>)
(<a href="/objects.phtml">Shops</a>)
(<a href="/nf.phtml">News</a>)
(<a href="~Velfi">Lookup Tutorial</a>)
<br><br>
AND THIS IS WHERE YOU WOULD PUT YOUR OWN TEXT AND OTHER CONTENT.<br>
I'd appreciate it if you left the link back in.
</div>
<div id="stats" style="position:absolute;"><table>

And now move on to...

Reference Picture

Troubleshooting

Stats still won't fit in your box even after you remove your neohome?
Try making your pet images less wide (but not less tall) with this:

Change the numbers currently shown as ## or ### to fit your lookup width.

Link Back

Les caractères, logos et noms NEOPETS et toutes les appellations qui y sont liées
sont des marques déposées de Neopets, Inc., © 1999-2009.
® denotes Reg. US Pat. & TM Office. Tous droits réservés.
Politique de Confidentialité | Astuces Sécurité | Contactez-nous
A Propos de Neopets | Plaquette de Presse
Utiliser ce site implique que tu acceptes les Termes et Conditions