Welcome to Uber's Neopets user lookup tutorial!

Note: the new coding filters do not allow certain things in style tags. For now add a space and then a slash (/) after the word style and before the end bracket:

Other user lookup tutorials, finished lookup sample shown:

Quick Links
Code explanation
Reference picture
FAQ/Rules of credit
If you're not sure about what is and is not ok with me regarding credit and use of my code, neomail me.

Basic rules:
-Leave credit somewhere in some form on the lookups and/or on the page where you have premades made using this coding.
-Do not enter the lookup spotlight using this coding.
See the FAQ link above for more info.

Alright, so you want to learn how to make your own lookup eh?
Well, hopefully this guide can get you on the right path.

It will help a lot if you already have some understanding of HTML or CSS.

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.

Just read through the code carefully.
You can even ignore the black parts, but they might help you understand.

If you still have questions after this, feel free to neomail me

Click here to see the actual sample lookup.

Ok then, let's get into it.

Here's the code for my sample lookup that you can copy, paste (into the bottom box here), and edit:

#footer, #header{display:none;}
#content{width:720px;}
#main{width:720px;background-color:#B7DE9F;border-right:1px solid #1D7039;border-left:1px solid #1D7039;}

body{background:#36971F url('http://img.photobucket.com/albums/v393/uber_faerie68/lookups/samplebg.gif');}

.contentModuleHeader, .contentModuleHeaderAlt
{color:#1D7039;background-color:#46A433;}

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

.medText, td{color:#1D7039;}
a:link, a:visited{color:#46A433;text-decoration:none;}
a:hover{color:#36971F;}

.link{text-align:center;z-index:100;padding-top:10px;padding-bottom:5px;}
.link a:hover{opacity:.60;filter:alpha(opacity=60);}
.link a, .link a:visited{margin-bottom:1px;display:block;width:120px;
color:#1D7039;background-color:#46A433;border:1px solid #1D7039;}

#userneopets img{width:130px;height:130px;}
</style />

<table border="0"><tr><td>
<div class="link"></i>
<a href="/myaccount.phtml">Account</a>
<a href="/petcentral.phtml">Central</a>
<a href="/explore.phtml">Explore</a>
<a href="/gameroom.phtml">Games</a>
<a href="/neoboards/index.phtml">Boards</a>
<a href="/objects.phtml">Shops</a>
<a href="/nf.phtml">News</a>
<a href="~Suggestion">Lookup Tutorial</a>
</div></td>

<td valign="top" style="padding:10px;">
This is where you would put any text, extra links, other images, and whatever else. I'd appreciate it if you left the link back in.</td></tr></table>

You can go to this petpage to find hex color codes to replace mine from the example.

If you are not sure where to get the image URLs from, read the FAQ.

Reference image:

And if you missed it above, here's another link to the sample lookup: Click here.

Alright then, you got all that?

If you're still a bit confused, please read the...

FAQ:

Can I use this code for premades?
Yes, you may use the coding from this tutorial to make premade lookups. Please leave credit somewhere, even if you remove the link.

If you want to change the coding a little, or use just bits and pieces of it, you're on your own to figure out how. Sorry, but I don't have time to answer all the questions about how to get the navigation by itself or whatever it is.

Do you mind if I take the link back off?
I'd prefer you didn't, but you can. Just don't claim the code as your own. Leave my username in the non-visible part of the coding (where it says coding by uberpwns. stealing is against the rules). If you see anyone stealing the code/guide and claiming it as their own please let me know! Stealing coding is AGAINST THE RULES.

And if I catch you taking credit for my coding on the boards, I will say something. Don't be defensive, please. I know my own coding -_-

Where do I find the image URL?
1. Save the image on your computer.
2. Go to an image host site like Photobucket or Imageshack and upload the image.
3. Find the "Direct URL" they give you. That's it.

So, about the backgrounds, how do I...
Put a background image in the space behind my stats?
Add #main{background:url('IMAGEURL');} inside the style tags.

Make the background NOT repeat/tile?
Add the red to this part of the code:
body{background:#36971F url('...gif') no-repeat;}

Only make the background repeat vertically?
body{background:#36971F url('...gif') repeat-y;}

Make the background fixed so it doesn't scroll with the rest of the page?
body{background:#36971F url('...gif') fixed left top;}
This can also be right bottom, left bottom, right top.
You might want to combine the no-repeat part with this one.
This will only look good if your background image is big enough to cover the whole screen.

And that should be it. That wasn't so hard, right?
Like I said before, feel free to neomail me with questions. I will try my best to answer them or I will direct you to someplace that can.

Please be specific. "it wont work!1!!" and "help!!" will get you ignored because I won't know what's wrong.

I hope my tutorial was helpful ^^

Link back:

Affies:

These are OPEN to page directories only at the moment. Just neomail me and take a banner :)
----------------------------------------

-----

-----

-----

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® 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