So you are a newbie at this, huh? That's ok. We all were at some point. For the basic lookup, I will teach you how to put a background on your lookup, and colour the text.

The first thing is, you need to decide on what you want your lookup to look like. Is it going to be blue, purple, pickle, etc. Say you pick green. Next thing to think about is what green? Just plain green? Or green clovers or green apples or green chinchillas. Just green? That's ok. Just green is awesome. Now you just need to decide one thing; what shade of green?

That image right there is called a colour chart. Pick any shade of green that you see there. Which one do you like best? 33CC66? Me too :). In order to make your background that colour, simply enter in the six letters that appear next to the box that have your colour in it, and paste it into the code below.

o0o0o Lyk, oh em gee!! You have just made your lookup have a background colour! *Laura pats you on the back* What? The text looks dull now that the background has colour? Well we can add text colour too! Now the trick to this is picking a colour that you can see over the background colour. For darker colours, white works well, or a lighter shade of your background. You can keep experimenting with the code until you get something you like that you can see. Use the same colour codes as for the background, and stick it in this code.

You can play with the sizes and fonts as well. It also works to type in, "blue" or "green", but no spaces, and its sometimes colours like, "hotpink" don't work, so you are better off just typing in the six letter code. Lookie there! You now have a nice, simple lookup and—links? Yes, what about them? Ooh, how do you colour those? Well, let's have a little lesson on links.

The basic link is always labeled a. I don't know why, but after doing HTML for so long, it makes sense. When a link has been visited, it means that you have been to that website on your computer recently. I am excessive compulsive disorder-ish, so I hate it when I click a link, and it's the only one on the page thats a separate colour, so my pages never has a visited colour. Next type is the hover on a link. Put your mouse over my links on this page. See how they change colours? That is called a hover. I love hovers. I am easily amused by something changing colours XD The last type is the active link. This means the colour that is on the link when it is clicked.

Well, now that you know that, you can colour yours with the code below! Once again, insert the correct colour codes, font, size, and decoration. There are a few types of decorations for links; underline, strikethrough, overline, and underlineoverline just to name a few. The code in the box below has the code for links without underlines. Just type in one of the above styles to change the decoration for active, hover, visited, or regular links.

There! Now you have a lookup with a background, coloured text, and links! But what if you don't want a solid colour? What if you want an image? First off, try to avoid real photographs if you can—its really hard to find a colour that writes perfectly over them. Another thing to think about when picking a background image is whether or not it can tile, which means whether or not its "seamless" or if you can tell where the background image starts and ends. But where do you find these images? You can find some great tiled images from neopets. On the main window, click on "Stuff" from the sidebar, then scroll to the bottom until you get to a link for backgrounds. Once there, clicked on "tiled."If you don't like those, you can do a Google image search for "green clover backgrounds" or whatever it is you want. Can't tell if it will tile or not? The best way is trial and error; just keep trying images until you get one that works. Once you find it, paste it's URL into the code below.

However, sometimes the tricky part is getting the URL. If you get it off of Neopet's images, the link I just provided, click on the image of the background you like. If you get it off of Google, click on the image and it should bring you to a page with Google's logo at the top, and the image's site below. Right next to the image's thumbnail (mini picture), it should say something like, "see original image." Click on that. It should bring you to a page with your background image. Copy the URL from there. But what do you do if you just find a random image? Right click the image, and select, "Open image in new window" or "Copy image URL" (the second was for Safari users only). Copy the URL and post it into the code.

Another thing to do is make your own. Open up any type of paint programme and make your background by dragging neopets images to it. To get rid of the white background on an image in photoshop, you click on the "magic wand tool" and then on the white background. Little ants will now be running around the white. Hit "delete" on your keyboard. It's all gone! Unfortunatly, there is no way to do that in paint :( I suggest just filling in the white background with a different colour. To make sure that your background tiles, just make sure that none of the images you put in there are touching the sides of the canvas. When you are done, save the image as .gif, .jpg, or .png. Png is the best quality. Once you have saved it, you have to upload it to a image hosting site. You can try photobucket.com, which requires you to sign up, but is free, or imageshack.us which is free and can hold larger images. I use Image Shack. Click browse on either of the websites, select your image, then hit upload. on image shack, use the very bottom URL thats on the page. For photobucket, use the link in the box labeled "URL". Then stick the image URL into the code! :)

Now if you look, it says "repeat" at the end. If you just want to have the image once, you can stick "no-" in front of it (make sure you include the dash!!). You can also say, "no-repeat top left" or bottom left, or top or bottom right, or even top centre (but spell it center).

