Welcome to Deathwinks's lookup help page, run by
TheLoneTiel. Here you'll discover the codes to make your own lookup. Stop using premades and discover the thrill of making your own lookup. I provide base codes for your lookup as well as individual codes. I'll also give you
CSS and
HTML basics, and tips on making your lookup, from common mistakes to tutorials. Take a look around. Remember, the most important part is having fun!
Yes, I know this isn't on Deathwinks's page yet. I'm leaving that guide up until I can complete the new version.
NARVIGATION
There are a few things to keep in mind when using this page. For quick reference, look at the navigation at the top of the page.
Tip: Not following me? This page only confusing you? Why not see what Neopets has to say? That's right, Neopets has their own HTML pages, take a look!
-
Neopets HTML Guide
A basi introduction to HTML.
-
Code Filter Index
About the code filter and why it is in place. Also, links to all the other Neopets HTML pages.
-
Coding Tips
Advice straight from the coders at Neopets HQ.
-
Common Mistakes
A page that discusses common mistakes when using the code filters.
-
Common Errors
An explanation of frequent errors when using code filters.
NARVIGATION
Here are the basic codes I use when I'm making a user lookup.
This code is full of notations to remind you of what each code does. Everything between is a CSS comment and can be deleted without any effect on the codes. Er. I'll come back to this one, it broke.
This code is the same, but without any comments and is condensed for space. This is what you will want to use once you have a basic understanding of CSS.
An alternative code, places information in boxes.
NARVIGATION
Here are some separate codes that I use for most of my lookups...
NARVIGATION
Here are some finished premade lookups for you to take apart or to use as they are. If you want to use the codes but insert your own images, please keep the link to this page. Otherwise, just use them for understanding as to how the codes work.
NARVIGATION
Banner Navigation Tutorial
To make your top banner on a page match up with Neopets navigation, you need to take the
base image and open it in your graphics program. You can use Microsoft Paint, a standard on Windows computers, but the results might not be very good unless you are very careful. You can download a free program called The GIMP, which has layers and other nifty things that will make your graphics life much easier. Photoshop will of course work with this, though my favorite program is Corel Photo-Paint. Simply, you need to keep the image that exact same size and keep the divided box for the navigation and Neoclock identical in size and shape. Beyond that, everything is your choice. Keep in mind, however, events such as Neomail and Neofriend requests, which appear along the top of the screen. High contrast patterns will make that hard to read. As well, people use varying site themes, some of which have white lettering and others that use black. Use a medium tone for your background for the text links so no one will have a hard time reading them. Black and white go with everything, don't worry about it clashing.
NARVIGATION
This is how I make a lookup. Step by step.
NARVIGATION
Talk about yourself, learn about color theory, yaddayadda...
-
Talk About Yourself
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!
-
Simplistic Lookups
Keep it simple! Elegance and simplicity are often tied very closely. Don't use too broad of a color scheme, keep it to two or three complimentary colors. Use a consistant font face, don't use Arial for half, Georgia for the links, then use two or three different fonts in your graphics. If you have a theme, keep with it and resist the urge to include things that don't match.
-
Creative Themes
Be creative! While many themes on Neopets have been used again and again, there are still almost limitless possibilities. Look at my list of Neopets images for inspiration on where to find images to use in graphics.
-
Test!
Test your lookup from every perspective you can. Major things to keep in mind are browser preference and screen resolution, but operating system (Apple, Windows, Other), monitor type (the difference between /CRT/ and /LCD/), connection speed, site theme, Premium or non-Premium, with and without status events (Neomails, etc.), Something Has Happened! random events, even down to the layout of the browser will make a difference in the display of your page.
-
Be content with your lookup!
If you like your lookup, that is the most important thing. Don't worry if others rate your lookup poorly.
NARVIGATION
Keep these in mind when making a lookup.
Don't use IE only codes, test in all browsers and resolutions as 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.
-
Only /IE/ Compatible Codes
If a lookup only works well in Internet Explorer, 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 /IE/. As well, with the introduction of /IE 7/, you will find that it displays codes differently than IE 6, so the codes you are used to won't work for an even larger portion of the net population.
-
Screen Resolution Incompatibility
A growing number of people are creating lookups that work only in 1024x768 or larger resolutions. Keep in mind that there is still a large number of people using 800x600 monitors. In a simular vein, most of these old monitors are /CRTs/, which means they often display colors differently than newer /LCD/ screens.
-
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 don't have anything interesting to say.
-
Chtspk
If you write your lookup in chtspk, hackspeak, or any variation thereof, many people worth knowing won't bother deciphering your lookup. It does NOT make you look cool, it makes you look like an illiterate idiot. Even if you use chtspk in normal conversation, take the extra time to make your lookup presentable. First impressions are very important.
-
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.
-
And so on...
There are so many things to go wrong!
NARVIGATION
Basics of HTML and CSS - The Guide
Welcome to the wonderful world of HTML and CSS!
CSS stands for Cascading Style Sheets. What is that? Well, basically, you use CSS to say how your HTML works and looks.
HTML?! You've probably heard of HTML. It is the computer language that each and every webpage you view has been coded in. It is not the only language used, you've probably heard of /PHP/, /ASP/ and lots of other confusing acronyms thrown about, but you don't need to worry about those.
Lets first start with the Neopets default user lookup. It looks something like this, when no HTML or CSS has been added.
**First screenshot of lookup here**
This page has been coded in HTML (for our purposes at least). We can add what is called a "Document-Level Style Sheet". This is just a way of saying that our CSS is added to the page it is being used on. Most webpages have "External Style Sheets", but that is another lesson.
A typical HTML code looks like this:
The "name" stands for the name of the tag being used. It might be "DIV" (A "division", used to break up blocks of text), "b" (bold, makes text stand out), "small" (decreases font size), or something else entirely. An "attribute" is something special added to the tag. It might be "color", "font-size", "border", or "class". The "value" is the value that you want that attribute to have. For a color attribute, you'd have a value of "red", "#FF0000", or similar. For a size attribute, you might have "3", "+2", "14pt", or similar. A border attribute might be "1" or "2px". Classes are special, and can be any set of alphanumeric characters that do not start with a number. Basically, that means any letters and numbers can be used, so "top", "t3", and "Pants" are okay, but "4thewin" and "OMG!" are not. You use them to name an HTML element so you can come back with CSS and modify that element specifically.
So our sample code might end up looking like this:
When using CSS, you follow the same basic layout, just in a different format (or syntax) and using different terms.
A basic style tag looks like this:
Selector" refers to the name of the tag, so "b" still works, as do all our other examples. "Property1" is the name of the first property. While CSS usually uses the same names as attributes, you may have to be careful. Try them first, and if a standard attribute name doesn't work, you may have to look it up. Properties can be things like "color", "margin", "border-color", "font-size", and "font-family". "Value1" stands for the value of the first property ("property1"). It would be something like "red", "10px", "#0000FF", "24pt", and "Arial", varying for each property.
A bit confusing, eh? Don't worry, it is just the names of the different elements that change, not how they work.
This is how we'd "declare" (assign formatting to an HTML tag) the same thing with our bold tag.
Whoa, where'd all that other stuff come from?
Well, style sheets have to be set off from the HTML document, You do this by putting it within style tags. They work just like our other tags, but instead of having text between the opening and closing tag, you put CSS tags. So it is useful to know HTML before you start with CSS, but for Neopets User Lookups, it isn't required.
The main mistake I see with CSS is that people forget to add the {style} at the beginning and the {/style} at the end of the tag. That means the browser (the program used to access the internet, such as Internet Explorer or Mozilla Firefox) just reads it as plain text, not as a CSS declaration. (The slashes at the end of each part are an annoying consequence of Neopet's new filters. You'll need to include them if you plan on using any positioning of stuff using CSS.)
Now that you have a basic understanding of what CSS looks like, lets take a peek at what it does.
Let us start with the Neopets user lookup.
This is how it looks unformatted:
**screenshot again**
Now I'm going to add this simple CSS code:
What this will do is add a red (#FF0000) border (a border that is 1px in width and that is solid, not dashed or dotted) to all the images on the page. All the tables will have a blue (#0000FF) border. Tr tags are part of table (tr stands for table row), and they get a purple border. But, because of the way HTML displays, you don't get to see the border. Tds (table data cells) will get a bright green border. Each tag also gets a padding of 1 pixel. What that does is add 1 pixel of room between each tag, so it is easier to see what happens to each section.
This is what happens to the Neopets user lookup with just those simple tags:
**Screenshot of lookup with borders**
Kind of interesting, isn't it? You can tell how the Neopets user lookup document is made up.
NARVIGATION
Basics of HTML - The Codes
Bold tags, italics, images, divs, spans, etc.
-
Basic HTML is usually quite simple. Here a few simple examples to familiarize yourself with the format of HTML. The first line is not an actual code, but an example using the "proper" HTML terms I'll use.
-
^name attribute="value"^Text^/name^
Hello World!Neopets
-
To make text italic, bold, or underlined, the codes are very simple.
-
-
To link to another webpage, you can use an anchor tag. The second link is shorter, it will assume the website you are browsing is the one you are linking to, so you only fill in the part after the intial ".com". Because you should never (and cannot) link to a site outside of Neopets, you can use this code to link within the Neopets site. The " -disallowed_word- is the hyperlink reference, the specific URL you want to go to.
-
-
To link to something within a webpage, you must assign it a name. You'll notice that you can navigate through this page from the top without scrolling, this is because each header you see here has a specific named anchor tag. This code has two parts, one is an example to name something. You can enclose text in the tag or just put it before the text to make it invisible and not modified as a link. Alternatively, if you know your stuff, when you give any element on a page an ID ("id='whatev'"), it can be used to link to an image, a header, or anything else without additional coding.
-
-
To add an image, use this code. The slash at the end is not needed, but is proper /XHMTL/ and merely confirms with the browser that the tag stands alone and doesn't have an end tag.
-
-
A division (DIV) is used to separate a section of a webpage. These are better to use than tables (tables are only meant to hold data) and are usually easier to work with. A DIV left alone won't change the appearance of text but can be easily modified by CSS. They can also be used in place of paragraph tags.
-
-
If you only want to edit a small section of text, you can put it within a span. Spans work like DIVs, they don't look different until you change them, but they are useful if you want to make a single sentence change color, or whatever. Give them a CSS class or ID and you'll soon become good friends.
-
-
To add a line break in between text, you can use a break tag. This will start a new line. Use two in a row to add a space between lines.
-
-
Yarr
-
-
Yarr
-
-
Yarr
-
NARVIGATION
Articles written by me or others for more complex lookup ideas.
NARVIGATION
Others things to use when making a lookup. Data is displayed in the following format:
-
Website Link
Description
-
Book Title - Author
Description
-
Website Search Term
Description
The following links are on Neopets pages, therefore they should be safe to visit. I have visited them with no ill effects. I do not monitor them, I do not run them, I am not in anyway associated with these pages, but they provide more information on the topics I cover. As well, some of these may support poor coding habits or codes that I personally do not approve of. Use at your own risk.
-
http://www.neopets.com/help/html1.phtml
The Neopets HTML guide
-
http://www.neopets.com/~CSSish
Amyishh's CSS Guide
-
http://www.neopets.com/~Drakolee
Multibrowser Lookup Coding
-
http://www.neopets.com/~Vanuu
Amyishh's DIV-Styled Lookup Tutorial
-
http://www.neopets.com/~l00kuphelp
L00kuphelp's page of lookup codes
-
http://neopets.com/~csshelp
CSSHelp's codes
-
http://neopets.com/~drappastar
Color names and hexadecimal codes
-
http://neopets.com/~kaxian
HTML and CSS codes of all sorts
-
URL
Description
Neopet Graphics Resources
The following links are on Neopets official pages. They are perfectly safe. These are my favorite places to get images to use on my lookup graphics. As these are all official artwork by Neopets, you do not need to worry about art theft. Using non-offcial art, or fan art by non-TNT staff, is considered art theft unless you specifically ask the owner or follow the owner's rules.
Tip: Right click on almost any flash image (the exception being Neopets games) and select "Zoom In" to get a closer look. Then take a screen shot (press the Prnt Scrn key on Windows computers) and import that into your graphics program. Standard Flash won't lose quality when you zoom in, so you can make it as big as you want.
-
Neopet's Backgrounds
Use the 1024x768 size for large graphics.
-
Neopet's Sketches
Use 1024x768 size for large graphics.
-
Neopet's Screensavers
Install the screensaver, then take a screenshot (Press the Prnt Scrn key on Windows computers) to get the image. Import it into your graphics program.
-
Collectable Cards
While limited and often using older art work, these collectable cards are large enough to use in most graphics.
-
Trading Cards
These are not large enough to use in large graphics, but can be traced, and are excellent to use in small graphics.
-
Neopet's Press Kit
Very high resolution Neopets images, may contain outdated art.
-
Battle for Meridell (Flash)
Flash comic for the Battle for Meridell (the second one)
-
Hannah and the Ice Caves (Flash)
Flash comic for the Hannah and the Ice Caves
-
Curse of Maraqua (Flash)
Flash comic for the Curse of Maraqua (also the second one)
-
Lost Desert Plot (Flash)
Flash comic for the Lost Desert Plot (I think there is another one old one)
-
Cyodrake's Gaze (Flash)
Flash comic for The Cyodrake's Gaze plot.
-
Tale of Woe (Flash)
Flash comic for the Haunted Woods Plot
-
Journey to the Lost Isle (Flash)
Flash comic for the Journey to the Lost Isle Plot
-
Altador Cup Freebies
Graphics and backgrounds for the Altador Cup.
-
Specific Pet Viewer (Flash)
This link will take you to the flash image of any pet. Change the name at the end to see the pet. You can resize your browser window, then screenshot the image for a large version of any Neopet that is good for graphic use.
-
Neopet's Basic Site Theme
Neopet site themes offer large, tantalizingly clear PNG images. Change the end of this url (which is for the default themes) to a number between 1 and 15.
-
Neopet's Maraquan Site Theme
These are for the Maraquan theme, change the end number to something between 1 and 10 to see all the option.
-
Neopet's Qasalan Site Theme
These footer images are from the Qasalan theme and range from 1 to 9.
-
Neopet's Valentine's Site Theme
The Valentines sidebar nets us images 1 through 9.
-
Neopet's Space Faerie Site Theme
The pretty Space Faerie Premium sidebar gives us only 4 images.
-
Neopet's Altador Cup Site Theme
The Altador Cup theme gives us 16 images, for each team.
-
Neopet's Cyodrake's Gaze Site Theme
This Shenkuu inspired theme has images 1 through 8 for your use.
-
Neopet's Altador Constellations Site Theme
A starry theme, you can find images from 1 through 12, for each of the Altador heroes.
-
Neopet's Tale of Woe Site Theme
This theme offers you 10 images related to the Haunted Woods plot.
-
Neopet's Faeries' Ruin Site Theme
From the Faeries' Ruin Plot, there are 8 rotating images.
-
Neopet's Purple Site Theme
Featuring purple pets, the 9 images of this theme are sure to please.
-
Neopet's Winter Site Theme
The winter sidebar offers 11 images.
-
Neopet's Birthday Site Theme
1 through 7 will give you a variety of party themed images.
-
URL
Description
-
URL
Description
Books on Coding and Graphic Design
These are the books I use for reference or general knowledge. Yes, I know the idea of literature on paper is strange to some of you, but I find it far easier to manage books than the flip back and forth between webpages on coding. None of these books are specific to Neopet coding, so you might find some of the codes don't pass filters, but they are good for basics. As well, some of you may advance to actual web design beyond Neopets and will find these invaluable.
-
HTML & XHTML: The Definitive Guide - Chuck Musciano and Bill Kennedy
This book (copyright 2002) has everything. It lists all available attributes and properties for HTML and CSS codes.
-
Designing Web Graphics 4.0 - Lynda Weinmann
This book covers basic web design theory, things like color schemes, typography, focal points, etc. It also does some HTML, CSS, and Javascript. Much of it relates to becoming a professional graphics designer, but it is very good as a jumping off point for designing anything, webpages or print media.
-
The Zen of CSS Design - Dave Shea and Molly Holzschlag
A companion to the online CSS Zen Garden, this book goes through some of the website designs and explains the reasoning behind many of the design and aesthetic choices.
-
Type & Image: The Language of Graphic Design - Philip B. Meggs
This is an "old school" graphic design book, meaning almost everything in it was done without computers. It goes over fundamentals of image and text placement, color choice, symbolism, and everything in between. It is an older book, but it describes in detail with examples various ad campaigns and the choices that were made.
-
Title - Author
Description
NARVIGATION
Frequently Asked Questions
Here are some questions I've come across. Please Neomail me if you have more questions, and I may add them here if I get them often enough!
Question: Can I make a petpage for someone and they can draw me a picture in return?
Answer: No. According to the
Editorial you cannot trade art and coding:
Would it be okay for me to draw a fellow Neopian a picture for their Petpage in exchange for them doing some coding for my Petpage?
Alas, no. We don't allow players to "pay" each other for services using Neopoints/items/Neopets/art/coding, etc.
NARVIGATION
Some people love me too much. =D I don't even nominate myself for these things.
NARVIGATION
Other nifty places to visit.
NARVIGATION
Tell others about this page.
NARVIGATION
Deathwinks's petpage was founded on the 29th of December, 2005. I would like to thank my friends silverstareagle and feralkoala for their initial help, essexweirdo for putting up with any random troubles I have, and the rest of the NeoColours fansite for their support in this page.
This page was written entirely by me, unless noted otherwise. The graphics for this page were made in Corel Photo-Paint 11 and the coding was done entirely in Notepad or Crimson Editor (a freeware text editor) by hand. It uses HTML, CSS and a touch of PHP for converting the page from locally hosted into Neopets compatible coding. The base header image is licensed by the Corel corporation, used with permission.
All codes on this page were created by me, thelonetiel, unless otherwise explicitly stated. Unauthorized redistribution will result in freezings or prosecution. HTML or CSS coding cannot be copyrighted; the manner in which they are written can be. Neopets, eyries, Dr. Frank Sloth, and all those sorts of things all are registered to Neopets, Inc., used with permission.
NARVIGATION
Lorem ipsum.
New(ish)!
Good for beginners
Recommended for more advanced users; may use complex HTML, CSS, or graphic techniques.
