Have you always wanted to be able to make an ultra-cool, super spiffy user lookup? Well, you've come to the right place!

This guide was designed just for you. Whether you have some knowledge of coding already, or you're just starting out, this guide will be fun and easy to follow.

If you're having trouble understanding this guide (or if you just have comments, questions, or feedback), please be sure to neomail me! Just click the link under the section called My Links to the right.

**Oh yeah, one more thing. I would greatly appreciate it if you would credit this guide somewhere on your lookup. You don't need to use a big button, just a text credit is fine. It would really help me out, and help spread the word about the guide. Thanks so much!

So I decided to have a section about new stuff I add to the guide. Neat, huh?

Coming soon stuff, along with other notes, will go in this box.

Make sure you check back often for more features and new sections!

Back To Top

So. Have you heard of CSS before? Well, it stands for Cascading Style Sheets, and it's the language used to code, or make, lookups.

CSS is fairly easy to understand, once you get used to it.

To start your coding, you need to add an opening tag to the very beginning of your coding. When you're done with the coding, you need a closing tag at the very end. The opening and closing tags will look like this: <style></style>/>
Now remember, you only need one openening tag and one closing tag in your entire coding. More opening or closing tags just take up precious room that you may need for something else.

---

So where do you even enter this code at? Why, here of course! xD Just scroll down to the bottom and put all your coding in that big box labeled About Me.

Back To Top

Easy enough, huh? Now I'll talk about parts of a lookup and how to remove them.

The largest and oftentimes most annoying part of a default user lookup is the header and footer. These are the big bars at the top and bottom of the page, used now, in place of the old neopets sidebar. (Remember sidebars? Ah, the good old days.)

How do you get rid of them? Use this code:
#header, #footer { display: none; } So. You will put that between your opening style tag and closing style tag. Easy.

---

I find that removing the header and footer is oftentimes the only removal code I use. But, you may want to remove the horizontal rules: the ugly lines that show up between rows of trophies. To remove those, use this code: hr { display: none; } Now let's think about this. You see what's in between the curly brackets (these: { })? It says display: none. We can combine the code we used to remove the header and footer with the code we're using to remove the horizontal rules because it says the same thing inside the brackets for both codes. Just separate the names of the pieces you're removing with commas. The result will look like this: #header, #footer, hr { display: none; } It saves some characters and neatens up your coding. Now who wouldn't want that?

---

Yay! We're almost done with removal codes! This is the last one I think you'll need: .content div a img, .content div b { display: none; } .contentModule div a img, .contentModule div b { display: inline; } That code is used to get rid of the text that says User Lookup: _________. Yes, I know. Such a long code for such a small change. xD

Back To Top

Okay, so far we've removed the header, footer, horizontal rules, and the user lookup text. Now, with the header gone we need another form of navigation. Otherwise we'll get our account frozen. We don't want that, now, do we? xD

So, if you're lazy like I often am, you can use this code. Just place it outside (meaning below) your closing style tag.
<a>account</a> | <a>central</a> | <a>explore</a> | <a>games</a> | <a>boards</a> | <a>shops</a> | <a>news</a> | <a>video</a> | <a>nc mall</a>
The above code will give you simple text navigation links to use.

The text in the middle is the only part that will actually show up on your lookup. Like the word "account". But you can change this part if you want to say something else. Like "MY account", for instance. Heh.

Personally, I think those links are kind of ugly. So how do we spice them up a bit? By adding color and pretty effects of course! Let me explain. xD

Back To Top

Note that the codes that change the color and look of your links will go back between the style tags. The reason is because this writing is not something we want to appear on our lookup.

Remember:
Whatever is between the style tags will not show up as text on your lookup.
Likewise, whatever is outside the style tags will show up.

---

So let's get going! First of all, you have to understand what code to use to make any changes to the look of your links. Below is not a code you will copy and paste into your lookup. It is just the beginning of the code that will enable you to change the color, size, etc. of your links. a:link, a:active, a:visited { } Now you notice there are three names separated by commas in the above code. The first, a:link, will change stuff about how the link itself looks without anything happening to it. The second, a:active, is how the link looks when you've clicked on it and you're going to a new page. The third, a:visited, is what the link will look like once you've already visited that certain link.

Personally, I like to keep all three of those looking the same. It looks better, and it simplifies things. If you don't want them all the same, just separate them so they all have their own set of curly brackets with stuff inside them.

---

Now, let's talk about how to actually change the look of those links! Some things you might want to change about your links are the font, color, and size. The code below will tell you how to do all that! a:link, a:active, a:visited { font: 10px tahoma; color: #00CCFF; } Okay, so if you can't tell, that code changes your font to tahoma, the size to 10, and the color to a light blue.

If you noticed, I didn't write out "light blue". Instead I put "#00CCFF". This little bit is called a hex color code. It is a number assigned to a particular color. I usually use hex codes instead of color words (like "light blue" for example) because they are generally shorter. But you may use whichever you'd like. To find a list of hex colors that you can use, just type in "hex color chart" on any search engine. And voila! Colorful! xD

---

The above code is pretty basic, and in some cases, as far in-depth as you may want to get with your links. If that's the case with you, just skip the rest of this section, and the section called advanced links and proceed to backgrounds and fonts. Or, if you want to learn how to do hover effects and that's it, then go here.

---

