Title: Making a Userlookup
Program(S): Any graphics program
Description: This tutorial will teach you how to design and code a full page/blog userlookup
Written by: © Nicolette


Right when you learned how to make a pwnsome userlookup, Neopets beta came along xP! Well I'll teach you how to make a fullpage userlookup like this, and it's just as easy as before. You can make a userlookup with any graphics program.


First you gotta open up your graphics program, then create a new file and make the width 1196 pixels and the height 755 pixels. To do this in Paint, go to Image >> Attributes and set the correct size. Now you have to find a background image for your userlookup. I suggest going to the neopets backgrounds and downloading the biggest size, but if you can find a game that goes almost fullscreen, you can take a screenshot and crop instead. Paste the background image into your program. You can do anything you want with your image now :D.


It is best if you make the right side and the bottom part of the file a solid color, this will make your userlookup look A LOT better. The best choice would to either get a background image that already has a solid color on the right side and bottom part of it or blur both sides into a solid color. Now create a somewhat small box so the user using this userlookup (lol) can type a little bit about them. You can do anything with this box, and add text as well =D.


Now it's time to make a bigger, longer box for all the user's status. You can do anything to this box, and again add text. You can now add any extra cool stuff to your userlookup, then save. PNG is best ;D. Next upload this userlookup to your image host, and make sure your host doesn't shrink the image since this is a pretty big (in size) file. Now we have to code!


To start off your code, we have to change all the properties:

You do not have to do anything with this code until I tell you to later xP. And now we have to do the rest including the banner URL:

First, you have to replace URL_HERE with your userlookup's URL of course ;D. Then you can press "Change your Details" and look at your userlookup. Most likely, all the boxes will be all jumbled. Go back to where you can change your userlookup. I want you to look at this part of the code (the number symbol is to the left of "stats", I just didn't show it here because it would mess with this page):
stats{overflow:auto; position:absolute; top:500px; left:266px; height:113px; width:891px; color: #000000;}
...If the stats are too far left, make the left number higher. If the stats are too far right, do the opposite. If the stats are too low, make the top number lower, and if it's too high, make the top number higher. If the stats are too fat, lower the width, and vise versa. If the stats are too tall, lower the height number and vise versa. Chances are when you update your changes, the stats won't be in the exact place you want it to be still, and you'll have to keep altering the code before it's right. Be patient =D. Now we have to alter the "About" box's placement and size. Here's the part of the code you're going to alter:
<div style="overflow:auto; position:absolute; top:143px; left:35px; height:130px; width:241px;">
Same as the stats, if the info text is too far left, make the left number higher and vise versa. If the text is too low, make the top number lower and vise versa. If the text box stretches too far, make the width number lower and vise versa. If the text box is too tall, make the height number lower and vise versa. Keep altering the code until you get what you want ;D.


And now you're done! If you have any questions, mail me or post in the comments.

~Nicolette