Index

About Deathwinks

My Lookup Code

-invalid_words- The Base Code

Understanding the Codes

Basics of HTML and CSS

More Nifty Codes

Making Your Lookup

Information About Web-Browsers

Viewing a Page Source, Classes, and how codes change from UL to Gallery to Shop

Examples of Nicely Executed Lookups

Good Lookup Features

Things That Aren't so Good in Lookups

Pet Lookups

Awards

Links to Other Petpages

Link to This Page

This page was started on December 31, 2004.

I would like to thank silverstareagle, mileena_z, because without their help, this page would be useless and incomplete, and many other members of the NeoColour's forum. Thank you to everyone who let me link to their beautiful lookups as well. ^_^


If you make a lookup with the help of this page, all I ask is that you link to it somewhere, on a petpage, the lookup itself, anywhere, and you only need to do it once. But if you really like this page, you'll refer to it on every possible occasion. ^_~


The mission of this petpage is to make it easy to understand enough CSS to be able to code your own lookup, and have it look great in ALL browsers, not just Internet Explorer. As a devout Firefox user, I am constantly annoyed at lookups that dont work in anything but IE and it is my hope I can someday change that.


Need a hexadecimal color chart? Copy and paste this in your browser:
http://www.hypersolutions.org/
pages/rgbhex.html
If it doesnt work, see if there is a space in the middle to delete.


If you have suggestions for this page, please neomail me! I wont bite as long as you are constructive and helpful. Also, if you find any part of these codes don't work, tell me! ^_^





Counter from boingdragon.com. Started 1-16-04.

User Links

My Lookup

Deathwinks's Lookup

All Pets

FAQ

Welcome!

These codes may not be compatible with the new codes filters that are currently under Premium betatesting. I'm working on it.

Have you ever gone to a lookup and been awed by how it looks? This page will tell you how to make your very own clean simple lookup.



I have 16 refferals to premium waiting to be used. Any takers? You must have a credit card to sign up, but feel free to just try the trial, don't be pressured to stay.

This page is pretty much always under construction. I don't think I'll ever finish adding thigns to it, and will always be grateful for more ideas on how to make your lookup look great.

If you want a certain code, neomail me. I will try to find it, but I will only add codes that work in all browsers, remember that.

If you want to know why I think I have the right to tell you how to make your userlookup, well, I was the sixth person to win the User Lookup Spotlight. Not too shabby, eh? Voila!

Please keep in mind that if the following codes don't work in all browsers, it is probably not that much of a big deal and I will mention it. Please dont expect me to add 'cool' codes that are IE only.

As stated above, this is for SIMPLE lookups. I'll show you how to do the basic things to make your lookup look nice. This guide will not include every code imaginable, but I will try to include most of the popular codes.

Since I get asked this a lot, if you want to make a sidebar that works, it is under More Nifty Codes. Take a look at other codes there too.

Notes: Please read

Watch this space for tips on fixing your lookup if Neopet's changes the allowed codes.

It seems that if you use a lowercase URL, it will not work. Replace all of the "url"s in your lookup with "URL" if you have a url, it will give you some error. Quite annoying, but easily resolved with Notepad's "Replace".

