Apologies for broken images/links, page is still under reconstruction!

Quick Links
User lookup tutorials, finished lookup sample shown:


Step 1: The Images
Step 2: The Coding
Reference Pictures
Notes on the Code

Welcome to Uber's Lookup Tutorial #3 =D
This one involves more coding than the other 2 tutorials, but less image work than Tutorial 2 (Advanced).
If this is horrifyingly confusing for you, try one of the other tutorials (links above, click images).

See the actual sample lookup here.

Step 1: The Images

For this lookup you need an image for the header.

Note: I use Photoshop CS. You do not need this program to use this tutorial.
All you need is an image that somewhat resembles my final result.
I also show the process in MS Paint, below the Photoshop screenshots.


For the header image, I started with this:


I cropped it down to a size I wanted. My image is now exactly 750 x 545 pixels.
In Photoshop, you find the size by going to Image - Image Size...
In MS Paint, you find the size by going to Image - Attributes
REMEMBER THIS, you'll need these numbers for later.
I highly recommend you do not make it much smaller than 750 pixels wide.

Anyhow, my image now looks like this:


And after a few (hopefully) artistic touches with brushes such as the one shown, I now have this:


And finally, draw a box for the navigation links (optional). My final result is this:


In MS Paint, you can do the exact same thing. Select the part you want to use and copy and paste it into a new Paint file.

Again, keep it at around 750 pixels wide. Check the size by going to Image - Attribues.

I didn't do anything fancy to this one, but you definitely can.
Draw a box for the navigation (optional). What I ended up with was this (also 750 x 545 pixels):


And that's it for the header image. Move on to...

Step 2: The Coding

Ok, here we go.

If you missed it above, see the actual sample lookup here.

Copy and paste this code into the bottom box HERE



Notes on the code

Text in RED is for you to change.
Text in BLUE explains what the red text changes.
You can ignore the black text.

Refer to the reference picture under the code to see what and where everything is. The numbers on the reference picture match the step number in the code



Reference Pictures






Notes on the Code

1. If your navigation ends up being 2 lines instead of one, add this to the end of this part of the code:
width:750px;
so that it looks like
#template_nav{margin-left:-145px;margin-top:435px;width:750px;}
You can of course change this number to fit your lookup.

And that's it. You have just made your very own lookup.
Please neomail me if you have questions related to this tutorial.

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.
Keep credit back to this page somewhere, please.
Take a link back button if you don't like the text link.
If you see anybody doing this, don't hesitate to tell me.

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