Index

About Deathwinks

My Lookup Code

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.




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 < style > and < /style > 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-2008.
® 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