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.

NOTE: Add this INSIDE your style tags:




NOTE: Due to recent TNT coding filter changes, the code above has been fixed but no longer matches the reference images below. While I work on fixing that, please neomail me in the meantime if you are confused.



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:
#userneopets img{position:relative;top:0px;left:-##px} #userneopets a{overflow:hidden;display:block;height:150px;width:###px;}
Change the numbers currently shown as ## or ### to fit your lookup width.

Link Back








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