Congratulations! You have made a basic lookup! Want to know how to do things like links? Check out Neopet's HTML guide:) I don't want to waste page space explaining stuff that TNT does very nicely.

Well, now that you know how to make a lookup I'll just be—hey! Let go! Alright, alright, another type, like I promised. How about one with a sidebar, topbar, background, and banner? Oh wait, you don't want me to teach you that...wow, your eyes can get very big when you beg. You do want me to teach you? "0 yes plz lauras i th|nk j00 r $0 c00!!!1!11! shift+1

.........Cut the chat speak and you have got yourself a deal

*is weirded out*

*glances behind her should and whispers to her neonip critters* Is this kid ok? Can you get me a check of Neopia's insanity wards, please? Just make sure that guest isn't on there...

Ok. This is going to be hard to explain, but I'll do my best. If you have paint, then you are out of luck, sorry. I don't have Paint (and I wouldn't use it even if I did) so I can't explain how to do it in paint. You can get a free trial of Photoshop if you look on the internet. Google it. This is being done with photoshop. However, some of this stuff can be done in paint. Just see what you can do!

First things first. You need to get a picture of the official sidebar with all the text and pictures still on it. You can find one here.

Ok. So create a new image that's 130 by 710. Put the sidebar image in there. First, make the sidebar image layer invisible by clicking on the image of an eye next to the layer. Next, think about what you want it to look like. Is it going to have a border, or no? If yes, then create either a rounded rectangle (tool shown below), or a regular one of the colour you want the border to be, and make it take up the entire canvas. Next, make another of the same shape (in a new layer!) that is smaller then the outside one. It is here that you can decide how thick you want the border.

Your sidebar should look something like that. ^ Notice how my border doesn't go all the way around. I left an area at the top that has no border. That is so that later, the topbar border and sidebar border connect. Next thing to do is add text. Click on the little eye next to the layer with the sidebar. AHH!! LAURA!!!I CLICKED THE EYE AND IT ISN'T COMING UP!! HELP ME PLZ PLZ PLZ!!1!!11
Ok then. It shouldn't come up. Its on the bottom layer. Double click on the text that says, "Layer 1" or whatever the layer with your sidebar is on. Rename it "sidebar". Do the same with the other too layers. Well, I mean, don't call them sidebar, call them "border" and "inside". That'd be silly to name them all sidebar. Now, click and drag Sidebar layer to the top (above the other two layers). Now you can see it.

Now click on the typing tool. It looks like a big capitol "T." Click right on "create a pet," and type it in yourself, with whatever font you want. Make sure that it is as big as the neopets one is. Make it whatever colour you want, but make sure that you can read it. Repeat for every link on the sidebar. You can also change it a bit. Instead of "pet central" for example, you could have "Usuki central." Once everything is typed and aligned, you can actually move it a bit. But only to the left or right, not down. Thats a no-no. You can make the sidebar layer invisible again as well.

Now, if you want, you can get some neopets images and stick 'em in there. To get rid of the white background, click on the magic wand tool (under the move tool). Click on the wand, then on the white background, then hit delete, then control+D to deselect (Apple D for macs). Put the pictures however you want. To make images smaller, hit control (or apple) and T. To add the arrows like I did, use the arrow image below, and fill it with a colour, and delete the white. To flip it the other way, click edit/transform/flip horizontal.

It should now look something like the above. We're done! Save it! Now, step two; the topbar. Open a new file that is 728(width) by 44(height). Todo the same thing as before to have a border, making sure that you have two layers (name them if you want). The next part is a bit tricky. Click on the select tool (dotted box next to the move tool). Now look at the top of the screen. There is a drop down menu that says, "Style: Normal". Change the style to fixed size, and make the width be 130 and the height be 36. Click anywhere on the canvas. A box should come out that size. Align the side of that box up with the end of your border. Once it is all aligned, hold shift and F5. A window will come up. Select "Use: Color..." then another window will come up, with a colour picker. move your mouse over the background of your topbar. An eyedropper will appear. Click on the background colour, and it will select it as the fill colour. Hit ok, then ok again on the old -blocked- That block we made should fill up. Deselect

It should look something like that. Now, in the corner, type in "neopets" to look like a real sidebar. To get the neopets font, search a font site, like dafont.com for the font "heffaklump." It's the neopet's font. At this point, you can either leave it like that, or add text/images to the rest of the top bar.

Now for step number three; A banner. Open a new file that is 62 height by 480 width. Make the border and background again. You can put whatever you want on here; I usually put a username and an image. I usually make it with rounded corners as well, but I was too lazy this time =P

Last thing to make! A background! Open another file. It can be any size, but i'd aim for around 500x500. Make sure the background is white, and simply add a picture and text. Or, make the background any colour, and in the coding part, you can make the background a colour. Once again, I'm lazy, so I used a neopets background image for this background.

Last Step! It's time to put it all together! Go back to each original file and save it as ".png" or ".gif" or ".jpg". Then upload every image to photobucket. Then, stick the image URLs into each of the appropriate spots! You can use some of the coding from before to get text and links to be a certain colour. Just replace all of the URL.png's with the URL to your image. Enjoy :)

