I cannot count the number of times I have been asked to write a userlookup tutorial...so I finally decided to give in. Now, this is just MY way of creating a userlookup and the coding is COPYRIGHTED to me. Please credit NeopetsGuide.com for coding on your layout. You may not re-distribute without written permission from NeopetsGuide. This guide requires knowledge on html, some css and using a style sheet.
Getting Started
First things first, let's decide on what we want our layout to look like. Do we want it to be a certain theme? Choose an image from anywhere, as long as it is large enough. I am using a neopet background.
Next you should open up a graphic program and decorate it, creating two areas: one for your stats and one for your links. See my image here. Make sure that your stats box is around 600px, give or take a little is fine.
From your image, creating a repeating background. I just take the bottom couple of px's from the header image we created before. See my background here.
Upload both images.
Coding Your Lookup
First thing in coding, let's place our images. This is to place our background, which should repeat-y. Place the image url where it says "IMAGEURL". I also have placed a spot for a background color. The background color should match your image. This will be placed in our style sheet.
body { background: #000000 url(IMAGEURL)
repeat-y;}
Next we will place our header image. Place the image url where it says "IMAGEURL". This will be placed in our style sheet. Change all of the "###px" to fit your image dimensions.
#theheader { background: url(IMAGEURL); width: ###px;
height: ###px; position: absolute; top: 0px; left: 0px; }
Let's create our stats. Neopets has already made them, but it is our turn to move them to fit on our layout. Let's use this code to include all of our stats. We can just change the "###px" to move them exactly.
#stats { position: absolute; top: ###px;
left: ###px; width: ###px; }
Next, we should make it so our images of our stats will fit. We can change the size of our pets, trophies, etc.
#userneopets img { height: 100px; width: 100px; }
#usertrophies img { height: 35px; width: 35px; }
It may look a little strange so feel free to use some of these alterations to make things look a little more "normal."
#usertrophies .trophy_cell b { font-weight: normal; }
#usertrophies .medText { font-size: 0.6em; }
.medText { background: none; }
#main { background: none; border: 0px; }
.contentModule, .contentModuleTable { border: 0px; }
Links
The second part of coding is the links section. We need to create a div to fit the links. Let's use this:
#links { position: absolute; top: ###px;
left: ###px; width: ###px; }
Change the "###px" to fit the box.
Making it Pretty
A lookup looks pretty boring if you do not add a style sheet to it. You can go very basic, or more complex. I recommend adding a scrollbar and some link alterations. A tutorial on links can be found here.
In addition to adding basic style, what about Neopets style aspects? You can use this codes to change the way parts of the lookup look.
.contentModuleHeader, .contentModuleHeaderAlt
{ background: #42AED2; color: #FFFFFF; }
Add additional css to make everything you want it to be!
Putting it All Together
We have only coded the style sheet at this point. What about making it actually "appear" on the page? Let's make our header image show up.
<div id="theheader"></div>
Now that was easy. ![]()
Next on the page should be the link box. Where it says "PLACE LINKS HERE" add your links. You can also make this section have regular text.
<div id="links">PLACE LINKS HERE</div>
Finally, you can add your stats.
<div id="stats"><table></i>
Any text can be placed after this area, as well.
Other aspects/ Different Alterations
If you would like to modify coding slightly, or add additonal alterations, you can view a list of codes for lookups we have created here.
Afterword

I hope that this tutorial has helped you create your own lookup. Any questions can be placed as a comment on this page and I will try to answer them in a timely fashion. Please email me if you would like to use ANY of these codes in a lookup to re-distribute via petpage or website. Remember to place a credit on the lookup to NeopetsGuide.com. You can see the lookup I made shown to the side.
-Shalane