You're still here? Great! So let's make those links even fancier! Take a look at this code: a:link, a:active, a:visited { font: 10px tahoma; color: #00CCFF; background-color: #FFCCFF; font-weight: bold; text-transform: uppercase; text-decoration: underline; letter-spacing: 2px; } Okay, so we've added five extra lines to that code.

The first new line is called "background-color". This will give your link a background! Imagine that. :P In this case I've used a light pink hex code. You can change this to any color you want!

The second new line is called "font-weight". We wrote "font-weight: bold" to make the text appear bolded. Another option you can use instead of bold is italic.

The third new line was "text-transform". We changed this to "uppercase", and the words will come out like THIS. Two other options you can use instead of uppercase are "lowercase" and "capitalize". Lowercase will (duh!) make your words lowercased. Capitalize will Capitalize all your links, regardless of whether they were capitalized when you typed them out.

The fourth line of code says "text-decoration". To this we added an underline effect. You can also use "underline overline" which makes the link underlined and has a line on top. In addition, you can use "line-through" to make your links have a line going through the middle of the words.

The fifth and final new line of code says "letter-spacing". This will space out the letters of your words like t h i s. We've done 2px in this example, but you can do any number you like. 1, 5, 10, whatever. You can even do negative numbers!

---

The next section of this guide will teach you how to make these links pretty when you hover over them. Sweet.

Back To Top

You can do a lot of cool stuff with link hover effects, which are also known as mouse-over effects. So let's get started!

---

Remember how the bit of coding a:link changed the look of the link? Well this time, the code a:hover will change the look of the link when you put your mouse over it. So, going by what we did before, take a look at this code: a:hover { color: #00CCCC; text-transform: lowercase; text-decoration: underline overline; letter-spacing: 5px; } Okay. In the code above, we only have four lines of coding. But we had seven in our other link code! Why? Because whatever we included in the first code, but did not change in the second code will stay the same.
For instance: In the first code, we said font: 10px tahoma, and in the second we don't have any line that says font. So...The font when you hover over the links will not change.

We did change the color of the text. It is now a more greenish blue. In the second line of this code, we changed the links from being UPPERCASED to lowercased. In the third line we changed it so a line will be added to the top of our links, in additon to the bottom, when we hover over them. Finally, we changed the letter-spacing from 2 to 5 pixels (px means pixels). So now, our text will spread out even more when we mouse over it.

Simple enough? I think so. Now remember, you can keep whatever you want the same, and you can change whatever you want. Experiment and see what happens!

---

Oh, one more thing I want to cover. Skip this section if you don't care what I have to say.

See that little link at the bottom of this section, that says back to top? Hover your mouse over it. Coool, huh? The cursor turns into an arrow with a question mark! So how do you do that to your links? By using this line of code, in between the curly brackets named a:hover: cursor: help; Ooh, that was easy! You're probably wondering, "What if I don't want a stupid question mark?" Well, this should solve your problem: cursor: crosshair cursor: hand cursor: wait cursor: text cursor: move There, now you have lots of choices. I'm not going to take the time and the space to explain what they do, so try them out if you want. xD

---

Phew! As you can see, there are a lot of things you can change about your links. Congrats on making it this far in the guide, and keep it up!

Back To Top

As another reminder, this section is quite in-depth. You can read it now, come back to it after you've learned more about coding, or never read it. Your choice. xD

This section will help teach you how to make those spiffy rectangular links that all the 1337 lookup makers have on their lookups. Like the ones at the top of this page. Go look.

---

Okay, let's get down to business. The code below is the exact code I used to have as my links at the top, before I changed the layout. Yes, wasn't that nice of me? a.nav:link, a.nav:visited, a.nav:active { font: 10px verdana; font-weight: bold; color: #89d1ff; text-decoration: none; letter-spacing: 3px; text-transform: lowercase; background-color: #737373; display: block; text-align: left; margin: 4px; border-right: 10px solid #89D1FF; } Wow. Lots of coding there. It's really easy to understand though. It's pretty much like the codes that changed regular text links. This time though, instead of using the code a:link, we used the code a.nav:link. Why? Well, because we are creating a new class (more on classes later), so we need a new name for it. In this case we called it "nav". Notice how the only difference between "a:link" and "a.nav:link" is the ".nav" part.

Remember this for later, because we will need to come back to it when we actually make the links appear on our lookup!

---

Okay, now that we understand that, we can look at what's between the curly brackets. We've dealt with the first seven lines of code before, so we should understand them. If you don't, then go back to the section above and reread it.

So what's new? The last four lines of coding.

In the first new line, it says "display: block". What this does is make the links all nice and on top of each other in a neat row, like at the top of this page. Don't remove this line of coding or you'll have a big ugly mess. xD

In the second line, it says "text-align: left". I think this is pretty self explanatory. It means that the text on your links will be placed on the far left. Two other options instead of "left" are right and center.

The third line says "margin: 4px". This part tells the computer how much space above and below each link you want. The higher the number, the more space there will be, and vice versa.

The final line of coding says "border-right: 10px solid #89d1ff". This is that little blue square at the end of each link. You can change four things here: where the border is, how big it is, what style it is, and what color it is. The rest of this section until the next blue line tells you how to customize these borders.

---

I think the size and color parts are easy to understand, since we've been over them before. But let's talk about the others.

Border-right means that the border will only appear on the right side of your link. You may change this to "border- left", "border-top", or "border-bottom", to make the border appear on the left, top, or bottom, respectively. You can also have multiple borders in different places. You could have a border on the right, a border on the left, and a border on the bottom by adding another couple lines of coding, like so: border-right: 10px solid #89D1FF; border-left: 10px solid #89D1FF; border-bottom: 2px dashed #FFCCFF This now lets you have a block of color on the right, a block on the left, and a border on the bottom. You can have borders on 1, 2, 3, or even all 4 sides (and they can all be different colors and sizes!).

If you want the same color and size of border around the whole link, just say "border: _________" to avoid having three unneeded lines of coding.

Now let's talk about the word "solid".
Solid is the type of line that will appear. That's what I've used on my links on this page. But you can choose from many other options including dotted, dashed, and double. These are the most common, and it's fairly easy to understand what they do, but you can also have ridge, groove, inset, or outset border styles. Try them out and see what they do!

---

Another thing I want to talk about here is padding. Remember what I said about margin? That controlled how much room was between each link. Padding, however, controlls how much room is between the text and edges of each link.

If you wanted a lot of room there, you would type something like "padding: 10px". If you didn't want much room, you could type "padding: 2px". In the example on this page, I didn't include this line of code because it isn't necessary and I didn't want any padding. But play around with it and see what happens!

---

Now that we've learned how to make the links themselves look pretty, let's learn how to make them pretty when you hover over them. xD

Actually, this section should be pretty self-explanatory. Everything included in the first code is what you can change with the hover. The best thing is to just play around and experiment with the fonts, colors, borders, etc. and see what you can come up with. But if you're stuck, here's what the hover on my links looks like: a.nav:hover { letter-spacing: 8px; cursor: help; border-right: 0px solid #000; } Notice that these brackets are called "a.nav:hover", which is similar to the regular text links. On those we used "a:hover". With these we just add the ".nav" part. Simple, huh? xD

Then I increased the letter spacing, added a help cursor, and made the border 0px so it won't show up. Cool.

Remember that just like with regular text links, whatever was in the original link properties will not change on hover unless you type in a line to change it.

---

Okay, so we've covered how to change what these links look like. All the coding we've done so far has gone in between the style tags. Now we need to put something outside the style tags to actually make the links show up on our lookup!

Do you remember before how I told you to remember how we added .nav to the coding of these links? We will need to take this into account now. Recall that our plain text navigation links looked like this:
<a href="/myaccount.phtml">account</a>
But now, we need to add something to this coding to make these links cool and rectangular, not plain text. So...We need to do this:
<a href="/myaccount.phtml" class="nav">account</a>
Right after "/myaccount.phtml" we added class="nav". This tells the computer to use the coding from how we designed these links instead of the plain text ones. The computer knows this because we named the class with the coding "nav" so it knows right where to go. Pretty simple, eh?

Just remember to add class="nav" to all the links you want to be rectangular.

---

So there you have it. You now know how to make those uber-spiffy rectangular nav links like all those 1337 lookup makers. xD

Back To Top

Yes, I think it might've made more sense if I put this section right after the removal codes since it's such a big part of a lookup. However, I always get scared that if I don't get my nav links in quick, something bad (like getting my account frozen) will happen. xD

---

So now that we've got those links in there, let's talk about backgrounds. With the new neopets layout, you can't put backgrounds in like you used to. There is a new component, and we need to adjust for it.

The code will look like this: #main { background: none; border: none; } body { background: #FFCCFF; } You'll notice we still have the body tag with a line of coding telling what color we want, like we used to do with the old lookups. But with the new ones, they've added something called the main that we needed to get rid of.

We made the main have no background and no border. This gets rid of the ugly white thing that would show up otherwise.

Now, If you want that ugly thing to show up, you can actually make it pretty and make it have a neat border. You can change the background color and borders like we've done before. If you missed the section on borders, go here to read about them now!

---

Okay, so we've learned how to change our background to a single solid color. But what if you want an image as the background? Well, just use this code:

#main { background: none; border: none; } body { background: #FFCCFF URL('URL OF IMAGE') repeat; } Now you'll see we still have a color (#FFCCFF) for our background. This color will appear only while the background is loading. Then, in between the parentheses and the single quote things (these: ' '), I wrote URL OF IMAGE. This is where you will exchange the URL of the image you want as your background.

Next, it says repeat. This means that the background image will repeat, or tile, all over the page. You can change this to "no-repeat" which means the image will not tile itself. Or you can change it to "repeat-x" which makes it repeat horizontally across the page. Finally, "repeat-y" will make the image repeat vertically down the page.

Back To Top

Okay, well, fonts get a lot of attention on the neoboards, so let's give them lots of attention on our lookup!

This would be the basic code you'd need to change your font: body, font, td, p, .medText { font: 14px verdana; color: #FFCCFF; } This code will change the font of all the text on the page. Now, I don't really know why you need all those names separated by commas, but you do. It has to do with making the modules (all those boxes that hold your stats) and the header and footer have the same text as the rest of the page, in addition to some other reasons that don't really concern me. Nor should they concern you. xD

So in that code I just have two lines: One adjusting the font face and size, and another to change the color. Like we did with the links, you can change and manipulate pretty much anything about the font that you want. If you skipped the section, or just forgot everything you read, click here. xD

---

If you want the text outside your modules to be different than the text inside them, just use a code like this: body, font, td { font: 14px verdana; color: #FFCCFF; } p, .medText { font: 12px verdana; color: #0066FF; } Notice that in the above code I have two separate sets of those curly brackets. The first set, named "body, font, td" controlls how the text outside the modules will look. And, can you guess? The other set, named "p, .medText" controlls the font inside the modules. You can manipulate the fonts however want by adjusting the lines of coding inside the brackets, just like we've done before.

Back To Top

Remember the section about plain text links (right here xD)? Well, the first thing I did was teach you which words will enable you to change the look of your links. I'll start by doing that now, for the module headers, which are those rectangles above each of your stat boxes that say things like "User Info" and "Collections".

---

Here's what we'll start out with: .contentModuleHeader { } .contentModuleHeaderAlt { } You'll notice that there are two different sets of curly brackets here.

The first set, called .contentModuleHeader will be used to adjust the look of one header: the one called "User Info".

The other set of brackets is called .contentModuleHeaderAlt. This is what we'll use to adjust the look of the headings on all the other modules.

---

So what kinds of things can we do with the headers? Lots! Let's look at this code: .contentModuleHeader, .contentModuleHeaderAlt { font: 16px century gothic; font-weight: bold; color: #BCBCBC; text-align: center; text-transform: uppercase; letter-spacing: 5px; background-color: #0066CC; padding: 5px; border-top: 3px solid #6699CC; border-bottom: 2px dotted #99CCFF; } .contentModuleHeaderAlt { font: 12px century gothic; letter-spacing: 1px; } Yes, I know. It looks like a jumble of crazy coding. It's not, though! We have learned about everything that's in between those brackets! Yay! It's just a matter of remembering it all and putting everything together.

There is one thing sort of different about this code, though. You'll notice the first set of curly brackets is named ".contentModuleHeader, .contentModuleHeaderAlt". This means that everything in between those brackets will affect the "User Info" header and all the other headers. So in other words, everything in between the brackets will affect every header on the page. xD

But then there's that other set of curly brackets called ".contentModuleHeaderAlt". We've already given those headers some decoration, since we've edited all the headers on the page. But this extra set of brackets will allow us to change some stuff only to those headers without changing what the "User Info" header already looks like. In this case, we've changed these headers to have a smaller font with less letter spacing. Pretty! xD

---

Okay, sit tight my friends. There's one more thing I'd like to mention while we're on the subject of headers. Padding. Yes, I know, I've mentioned it before. But there's something else we can do with these headers that might come in handy. If you don't care, well then skip the rest of this section!

Good. You didn't skip it. Now when we've used padding before, it has applied to the space all around the text. But, we can make padding on just one side! Or 2 or 3 sides! How to do it? Why, put codes like these in between your curly brackets, of course: padding-left: 20px; padding-top: 10px; This can come in handy if, for example, your text is left-aligned, and you don't want the text to start so close to the edge of the header, but you don't want 20 pixels of space all around it. Like always, experiment and see what you can do!

---

Congrats on making it this far in the guide! You've learned a lot up to this point. Your lookup should be starting to look pretty spiffy by now. xD Keep it up!

Back To Top

Mmkay, so here's where it gets tricky. Actually I think it was much more difficult for me to make a guide for it than it really is. Because in this section, we have pictures! Yay.

So this section will talk all about how to make your stats boxes/tables pretty. This is one of the biggest parts of making a spiffy lookup. So hold on to your hats, kids, here we go.

---

We're going to start out with beautifying the backgrounds of your stats tables. Yay, backgrounds. First check out this code: .contentModuleContent { background-color: #CC66FF; } So how easy was that? We changed the background color of our modules.

Now, just like the full page backgrounds, you can have images as backgrounds too! You do it the exact same way. Just add "URL('URL OF IMAGE') repeat;" after your color code.

It doesn't get any simpler than that. Borders on the other hand, are a little more complex and meticulous. Let's take a look at them now.

---

Here's where we get to look at pretty pictures!

Yes, I'm aware that those borders look terrible. But this is the easiest way to learn.

So. Can you see the three different colored borders there? There's a dotted orange one, a solid blue one, and a dashed red one. Yes. There are THREE different borders you can change. Let's go through them one-by-one.

First, let's look at the dotted orange one. This, if you can tell, is the border that's the farthest outside. It can be adjusted like so: .contentModule { border: 3px dotted #FF9900; } Notice that the word that adjusts this furthest-out border is ".contentModule".

Now, let's look at the solid blue border. The following is the code needed to make adjustments to this border: .contentModuleTable { border: 5px solid #0099FF; } The word that adjusts this border (one that goes around your stats box and the header [like the other one did]) is ".contentModuleTable".

And finally, let's look at the dashed red border. It corresponds with this code: .contentModuleContent { border: 3px dashed #FF0000; } It's name is ".contentModuleContent" and it's a little special. If you look closely, you'll notice that this border goes around only your stats in the box and not the header of the module. Neat, huh? xD

---

So I guess that wasn't so hard after all. It wasn't even that hard to write the guide. ;D

Oh, and I promised you pictureS, didn't I? Yes, I know there was only one. Well that's all I ended up needing. But if you really like pictures you will enjoy this:

---

Back To Top

Phew. Long guide, huh? Glad you've made it this far. This section is a biggie. It will tell you how to move your stats around to virtually anywhere on the page. It will also tell you how to resize your stats, so that you don't have that huge, ugly, wide mass of stats boxes. Because no one likes those, do they? xD Well let's get started.

---

Now I need to warn you before we get started that this code will sort of mess up the footer. It makes it jump up to the top of the page under the header. I have yet to figure out why it does that, and how I can fix it. So for now, only use this code if you've removed the header and footer. #content { position: absolute; top: 10px; left: 50px; } So now we're dealing with something called #content. This, contrary to what I had on the guide before (sorry!), is what changes the position of your stats along with everything that you try to put in above them (like pictures, text, etc.).

You should only use this code to position your stats left and right on the page, not up and down. We'll talk about a different code for that. But going back to the coding...

---

Notice the first line of coding here. It says position: absolute. This is the coding that allows us to position something wherever we want on the page, down to the pixel. Then the next line says "top: 10px". This means that our text/pictures/stats will show up ten pixels down from the top of the page. Can you guess what the last line of coding does? It moves our stats so they are 50 pixels over from the side of the page. Neat!

NOTE: Since the #content tag will move your text and images too, I would reccomend setting "top: __px;" to 0px so that you will be able to put things in the very corner. Also, I would suggest setting the "left: __px;" to 0px as well (but you don't have to). Trust me on this one. xD

---

So we've learned how to move your stats & information. Now let's learn how to resize them! All you do is add one line of coding, included below: #content { position: absolute; top: 10px; left: 50px; width: 600px; } See what we've added? "Width: 600px". This means that all our stats boxes will take up 600 pixels, total, across on our lookup. Of course, you can adjust this number up or down, to suit your tastes.

However, it's not quite as easy as that. Those of you with four pets and a neohome, like me, will be unpleasantly surprised to find that this code will bunch up your neohome in a skinny little box, and cause your neopets to have a lot of blank space beneath them. But there is a solution to this! Okay, I admit that's not a very pretty solution, but solution it is. Haha. And I find that I use this often, with some of my narrower-graphicked lookups. (What grammar!) So here's the code: #userneopets img { height: 115px; width: 115px; } What this code does, if you can't tell, is makes the pictures of all your neopets 115 pixels wide, and 115 pixels tall. You can adjust the number 115 so it looks right on your lookup.

In addition to this code, you may need one like this, to make your trophies smaller too. #usertrophies img { height: 60px; width: 60px; } Make sure you play around with the sizes of the trophies as well.

---

Let's recap. So far in this section we've learned how to resize the width of our stats and move them left and right. Now, we're going to learn how to position just your stats up and down.

---

Below is the code we will use: #stats { position: absolute; top: 300px; left: 10px; } Now what you need to understand about this is that this will move your stats based on the corner of your #content. If you set your #content to 0px both ways, you don't need to worry about this.

But if you did, think about this: If you set your #content to 20px from the top, and now your #stats to 40px from the top, your stats are going to end up 60px from the top of the page.

Now we're going to make our stats actually appear on our lookup. To do this we will put the following outside our style tags:
<div id="stats"> <table><tr><td> <br> Make sure you put this code at the <b>very bottom</b> of <i>all</i> your coding. <hr> So there you have it. Congratulations on making it through this exhaustingly long section of the guide. xD Your lookup should be looking pretty amazing by now. In the next section, I will talk about the <b>names</b> of the different <i>modules</i> and what you can do with them. So let's get going! <p><br><a href="#top" class="nav4">Back To Top</a> </p> <h2> <a name="names"></a>module names.</h2> <div class="table"> This section is going to tell you how to make <b>module-specific</b> changes to your lookup. In other words, it will tell you how to modify <i>each</i> of your stats boxes individually. <hr> Did you notice the names of the coding in the last two boxes? They were <b>#userneopets img</b> and <b>#usertrophies img</b>. There are specific names, like these, that allow you to modify each stat box separately. The names are the following (on your lookup from left-to-right and top-to-bottom): #userinfo #usercollections #usershop #userneopets #userneohome #usertrophies Yes, I know. Pretty self-explanatory, huh? But if you notice, above we added <b>img</b> to <b>#userneopets</b>. Why? Because we wanted to modify the actual <i>images</i>, or pictures, instead of the whole stat box itself. This goes for every module on your lookup. <hr> So what else can you do with all of this? Good question. Truth is, I don't really know. Haha. Well sure, you know you can change the size of any of your modules, and/or the images inside them. <p> I know you can also have each module have a different colored font. That would look something like this: #userinfo { color: #FF0000 } #usercollections { color: #FF9922; } So the User Info module has a <b>red</b> font, and the User Collections module has an <b>orange</b> font. Neat-o. </p> <hr> You can also totally <i>remove a module</i> from your lookup. Like if the modules for your neohome and/or shop make your lookup too wide (and you don't want to shrink your pets too much) you can just remove the module by doing this: #userneohome { display: none; } That will get rid of the box your neohome goes in. Remember, though, you should probably provide a <b>link</b> to whatever you remove somewhere on your page so that people can still get there. xD <hr> <b>DISCLAIMER</b>: I do not know what TNT is allowing us to remove from our lookups at this time. I do not advise removing things without putting a link in its place. Nor do I advise removing anything really important, like your main info, neopets, etc. <p> <b>Remove modules at your own risk</b> </p> <hr> So that's about all I know how to do with modules. I don't think you can change the font faces of the modules individually, or at least not in the ordinary way. I'll continually be looking for new things to add to this section, if and when I find them out. xD <p><br><a href="#top" class="nav4">Back To Top</a> </p> </div> <h2> <a name="movingmod"></a>moving modules.</h2> <div class="table"> Haha, I <b>just</b> figured out how to do this. So...how do you move <i>individual</i> modules around on your lookup? Like this: <hr> Well...you'll probably want to do this only if you've like moved your stats as a whole around and everything. And sometimes this code doesn't really work. Wow. That sounds <b>discouraging</b>. Well anyway, check it out, try it, <i>neomail</i> me if it doesn't work. <p> So...here's the code: #usershop .contentModuleTable { position: absolute; left: 550px; top: 150px; width: 190px; height: 200px; } So yup. Just make sure you put the name of the module (learned in <a href="/~YurbleBurble_26#modules">this</a> section) in for #usershop. And make sure you leave the .contentModuleTable part. </p> <p> Now, if you forget what absolute positioning is, go <a href="/~YurbleBurble_26#positioning">here</a> for a quick refresher. Otherwise you should know what everything in between the curly brackets is. </p> <hr> And that's basically it. I think. It feels like I'm <b>missing</b> something. Well we'll get the bugs worked out when the neomails <i>complaining</i> it doesn't work flood in. xD <p><br><a href="#top" class="nav4">Back To Top</a> </p> </div> <h2> <a name="classid"></a>classes and id's.</h2> <div class="table"> Okay. There's these two things called <b>classes</b> and <b>IDs</b>. They're used a LOT in lookup-making and are important to understand. Kind of. xD <p> So let's get going! We'll start with <i>classes</i> </p> <hr> Classes are the words that have a dot in front of them, kind of like this, when we customized module borders: .contentModule { border: 3px dotted #FF9900; } Here, ".contentModule" was the name of our class. Basically all you need to remember about these is that they can be used <i>multiple times</i> on a page. <p> So like you'll have module borders in more than one place on your lookup (more than one module). Classes are commonly used for things like: font styles, tables, and other things whose properties will be used multiple times. </p> <hr> Now on to <b>IDs</b>. These will have number signs (#) in front of them, like this, for customizing individual modules: #usercollections { color: #FF9922; } So, "#usercollections" is the name of our ID. IDs will only be able to used <i>once</i>. In this case, that means we only have one User Collections module. Hopefully... (: <p> I use IDs a <b>lot</b> in lookup making. Mostly they're used for new areas I want to position on the page. Remember we used an ID when positioning and customizing our #content. </p> <hr> Yayyy for learning about classes and IDs. Just remember these two things and you'll be good: <p> A <b>class</b> has a dot, ., in front of it and is used to define something that will be used <i>multiple times</i> on a lookup. <br> An <b>ID</b> has a number sign, #, in front of it and is used when the thing will only be used <i>once</i> in your lookup. </p> <p><br><a href="#top" class="nav4">Back To Top</a> </p> </div> <h2> <a name="scrollboxes"></a>scrollboxes.</h2> <div class="table"> Now that you know about id's and classes, you can learn how to make <b>scrollboxes</b>! Scrollboxes aren't quite as cool as tables and headers, but they're nice, effective, and a little <i>simpler</i> to do. So let's go! <hr> First, we'll look at a basic scrollbox code. It will not be positioned anywhere particular on our lookup, just right in line with our text. Also, note that we will only use this specific scrollbox once on our lookup, so it will have an <b>ID</b> name. Here's the code: #scrollbox { width: 500px; height: 100px; overflow: auto; font: 14px century gothic; color: #FF0000; background-color: #FFCCFF; } First of all, we've learned about the bottom three lines of coding already. They are "font", "color", and "background-color". Easy enough, huh? You can customize pretty much <i>anything</i> with your scrollbox. Go to the <a href="/~YurbleBurble_26#advanced">advanced nav</a> section, or more specifically the <a href="/~YurbleBurble_26#borders">borders</a> parts of the guide if you forget what all you can customize. <p> So now that we got the box looking pretty, let's focus on the size of the box. The first line says "width: 500px". This is pretty self explanatory, and controls how wide your box will be. The next line says "height: 100px" and controls how tall the box will be. Like NO way. </p> <p> The third line says "overflow: auto". This is what makes your box actually have a scrollbar, instead of just stretching the box out. Neat! :P Now, if you have this line of coding, but <i>don't see</i> a scrollbar, it means that you didn't type enough and your box does not need to scroll. The solution? Type more! xD </p> <p> Now you're probably thinking "Ewww what an ugly scrollbar!" Okay, well, then you can skip the rest of this section for now and go straight <a href="/~YurbleBurble_26#scrollbars">here</a> to learn how to make them pretty. Just make sure you come back! xD </p> <hr> I'm glad you're still here. Scrollbars are overrated. :P <p> So now we need to learn how to make these things actually <b>appear</b> on our lookup. Remember that codes like these (that make things actually appear on our lookup) will go outside our style tags. <br><textarea><div id="scrollbox"> This is where you type your text. Coooool. </div>
We said "div id" because we're using an ID versus a class. Neat how that makes sense, huh? Then we put the name of what we called our ID. Remember that this needs to match what we called it in our coding above. Since we called our scrollbox "scrollboxbox" I said ="scrollbox".

After that goes all the text that you want to have appear inside your box. Then, just like with the style tags, we used a closing tag, slash div.

---

**BUT if you want your scrollbox positioned in a specific spot on your lookup, you would add three lines of coding, like so: #scrollbox { position: absolute; top: 200px; left: 50px; width: 500px; height: 100px; overflow: auto; font: 14px century gothic; color: #FF0000; background-color: #FFCCFF; } And that positions your scrollbox 200px from the top and 50px from the left. Easy.

And that will conclude the section on creating scrollboxes. Congratulations. (:

Back To Top

If you can remember back a few sections, we talked about module headers. Now we're going to talk about how to create our own headers, so we'll be able to use them in the next section.

We can make these headers look just like our module headers, or we can make them completely different. In addition, we'll be able to create as many different styles of headers as we want. Cool!

---

If you want these new headers to be just like the ones over your modules, you would just include the text h1, separated by commas from ".contentModuleHeader" and ".contentModuleHeaderAlt", like so: .contentModuleHeader, .contentModuleHeaderAlt, h1 { ALL YOUR CODING HERE } Now that's the easy way to go. All you do is add a tiny little bit to what you already have.

(Remember that if your User Info header is different from the rest, you can choose which style you want your other headers to be, and include your h1 text with that particular set of curly brackets.)

Now, like we learned how to make other things actually appear on our lookup, we need to learn how to make these headers show up too. It's very easy to do and will look like this:
<h1>TEXT ON HEADER GOES HERE</h1>
How simple! (Don't forget that the above code goes outside your style tags because it's making something actually appear on your lookup!)

---

Now what if you don't want your extra headers to be like the ones on your modules? Well that's easy too.

You would just add another set of curly brackets and name it h1, like so: h1 { font: 12px century gothic; color: #BCBCBC; text-align: right; letter-spacing: 3px; background-color: #6699CC; border-bottom: 1px solid #99CCFF; } And you would make them appear on your lookup the very same way as shown before. **Don't forget you can customize virtually anything about these headers. Experiment!

---

If you want more than one extra style of header, all you would do is add more sets of curly brackets and give them each their own name, sort of like this: h2 { THIS IS YOUR SECOND HEADER } h3 { THIS WOULD BE YOUR THIRD HEADER } So all you do is put different numbers after the 'h', like shown. Remember to take these names into account when actually putting the headers on your lookup.

Like if you wanted to have the second style of header appear somewhere on your lookup and say "header two" and have the third style of header say "header three", you would do this:
<h2>header two</h2> YOUR TYPING UNDER THE HEADER WOULD BE HERE <h3>header three</h3> YOUR TYPING UNDER THE HEADER WOULD BE HERE
Easy as pie. xD

Back To Top

So you've made a scrollbox. And you've learned how to customize cool headers. Let's kick it up a notch and create tables with headers. Ya. I know. It's pretty cool.

If you want an example of what I mean, go here and look at that little table on the right with the header that says layout. That's what we'll learn how to do. Cool, right?

---

So. Deep breath. Now we're going to learn how to create tables, which involve classes. At last! We use a class! Before that, though, we need to do this: #tablearea { position: absolute; top: 100px; left: 500px; width: 200px; } All that code does is form an area on our lookup where our table will go. This part is an ID and is called "tablearea". You can call it whatever you want. We absolute positioned it to 100px from the top and 500px from the left. We made it 200px wide, so the tables we put inside it will automatically adjust to be 200px. Cool!

---

Now that we have somewhere to put our table, we have to actually design the table. For that, we use a code like this: .table { width: auto; height: overflow; font: 12px tahoma; color: #0000FF; background-color: #99FFFF; text-align: left; padding: 2px; margin: 0px; margin-bottom: 20px; border-top: 2px solid #9933FF; border-bottom: 4px solid #663399; } Okay. Long code. But really, it's pretty simple to understand. First, remember that this is a class and is called "table".

The FIRST line says "width: auto". This means that our table coding does not have a fixed width. Like I explained before, when we put the code inside our "tablearea" it will automatically adjust.

The SECOND line is "height: overflow". This is what will keep our table from scrolling like our scrollboxes did. The table will just keep getting longer the more you type. Cool!

The next FOUR lines, and the bottom TWO are ones that you can customize to your liking. We've already learned what they do and how to use them.

But the lines that say "margin: 0px" and "margin-bottom: 20px" are important. The first line tells the computer that you don't want a gap around your table, like between your table and your header. I'd leave this line alone. The "margin- bottom" line says how much space you want at the bottom of your table, before the next one starts. Adjust this to your liking.

And there you have it! We've customized a table. Now we just need to make it appear on our lookup!

---

Remember that the following codes are making something appear on our lookup, so they will go outside the style tags:
<div id="tablearea"> <h1>header name</h1> <div class="table"> This is where you would type your text for the first table. </div> <h1>second header name</h1> <div class="table"> This is where you would type your text for the second table. </div> </div>
Ya that's a big code. Pretty easy to understand though. Keep in mind that in order for this to work, you would have had to customize a header. If you haven't done that, go here first.

Okay. So first, we opened our ID by saying div id="tablearea" (and we closed it with slash div at the bottom).

Then we put a header in, like we learned before. Next we opened our class by saying div class="table" (and closed it after our text). Remember that this is the actual part that makes the table. All our text follows this.

Then I just put in another table section with a header, so you can get the idea. You can add as many or few tables as you want.

---

And we're done! Now that wasn't so hard, was it? This technique is great for really customizing lookups. So congrats on learning how! xD

Back To Top

This is another big part of a lookup, but I had to place it this far down in the guide, becuase up until now you wouldn't understand how to do it.

But now that you're just that much smarter, let's take a look at how to insert and position images. xD

---

Now, if you just wanted to put an image in wherever you're typing, you would only need to include this (outside your style tags):
<img src="-blocked-">
NOTE: Ignore the .png at the end of that. Just put the URL of your image in between the quotes. I had to format it like that so this page would get through the filters, haha.

---

Now if you wanted to be able to position that image somewhere else on your lookup, and not right in line with your text, you would need to add something else, like this: #image { position: absolute; top: 10px; left: 50px; } Yes. We would need to create a new id for the image. Name it whatever you'd like (I named mine "image"), and be sure to experiment with the positioning.

Then, like with tables, we would need to add something like this outside our style tags:
<div id="image"> <img src="-blocked-"> </div>
So that was pretty easy, was it not?

If you have more than one image you want to position on your lookup, you would need to create more id's. Make sure that each image has a different name (like "image" and "image2"), because otherwise it won't work.

---

Now let's talk about turning images into links. Remember our text links look like this:
<a href="/">text that will show up</a>
Well now, instead of text showing up, we want an image to appear. So instead of plain text, we will insert an image code, like so:
<a href="/"><img src="-blocked-"></a>
Easy enough. xD

---

Well you made it through another section of this guide. Yayyyy.

Back To Top

Now, I have to tell you, I don't usually customize my scrollbars anymore. I used to think they were the coolest part of a lookup, but after switching to firefox, I've realized that they're not. xD Because in firefox, if you didn't know, decorations to scrollbars won't show up at all.

But that doesn't mean I think you shouldn't customize your scrollbars. They will show up on internet explorer, of course, and can really add something to your layout.

---

The easiest way to teach this is with a picture. Yayyy. xD So check out this:

And look at this coding: body { scrollbar-face-color: #FFFFFF; scrollbar-track-color: #CCCCCC; scrollbar-arrow-color: #000000; scrollbar-3dlight-color: #003366; scrollbar-highlight-color: #006699; scrollbar-shadow-color: #009999; scrollbar-darkshadow-color: #006666; } So. We've got a picture and some coding. First notice that the name that changes our scrollbars is body. If you have changed the background color on the page already, you can just put this coding in between the body tag we already created.

Now I'll talk about which lines of coding will change which parts of the scrollbar.

We're going to go top-to-bottom down our coding. Each line has "scrollbar-" at the beginning, and "-color" at the end. But I'm just going to call them whatever is inbetween those parts.

---

So first we have face. This is the main part of the scrollbar, shown in white on the picture.

Next is track. This is the light gray part on the picture (it's sort of the "background").

Then we have arrow. On the picture, the arrow color is black.

The fourth line is 3dlight. It is the dark blue part of the border, on the leftmost side.

Next is highlight. This is the lighter blue on the picture, further towards the middle.

Sixth we have shadow. This is the border on the other side, but closest to the middle. It is the lighter green.

Finally we have darkshadow. It is the furthest right part of the border and is dark green.

---

Phew! That was exhausting. Hope you understood all that. D: If you are confused, or you just don't want to take the time to understand all that, you can just experiment with the different lines of coding, putting in different colors to see what happens. xD

---

So that concludes the sections on scrollbars! You should now have a color-coordinated, super spiffy, amazing scrollbar.

Back To Top

Have you realized that on this guide I have been bolding, italicizing, and underlining text? Well I don't know where you've been if you haven't noticed that...

Anyway. Do you wish you knew how to do that on your lookup? Well this section will teach you how! xD

---

First, let's talk about bold text. When you customize this type of font, it will change the words in your User Info module, such as "Name", "Gender", and "Country", in addition to whatever you yourself make bold.

It will also (and this is annoying) make your links this same font. If you want to learn how to make your links be different than this font, see this section.

So how do we change this text anyway? Why, like this: b { font: 12px verdana; font-weight:bold; color: #006633; background-color: #669966; text-transform: uppercase; letter-spacing: 1px; } So basically, you just design another font and name the curly brackets "b". Easy!

Now to make something be bolded on your lookup, you would just enclose it in simple tags, like so:
<b>This text will be bold.</b>
It doesn't get much simpler. xD

---

Oh yeah. Sometimes, and I don't know why, enclosing text in "b" tags doesn't always work. Sometimes it makes your text disappear. If this is happening to you, replace both b's with the word strong instead.

---

Now we'll talk about italic and underline fonts at the same time. They're very similar, and unlike bold text, these codes won't automatically change any pre-existing text.

In the code below, we designed our italic font first and our underline font second. i { font: 11px arial; font-weight: normal; font-style: italic; color: #FF9900; } u { font: 14px verdana; font-weight: normal; letter-spacing: 2px; color: #FF3300; } So we call our italic font "i" and our underline font "u". Makes sense.

And to make some of our text these styles, we'll use the same method as with bold text:
<i>This text will be italic.</i> This text will be underlined.
So in addition to your regular font, you now have four different fonts to use. Neat.

Back To Top

Okay, now this is where the guide gets tricky. Keep that in mind when deciding if you want to read this section. xD

This is where you'll learn how to make the bold text in your modules (like the labels for all your information) be different from the links in your modules. If you don't care that they're the same, then ignore this section.

---

I have to warn you, that for some reason with the codes I'm about to show you, the hover effects on the links don't work exactly right in Internet Explorer. But they will work in Firefox. Just warning you.

So what's the code?! This: b { font: 10px verdana; color: #339933; text-transform: uppercase; font-weight: bold; } a, a b, a:link, a:visited { font: 9px verdana; font-weight: bold; color: #00CC00; text-transform: uppercase; letter-spacing: 1px; background-color: #CCFFFF; } a b:hover, a:hover { color: #339933; text-transform: lowercase; letter-spacing: 2px; cursor: help; background-color: none; border-bottom: 1px dashed #00CC00; } Now...if you've been following this guide section-by-section, you will already have customized everything that's in that code (bold text, links, link hovers). That's fine. This code will make it so those codes still actually work. All you need to do is change the names of the curly brackets to be what they say in this code.

So you would change "a:link, a:active, a:visited" to "a, a b, a:link, a:visited", and "a:hover" to "a b:hover, a:hover". And you wouldn't need to change "b" at all.

---

Hmmm. So that wasn't so hard after all, was it? xD

Back To Top

Opacity. Cool thing. What is it? Well, it's how opaque or transparent something is. Neat! So let's learn how to change the opacity of things on our lookup.

---

So...let's say you want to make the images of your neopets a little more transparent. How do you do it? Like this: #userneopets img { filter: alpha(opacity="70"); opacity: .70; } So the name of our curly brackets was #userneopets img because we're changing the images in the user neopets module. Simple enough.

Then the first line is what will make our neopets be a little less opaque when viewed in internet explorer. The second line is needed so that the images will look the same in firefox.

So if you want to change the opacity from 70%, like in the example above, make sure you change both 70s to a different number. The number can be anything from 0 (invisible) to 100 (normal-looking).

Here's a screenie of 70%, 50%, and 30% opacity, respectively:

Cool, eh?

---

You can also change the opacity of a whole module, and not just the images inside it. You would just omit the img part after the name of the module you're changing.

In fact, pretty much anything at all on a lookup, like images you insert yourself, can have its opacity changed. All you'll need to do is change the name of the curly brackets.

---

Yayyy. You now know all about opacity! Congratulations. xD

Back To Top

NOTE! I gave my pet away so I don't have an a rollover example page up right now.

Mmkay so go check out my unbuyable restock page here. Back? Good. Wasn't that cool how when you roll your mouse over an image, a different picture (the name of the item) showed up instead? Well, in this section, you'll learn how to do that yourself. Neattttt.

---

Okay so to do this, you're going to need four basic parts: three that go in between the style tags, and one that goes outside. Before we get to coding it though, we need to make our image.

So first, look at this image. It's an example from my unbuyable page:

Notice how, on the left, you see what appears before you hover over the image. Then, on the right, is what happens when you mouse over it.

When you make your image (in photoshop, paint shop pro, paint, whatever), make sure you do it like that: pre-rollover on left, post-rollover on right. Technically you don't have to do this, although it'll make things easier for our purposes. xD

---

Once you've got that, put this code in: #rolly a { display: block; height: 80px; width: 80px; } Let's go line-by-line. The first line says "display: block". We used this line when creating advanced nav links. We use it here just so...umm...everything looks right. xD

The next two lines define the width and height of our image. I have 80x80 in this example. But did you notice that the example image was definitely not a square? Well, it is a square when you only look at half of it: either the pre-hover or post-hover half. So the dimensions here are the dimensions not of the image we created, but of how big we're going to want our image to be when it's displayed on our page.

So, these dimensions control how much of our image will show up. Kind of like this:

---

So remember how I said there were four parts to image rollovers? Well, that was the first. o_o Haha. Okay so here's the second:

This is what will make your image actually hover to show the other half of the image: #rolly a:hover { background-position: top right; } There's only one line of coding inside our curly brackets this time, and it's fairly easy to understand. We are telling the computer which part of the image we want displayed on hover. In this case, we want 80 by 80 pixels of image to be displayed, starting from the top right corner.

Kind of like this:

---

Mmkay, now on to step three. This is the last part of coding that will go in between our style tags. And here it is: .a { background: URL(URL OF IMAGE HERE); } We called this set of curly brackets ".a". Notice that this is a class, not an ID. Then, all we did here is put in the URL of our image that we created.

Now, if you want more than one image hover on your page, this is the first step where you will change something (the first two parts of code will always stay the same). What you would change would be the .a part. You would logically change this to .b, right? xD And if you had more, you would use .c, .d, .e, etc.

Here's an example of a .b and a .c: .b { background: URL(URL OF SECOND IMAGE HERE); } .c { background: URL(URL OF THIRD IMAGE HERE); } Neat. Now we have completely coded everything inside the style tags for three image hovers.

---

Now for the outside-of-the-style-tags part. xD

Each image hover will use a code like this:
<div id="rolly"> <a href="/" class="a"> </a> </div>
Mmkay. So remember from the first step, we used the name "#rolly a", and for the hover (in the second step) we used "#rolly a:hover"? Well that's where the word rolly comes into play. We say div id="rolly" (because the # means ID...cool, huh?).

Now is where that letter will come into play. We put a link code in just like for any other link (NOTE: image hovers have to be links in order to work in Internet Explorer), but this time we say class="a" at the end because of the third part of coding we did, where we called the curly brackets ".a" (it's a class, so we used the . and said class=)!

So if you were to code the b and the c like we did above, you would just paste this section of code twice more and change the "a" to a "b" in one and to a "c" in the other.

Finally, we close our link code and our div and we're done!

---

Congratulations! Now you know how to make image rollovers! This was a more difficult section, so if you figured it out, you should be pretty proud. (:

Back To Top

Okay. So this section really needed to be added, because people were always asking me how to do this. So. This section will tell you how to make a link that goes to a specific spot on the same page. Like the links at the top of this page, that link to the different sections of this guide.

Let's get going! This section might be a little complicated, but hang in there and neomail me if you're still confused.

---

Alright. First thing's first. (That phrase always confused me. Does it mean that the first things are first, or the first thing is first? Haha. Ya.) Anyway. First you'll need to figure out where on your page you want the link to go to. Now, I only use these on petpages, but if you want them on your lookup (it is a lookup guide, after all!) they should work fine.

So. Once you decided where you want the link to go, you'll need to surround one of the words there (like...the first word at the top of the section you're linking to) with a special tag. It looks like this:
<a name="GOHERE">word that is surrounded</a>
Okay. Got your word surrounded. You can type whatever you want instead of GOHERE, as long as you remember what you typed. Now that was the hard part. On to the actual link itself. It will look something like this:
<a href="#GOHERE">text on the link</a>
So, all you do here is add a number sign, #, before whatever you called "GOHERE". Make sure to replace "text on the link" with whatever you want your link to say.

---

And you're done! Good job. Now you have cool links that go to different parts of the same page. Woohoo!

Back To Top

Alright, so Faru (ghosts_n_ghouls) gave me the great idea of having a FAQ section. So if you're having problems with something, now you can check here before neomailing me! Haha, yay. JK. Umm so yup. Here's the questions!

---

Q: Can you help me code my guild, shop, gallery, etc?
A: Ummm the short answer is no. Neomail me if you want a long rant - uh I mean explanation - of why not. xD

Q: Can this coding be used for petpages?
A: The easy answer is yes. Obviously you won't use codes for things like the header and footer, modules, or module headers. Also, there's no such thing as a #content div on petpages. Pretty much other than that, anything used for lookups can be applied to petpages.

Q: Why is all my coding just showing up as text on my lookup?!
A: Most likely, it's because you either forgot style tags altogether or you didn't close your tag properly.

Q: Why aren't my block links (like in the advanced nav section) showing up as block links? They're just regular text links.
A: You probably forgot to add class="nav to the end of your "a href=" links. See here if you're confused.

Q: Can I get those rectangular links to go side by side, not on top of each other?
A: Yup! Change "display: block;" to "display: inline;". Then, if it doesn't look right, add "width: __px;" and "height: __px" to the code (filling in the number of pixels).

Q: Words like "display" and "margin" aren't allowed in neopets codes anymore! What do I do?
A: There are "new" style tags you need to use. Re-read the Basics section, here.

more questions coming soon

Back To Top

Hey, this is a collection of all the wonderful things you guys have said about my guide. This all means a lot to me, and like I've said before, none of this would have been possible without your support. Thanks!

Drag each image to your address bar to see the full-size image. I didn't want to mess up my pretty tables you know. xD

---

Back To Top

I don't know what's going to go here. Know what I'm missing? Neomail me.

Back To Top