And now you know how to make a lookup with a sidebar! Bravo! Any questions you have can be neomailed to me!

So do you LOVE the lookup that you made yourself? I'm glad! But what if you want boxes around your stats? Don't know what I mean? My good friend Sher has an example in her lookup! See what I mean? Pretty cool, huh? Well, now I'm going to tell you how to do it!

First you need to decide what colour you want the outline and inside. Pick something that matches your lookup. I'm going to use my Usuki lookup from above. Pink obviously matches. A good guide it to use the colours that you used on the sidebar. Next, make sure that you know the numbers for the colours that you picked. My border will be #7d055f and my inside will be #ff66cc. All I have to do is plug in the proper numbers!

In the code above, put the colours in the correct spaces and the font name and colour. There are a few more things I think I need to explain in that code. after you put in the colour for the border, you need to put the width of the line, and the style. The styles are single, double, dotted and dashed. The align means that text, so wether you want it in the centre or left or right it up to you! Here is a screenshot of my lookup now.

Laura! I absolutely LOVE this guide! I wish you had some way to link to your page so that I could show everyone how cool you are!

Yeah, me too. Well, scurry on.



















What? Why aren't you gone? *looks behind her* Oh, that button? Its just something I made in about a minute...but if you want to link to me and this page, copy the stuff in the box. :)

FAQ

How do I change font sizes within the page (like for headlines, taglines, etc)? I can't quite get that figured out. Thanks!


For this, you need to use HTML instead of CSS, like we were using. The code is below :)

Hi I'm making a layout but I dont know how to make a sheild can you tell me how?


Sure! In whatever image program you use, open the image below:



Now, alter the image however you want, then save it as a file that can go on the internet. Then put the URL in the HTML below. Let me remind you that you CANNOT put that you are 50 months when you are only 15. You must put the correct age. This was in a Neopian Times editorial :) You can, however, put like, "Forever".

Let me point out that the more text you have on the page, the less this shield is going to line up right. So if you find that your shield is messed up, I am going to explain how to fix it. Plus, it's more fun HTML stuff to know =3 Ok, if you look at the code, it says, "position:absolute;top:300;left:620}". the number after top is the number of pixels the top of the image is from the top of the page. The number after left is the number of pixels the left side of the image is from the left side of the page. So if you make the "top" number larger, it will move farther down the page. Make it smaller and it will move up. Make the "left" number bigger and it will move more to the right. Make it smaller, it will move to the left. Just play around with the numbers until it aligns up right :)

Can you help me put images on my lookup?


Yes I can. Putting images on a petpage is very simple. Simply put the URL of the image you want into the code below! (delete the neopets.com link and put in your own)

And that's it! Now, incase you missed the lesson before, to upload an image from your own computer, you need to find an image host site. That means a website that will give you a link for your image. I use imageshack.us for mine, as its free and fast. So go to that website, and along the bottom iit says, "allowed: jpg jpeg png gif bmp tif tiff swf " That means to make sure that your image is saved as .gif, .jpg, or any of the other file types. Also make sure that your image is smaller than 1.5 megabytes. This site is better than photobucket, as you can have larger images without it resizing them, and you don't have to make an account to use it :)

PLEASE by ALL means, use these codes on your lookup. However, if you enter in my codes with the Userlookup Award, that is stealing of my code that I made. I know what my code looks like, and I can, and will report you for code stealing. now that doesn't mean that you can't use the base code for colouring links. It means that if you use my code for a lookup with a sidebar, I will recognize it and report you. If you have any questions about what you may and may not enter, just neomail me :) Also, please don't steal my graphics. I have spent hours slaving over a hot computer typing up all of this for you. I don't want to start a wall of shame for code/graphics stealing. :)