Navigation

Other user lookup tutorials, finished lookup sample shown:

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

Lookup preview:

Click here to see the actual sample lookup.

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.
Keep credit back to this page somewhere, please.
Take a link back button if you don't like the text link.
If you're not sure about what is and is not ok with me regarding credit and use of my code, neomail me.

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.
Upload to an online image host to get the direct image URL to use in the code.
Move on to...

Step 2: The Coding

Ok, here we go. Again, click here to see the actual sample lookup.

Copy and paste this code into the bottom box HERE

#footer, hr, #nst, .user{display:none}
body{background:#6791C9 url('http://img146.imageshack.us/img146/4193/snowfaeriebggz0.gif');}
#header{background:url('http://img146.imageshack.us/img146/2696/snowfaerietophm3.gif') no-repeat;width:750px;height:545px;border:none;}
#main{width:750px;background:#8BDEEC;border-left:3px solid #5686A3;border-right:3px solid #5686A3;}
#content{border:none;width:750px;}
#userneopets img{width:150px;height:150px;}
#template_nav{margin-left:-145px;margin-top:435px;}

.contentModuleHeader, .contentModuleHeaderAlt{color:#6791CA;background-color:#333A5F;font-weight:bold;}

.contentModuleTable, .contentModuleContent
{border:none;background-color:#FFFFFF;}
.contentModule
{background-color:#FFFFFF;border:1px solid #5686A3;width:735px;}
.contentModule img{border:1px solid #5686A3;}

.medText, td{color:#333A5F;font-size:11px;font-weight:normal;font-family:verdana;}
a:link, a:visited, a:active{color:#6791C9;text-decoration:none;font-size:11px;font-family:verdana;}
a:hover{color:#8BDEEC;}

ul.dropdown {background-color:#6791C9;border:2px solid #5686A3;}
li:hover ul.dropdown a, li.over ul.dropdown a{color:#000000;text-decoration:none;font-size:11px;font-family:verdana;}
li:hover ul.dropdown a:hover, li.over ul.dropdown a:hover{color:#8BDEEC;}
</style />

<table cellpadding="3" cellspacing="0" border="0" class="contentModule">
<tr><td class="contentModuleHeaderAlt">YOUR HEADER HERE</td></tr><tr><td class="contentModuleContent" align="center" valign="center">
This is where you would put any text, extra links, other images, and whatever else.
<br><br>
<a href="~Faskya">Uber's Lookup Tutorial</a>
</td></tr></table>

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

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.

Link Back

Affies

-----

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