PLEASE! Do not use the font Terminal in your lookup, NeoHTML, Petpages, any where! This font does not work in anything but IE unless the user has it specifically installed on the computer. Please try to find an alternate font, I see this font used way too much. :(


About Deathwinks

Before I go on, I would like to talk a little about Deathwinks. He is kind enough to let me host this page here, so I would like to dedicate a small part of it to telling about him.

Deathwinks was my first pet. He started out life as a blue eyrie, a form I would love to return him to one day. He was like that for quite a while, until one day I began zapping him under the lab ray. I don't have an exact record of what he did as a lab rat, I just know that when he turned into a koi, then starry, I decided to keep him like that because koi day was coming up and I wanted the free training. I planned on zapping him after that, but then TNT came out with the marvelous koi revamp. While the starry koi was among the very last to be revamped, it turned out nice enough that I didnt immediatly zap him again. Then I painted and morphed him back into a blue eyrie. He is very glad to be able to fly again. ^^

Deathwinks has very high ideals. He is a bit high strung, like many eyries. However, he often roots for the underdog, and hates those who have disregard for rules. He is an all around good guy and I love him very much.

Now where was I? Right the lookups.




My lookup code

This is the base code for my lookups. It is quite simple, merely making the text a small font, putting the background in the corner, adding teal tables around my stats, and making bold words also teal. In Internet Explorer, it also makes the images slightly transparent, so you can see the background partially through them and adds a simplistic scrollbar. I would appretiate you not copying this code outright, but I'll show you how to customize it in a bit.




-invalid_words- The base code

This is the code I will show you how to edit and customize to make your own dream lookup.





Understanding the Codes

To start every lookup, you must specify you are using CSS coding rather than HTML, -blocked-, or any other coding method. To do this, put this code at the start of your lookup:



To make a scroll bar, you use this code:

Replace each "color" at the end with a color name or #rrggbb code.

Keep in mind that colored scrollbars work only in Internet Explorer and in Opera if enabled. They will appear as the default in other browsers.



In Internet Explorer, you can make images partially transparent. This gives a nice effect so you can see the background partially through the image. To use this enter this somewhere in the CSS coding.

Replace "60" with a number from 100 to 0, with 0 being completely transparent, and 100 being completly opaque.



There are several options you can choose from when it comes to your background. For a basic tiled background, use this code:

To make your background tiled but so it doesnt scroll, use this code:

To make your background a single untiled image in the corner of your lookup, use this code:

You can change the above code so that the background image can be used anywhere. Just change "right bottom" to any of these: left, right, top right, top left, and bottom left. The background image is not affected by the image transparency code.



The following code does several things. First, it establishes the font color in the body of the lookup (it will be black otherwise). Then it specifies the link color (In most browsers, links with be blue if you dont override that), specifies the color of links you have visited, specifies the color of the link as you hover over it (and adds an underline when you do). When customizing, you can change the colors, the font used, the font size, and add some text decoration. Replace the lowercase "color" with the hexidecimal code or color name you want to use.



This code allows you to make everything bolded in a lookup a different color. Theoretically, you can also change the size and font used as well. Replace the lowercase "color" with the hexidecimal code or color name you want to use.



In order to put a table around your statistics, use this code:

I would reccemend leaving the width alone, but you can edit the border size and color.



This little code is a nice one. Between your neopets, trophies, and neomail buttons, there are horizontal rules. These rules are a standard grey that can clash with your lookup. This little nifty code eliminates those rules, as they have no practical purpose.



Thats almost all of it. All thats left of that code is the end point of the CSS tag, and a seemingly broken italic tag. The end of the italic tag () merely makes it so the text you enter about yourself isnt italic. I use it because the italics of the small font I use are hard to read.



Thats it! That is all there is to the code! It isnt nearly as complicated as it may seem. All you need to do to make your own custom lookup is change the colors, choose a background, and then enter your text!
More Coming Soon!



Basics of HTML and CSS

So now you know how to create your very own user lookup, and you have a basic understanding of the what each code does. But how does it all work? How does is this text transferred to your screen? What is HTML? What is CSS? What is the meaning of life?

HTML stands for Hyper Text Markup Language. These codes, enclosed in greater-than and less-than signs, tell the computers browser how to render the text, tables, and other formatting elements.

CSS stands for Cascading Style Sheets. These codes are added within and and affect the entire page. Style sheets define the properties of any tag. You can use them to change the font color, size, and font of bolded words, or nearly anything else. Style sheets may not be completely supported in all browsers, like Firefox doesn't support colored scrollbars, but most CSS is, and as long as you do it correctly using proper CSS codes, it should appear simuarly in all web browsers that support style sheets.

The nice part about style sheets is that it affects all the tags in the page. This way, you don't have to specify that you want the bolded text to be rendered as dark red each time you add a bold tag. You can merely add it to the top of the page that thats what you want bolded text to look like. Simuarly, if you decide that you don't want to use dark red text any more, you want to use dark green, you just have to change the one tag at the top of the page rather than finding each individual bold tag. This makes coding web pages much easier. Many HTML tags have actually been depreciated in favor of using style sheet controls instead.

CSS is perfect for designing user lookups, because we don't have access to the entire HTML code. We can only insert certain text under 4000 characters. Using only HTML, we really could only control the text we entered, and none of the standered parts of the Neopets user lookup. However, because we have style sheets, we can suddenly control nearly every aspect of the page! We could, at least, but Neopets has disabled some codes. We still have enough codes to create rather nice user lookups.

Still a little confused on what exactly CSS is? Lets use the example of the bolded text color.

That is the base code. Change the second "color" to a color name or hexidecimal code, and enter this code in any webpage, and it will override the font color and make all bolded text the color you specified. This is a style sheet. It is an override of all the other HTML coding of the page, assuming it is supported by the browser and allowed on the web page (For example, it won't work if you randomly insert it in a message on the Neoboards or most forums). But we can do more with that code than the font color.

There. Now enter that code in your web page and all bolded fonts will be teal in color, size 6 verdana font, with wider than average font spacing and will also be striked through. Lets say I wanted to do that without using CSS, using only good ol' HTML. On a Neopets user lookup, those effects would be impossible to apply to most parts of the lookup. You would only be able to add those effects to the text you enter about yourself. The bolded parts of your stats would be impossible to change. For the bolded text about yourself however, or on a normal webpage, in order to do that same effect, for every bold tag you would have to have this:

You would have to repeat that code for every bolded part you want changed. Imagine you had a webpage with several sections and the titles of each section are bolded. So for every title, you would have to have that code. Then, you decide you didnt really like the teal color, so you want to change it. You would have to find every title again and change the tag. It'd be much easier just to edit the style sheet, wouldn't it?

Still confused? Well, go do a google search for "CSS Style sheets understanding beginners".

Oh, and the meaning of life? 42. ^_~



More Nifty Codes

Want to hide something in your lookup? Some bit of code you want to remember to edit later? Or just a note so you can tell if someone stole your lookup? Just put your text between slashes (/) and asterisks (*) as follows and it will only show up in your source code. Neat, eh?

Okay, I finally got this code up and working. Be gentle. Place it in your styles and all aspects of the sidebar will vanish. Top bar, navigation, NeoClock, search bar, everything. Play around to see what parts you want to keep and what parts you dont.

#myflash, #tbg, #m, #mb, #n { visibility:hidden; } table, td {background: transparent;}


For those lazy folks, here are the major links you should include at the top if you decide to smite the sidebar.



If you want to add you own sidebar, you'll need to create one in very simular porportions to the actual Neopets sidebar. This way, you can use this easy method that makes you sidebar fully funtional and not just a pretty picture!

Add this to the CSS portion of your lookup (between the style tags):

Then add this after the style tags, like you would an image you want to show up in your user info.

If you want to make your own top banner, simply put this code in your CSS codes.

You will need a 62x480 pixel image to be your banner. Making it bigger will require changing the code and slight readjustment.


The following code will put a border around the text you enter about yourself. Put the last line of code after the end of your CSS coding, and put your text where it says.


Want a new shield? Try this code. Depending on how much text you have and other differences in your user lookup, You'll have to edit this code. It won't work for everyone.

More Coming Soon!




Making Your Lookup

Now you have to codes to create your lookup, but how do you combine them to create your one of a kind, very own lookup?

First step is to open a basic text editor. On PCs, the most popular are either Notepad or WordPad. Microsoft Word or Word Perfect will not work well. To open Notepad, click the "Start" button, then "Programs", then select "Accessories". Choose "Notepad" from the list.

Then open this page and click in the text box under "Base Code". Hit Ctrl†A then right click in the highlighted area and select "Copy". Go to the Notepad wind*w and right click again, this time selecting "Paste". I would reccemend saving now. Save it where you can find it under a name like "userlookup" or "accountnameuserlookup".

Now, find a good hexidecimal color chart or just think of some color names that would look good together. You should be able to find each section of code in my guide. Replace wherever it tells you with your color names or color codes. You should do this with all of the simular options, like image transparency, doing as the guide tells you to.

Then, enter information about yourself. Images, facts, a little about your hobbies, all are great.

Now, go to this page. Do as it directs, it wont work if you dont enter your secret word, then delete everything in the text box at the bottom. Then open Notepad (Now would be a good time to save, just in case!) and hit Ctrl†A again. Right click and copy. Go back to the User Info page and paste into the text box at the bottom.

Hit enter, then go look at your lookup! Note where all the changes need to be made and edit them. Repeat this until you are fairly happy with your lookup.

But what if you want to use some codes that aren't included in the base code? Under Nifty Codes, copy the code that you want in your lookup, and open up your lookup code. Above where you enter your text about you, put your curser before where it says . Then paste your selected code, making sure it is before the end of the style tag. In some codes, there may be a part of the code that you also must put after the style tag as well, so make sure you read all of the instructions about the code.

No one can ever make a perfect lookup on the first try. So keep expierementing, ask others for their honest opinion about your lookup, and look for lookups you really like. If you see a lookup you just absolutely love, think about what makes it so nice. Is it the colors? The subject? The font used? If there is a certain effect you would like to dupicate in your lookup, why not try looking through the source code to find it? Then you can expierement with it in your own lookup. If you copy more than one code from a lookup however, it is advised you ask the owner of the lookup if it is okay for you to do so, or you may be reported for lookup theft.

If you still have questions or if your code isnt working properly, Neomail me!




Information About Web-Browsers
Web-browsers are what you use to look at web pages. There are many broswers out there and not all of them support the same codes. That means what looks good in one may not work in another. Most people use Internet Explorer, as this is the browser that comes with nearly all the computers sold today. Internet Explorer, or IE, has many codes exclusive to it alone. Some are often used in lookups, like the image transparency code. This code makes all the images on that page semi transparent, depending on what it is set at. This code only works in IE, so people using other browsers cannot see it. Some other browsers include Firefox (this is what I use), Opera, Safari, and Netscape. So while in IE, the transparency code may soften the images and make them blend into the background, they still will look like they usually do in other browsers. This is a pain for the people like myself who use other browsers. IE has some security loopholes, while Firefox and others offer the wonders of tabbed browsing, so for many alternate browsers are a major plus. However, many lookups that look great in Internet Explorer will look awful in Firefox, with text floating in the center of the screen, unreadable text, among other things. So I highly reccemend when making a lookup, to either look at it with other browsers yourself (Opera and Firefox are free to download) or ask others with those browsers to look at them for you to tell you if they look ok.

In actuality, most browsers support more CSS than IE does. Many codes that work in IE only, are already broken codes, so it is IE that "doesn't work", not the other browsers. When CSS is properly applied, it looks great in all browsers that properly read CSS. Please keep that in mind when others tell you your lookup doesnt work in Firefox.

And hey, I'm not an expert on this. If you think you know more, or would like to talk to me about this issue, feel free to Neomail me. I'm open to other opinions. ^^





Viewing the Source of a Webpage, How to Use Classes, and How and Why Codes Change Between User Lookups, Shops, Galleries, Pet Lookups, and Pet Pages.
A nice, long winded title for you, eh?

Many people have written to me asking why some codes will work in their lookup, but not a pet lookup, or they want a code to use in their gallery, and pull their hair out trying to figure out why it isnt working in their shop. Here, I'll explain the answer.

First, you must learn how to view a page source. People often want to email me their code so I can tell them what is going wrong. But I can see their codes just fine, without that, and you can too. First, open your broswer. Open the webpage you want, in this case, your user lookup. Then move your mouse to the top of your screen, until you come across the tool bar at the top. Click on the part that says "View". Then, in the drop down menu, select "Source" or "Page Source". In some browsers, you can also right click on the page, and select "View Source" from there. Even more, if you highlight stuff in certain browsers, then right click, you can "View Selection Source" and see the page source for that specific section of codes. No matter what method you choose, a new wind*w should appear, full of complex and confusing HTML codes. If nothing happens (My first copy of Internet Explorer drove me nuts, as it never worked, some strange glitch) then try another browser or reinstall your current one.

Next, we learn about classes. The class attribute (added to an HTML tag as

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2005.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit

Do you see what I see? Classes! No, not your school work, but style classes. The legal text is defined to have the class of "sf". And look, don't tell anyone, but TNT goofed. See in front of the Neopets, Inc. part? That shouldnt be there, but the class should be in the link tag. Keep that in mind if the Neopets, Inc. link looks different than the others.

Now, what can we do with that information? Change the color of the text!



The links, defined by the "a" part, will now be orange, and the regular font should appear yellow. But, if you are like me, and are running short of characters to add to your spiffy lookup, try this instead.



Because a tag wasnt specified, everything on that page with the class of "sf" will be orange. In the second example, you can apply more than one thing to the same styles by separating them with commas.

Take a look at my codes at the top of the page. Using that information, can you see better how each part works?

Okay, so we now know how to view page sources, use classes, and define the legal text color. What does that have to do with how things work differently depending on where you put it?

Lets use the example of one of my friends. She wanted to put all her gallery stuff into a table, but didnt know how. After a quick scan of the source code of the gallery page, I give her a code.



She thanks me, adds it to her gallery, and comes back a day or so later asking for help again. While working fine for her gallery, it doesnt nothing in her shop.

The reason for this, while slightly confusing, is simple. The creators of galleries were terribly nice to us. Almost everything has been assigned a class, including the div housing all the items and text, with the class "tablestyle". But, when my friend moved the code into her shop, she discovered that the shops archaic coding didnt include these handy dandy classes, making it much more difficult to work with.

So, in short, depending on where you go on Neopets, you encounter different classes on different pages. On a user lookup, you can use the p table code (a code that defines tables that are immediatly preceded by a paragraph tag) to define the tables with stats in them, because they are indeed preceded by the paragraph tag. But if you do the same thing on a pet lookup, you don't get the same effect, because the codes arent there in Neopets codes. And as in the above example, the galleries let you do much more nifty coding that shops, even though it seems like they should be identicle.

Now, wasnt that an interesting article worth the long winded title? No? Eh, come back for when I do my scpiel on the differences between image extensions.




Examples of Nicely Executed Lookups

When it comes to lookups, be creative! Look at some of these lookups, they look great in most popular browsers.

  • llynsin This is a nice rainbow pteri based lookup that looks marvelous.

  • silverstareagle This drackonack themed lookup includes a lovely poem and a simplistic style.

  • mileena_z Just nicely done. *pokes eyrie*

  • Snarkie She made the side bar go *poof*!

  • phoebemittens Nice and simple.

  • lafee_dans_gris Simple, and the clip is priceless!

  • winterwithin So plain it would be boring, except that its mine. :D

  • marellestorm So pretty... Love the background turned into a table thing. And the graphics are awesome.

  • jbear113 Finally, a decent user lookup from somone I don't know!

More Coming Soon!




Good Lookup Features

  • Simplistic Design Keep your lookup simple. A single image in the corner for a background, perhaps an item you really like, looks rather nice on a clean white background. Many people also use a corner graphic of complimentry colors and their username, perhaps with an image as well. I have a basic example of this is my user lookup.

  • Small fonts. I dont know why, but I like small black fonts. I just think they look cool. Arial and Verdana both work well, try size 7 or 8.

  • About you! Lately, it seems like most people don't bother telling about them selves in their lookup. I can't imagine why this is, they find it much easier to tell you not to neomail them. Try reviving a bit of this "lost art" of telling about yourself in your lookup, someone will surely find it interesting!


More Coming Soon!



Things That Aren't So Good in Lookups
These things are often annoying in lookups, so avoid them if you can.
  • Large backgrounds. People on dial-up connections may avoid your lookup if it has a large background. Keep the file size below 100k for it to be okay on even slow connections.

  • Large/multiple pictures Same as above. As cute as your cat may be, if it stretches the screen and takes forever to load, don't put it on your lookup. If you have 15 flashy images on your lookup, even if they are fairly small, it will hurt most dial-up connections. Multiple images may also impair how older computers function, sometimes to the point of shutting down the computer.

  • Flashy graphics Again, animations will hurt non-highspeed connections and older computers. Animations also are annoying, depending on the individual graphic. I know several people with eye problems so that when they see flashy GIFs, they get severe headaches. Elipsy is no laughing matter either. Bottom line, animations are often annoying and an eyesore.

  • And so on...
  • Only IE compatible codes If a lookup only works well in IE, you can bet there will be annoyed people out there. Often, with a little research, you can find how to do the same thing in all browsers, not just Internet Explorer.

  • Music Music files are generally big, causing for slow loading problems. Many people also like to listen to music on their computer as they are on the internet. So when you have music on your lookup, it interferes with their own music. Music is annoying, especially if someone has different tastes in music than you do.

  • Eye-bleeding colors When making your lookup, make sure you use nice colors. Neon bright colors on black might look cool, but that doesn't mean they look good. If your text is bright green on dark green, chances are, no one is going to read your text because their eyes are watering. Simularly, don't put dark grey text on a black background if you want people to read it. Unless their monitor has unusually high contrast, they wont be able to read it and will figure if you cant bother making the text legible, you dont have anything interesting to say.

  • Chtspk If you write your lookup in chtspk, hackspeak, or any variation thereof, most people worth knowing won't bother deciphering your lookup. It does NOT make you look cool, it makes you look like an illiterate idiot.

More Coming Soon!




Pet Lookups

Well, now that you have got your own lookup done, why not treat your pets to a simple classy lookup too? Same rules apply as above. ^_^





Awards I've Gotten
Hey look, I'm not the only one who likes this page! ;) Someday I'll also add quotes so you can see what others have said about this petpage.










Go to Other Petpages
Want your petpage featured here? Neomail me with a link, and if I like it, I will include it.


















Come Back to this Page
























Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

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