Coding User Lookups

This tutorial will feature a top and bottom banner combination, in a style I like to call the 'sandwich', lol. The reason why div-style lookups are not featured here is because they often don't look right in Firefox and different versions of the browser displays things differently.

The Beginning
Ok, first start by opening the Edit Profile page on Neopets. In the About Me box, clear everything. If you want to save something, put it into word or something and save it for later. Once you have an empty box, put in <style /> then press enter a few times and put </style />.

These are the beginning and end for your stylesheet. Without it, everything will look messed up. Everything below (apart from the text about yourself) will be put inside the style tags so keep that in mind.

The Top Banner
Lucky for you, Neopets doesn't put those annoying ads at the top of your lookup page so you don't have to worry about that. What you do need to worry about is making a top banner. Actually, a top background is more befitting in this case. I have made mine at 1000px x 300px. You can make it any size you want as long as the height exceeds 100px and the width fits most screensizes.

One thing that you must consider is the drop down navigation on Neopets. These can't be removed properly so either cover it up or make your lookup around it. In this case, you can't cover it up because you need the top part so you will need to make a top banner that accomodates for the dropdown links. Below is a template for the top banner. The red part signifies where the dropdown links will be.

It's sized at 100px x 200px and you click on it to get the actual picture to save it (right click, choose Save Picture As...). You can extend it to whatever height you want, but the red part must stay in the position it is in all the time.

A note about making your top banner - if you plan to blend it in with the rest of your page (ie. your page background), make sure that the bottom of you top banner is the color that you want for the rest of your page. This can be done quite easily if the rest of your page is white, but for every other color, you should be able to get it off your graphics program.

Once you have made your top banner, upload it. On photobucket, you may need to change your image options to a maximum size of 1024x768 before uploading. I think every other image host is fine. Get the url and insert it into the following code:

#header {background-image: url('your image url'); background-color: color; border:none; height:height;}

The background color is the color you plan to blend in with the rest of the page. If you don't plan to blend anything, just put in your body background color, or leave it as white. Height is quite important here. If you don't specify your height, it will automatically go down to 100px, and that might cut out parts of your top banner. Width, on the other hand, is not important. As long as you've catered for an average screensize of 1024x768, it's fine not to put in a width.

Note: This code goes in between the two style tags mentioned earlier.

The Bottom Banner
This is a lot easier. The height of this banner (or background) must be 200px or more. The width is whatever width you set for your top banner. It can not be less than 190px, otherwise it will not look right. Make sure you blend your bottom banner into the body background like you did for your top banner.

Once you have made your bottom banner, upload it, then insert the url into this code:

#footer {background: url('image url); background-color:color; height:height;}

Same things as the top banner and place it in between the style tags.

Body Changes
Some things that you need to change about the page before you can carry on. For starters, you need to define your basic things like font color, font size, link colors etc. You can do this using the following:

body, div, td, p {font-family:font; color:font color; font-size:size;}
body {background-color:color;}
a:link, a:visited; a:active {color:font color; font-size:size;}
a:hover {color:font color; font-size:size; text-decoration:underline/overline/strike-through;}

You can also put in scrollbar colors in the body element, but this won't show up on Firefox. Note: This goes in between your style tags.

Table Changes
The following codes will change the appearance of the tables on your page. There is no way to remove your Neopets details so you might as well display them in a fashionable way. First, the table headers. These headers are the ones that say User Info, Collections, Shop & Gallery etc. You can change the background colors of those by using:

.contentModuleHeader, .contentModuleHeaderAlt {background:color;}

Once you're satisfied with the color, you can change your table content box colors. This is usually a lighter shade of the heading color, but if you're feeling different, you can change it to any color you want.

.contentModuleContent, .contentModule {background-color:color;}

For this, you can also define a border size, border color and any other table attributes you can think of. For the basic table, I just left it as is. Note: This goes in between your style tags.

Beta Changes
Now changes to the beta codes that Neopets put in for their normal layout. Things that you don't want are the image rotations at the bottom of the page, where the Neopets bottom banner used to be. So you can eliminate that from your lookup by adding:

.footerNifty, .footer {display:none;}

Another thing that you want to change is the content part of your page. The Neopets content class makes the page white and refuses to co-operate with your body background. You can eliminate that in 2 ways:

#content {background-color:color of your body background; border:0px;}

OR

#content {display:none;}

If the latter one doesn't work for you, then use the top option. There have been difficulties with the content in the past so I'm not sure if both are functioning perfectly at the moment. Note: This goes in between your style tags.

About You
Finally, the part that goes outside of your style tags! And the most important part at that! ^^ Just to make things match, I have made a table for this text that matches the tables on the rest of the page. You don't need to make a table, you can just skip this and go straight to typing stuff about yourself, but a table looks much better.

This is the code I have used:

<table align="center" border="1" cellpadding="6" width="100%">
<tr><td class="contentModuleHeader">About Me</td></tr>
<tr><td class="contentModuleContent">

Text about yourself here

</td></tr>
</table>
<p>

The Final Product
This was the lookup I made for myself on the 5th July 2007. I'm not sure if it will still be on my Neopets profile, but I made a screenshot in case you don't get to see the actual thing in action.

I think it turned out pretty nice ^^

If you have any questions or run into any problems, don't hesitate to contact me.

Note: There is no need to credit for this lookup coding if you're using this tutorial for a personal lookup, although a link back to Neo-Reality would be nice. For redistribution (ie. displaying lookups on your site for visitors), we do require a link back for coding on either the page where the lookups are displayed or your credits page.

~Jen