|
|
|
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. |
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.
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.
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.
![]()
![]() 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: 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:
![]()
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!
![]() 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. ^_~ 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.
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.
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
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.
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.
More Coming Soon!
![]() Good Lookup Features
More Coming Soon! ![]() Things That Aren't So Good in Lookups These things are often annoying in lookups, so avoid them if you can.
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 ![]()
|
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