Resuscitated, rejuvenated and renovated by Kez & due for another face lift soon
Welcome to L00kupHelp
They left a note saying anyone can redistribute their petpage.
I'd advise you not to send a friend request to the original owner just to ask for coding help - they closed this for a reason.
I'm still open for Neomails, but I'm not a genius with coding.
This petpage assumes you kinda know how to make your own graphics and are just here for codes. 
Don't know how to do graphics? First, you'll probably
need a better art program than MS Paint. Popular ones are Paint Shop Pro and Photoshop. Lesser known but good ones are Paint.net and GIMP. Giffy is great for transparensy. Go offsite, download, and install programs at your own risk. Then search for tutorials on the Web.
First time here? See if you can answer all of these questions.
1. "How do I Copy and Paste?
Windows: Position the mouse cursor at the beginning of the piece of text you wish to copy. Click and drag to the end of the piece of text to highlight it all. On the keyboard, hold down the Ctrl button and hit the C button to copy it all. Then click in a spot where you want the copied text to appear. Hold down Ctrl and press V to paste. Test this process in the area provided below.
Mac: Position the mouse cursor at the beginning of the piece of text you wish to copy. Click and drag to the end of the piece of text to highlight it all. On the keyboard, hold down the z button (it's also the apple button) and hit the C button to copy it all. Then click in a spot where you want the copied text to appear. Hold down z and press V to paste. Test this process in the area provided below.
On other pages, you'll be presented with codes in a small scrollbox. Just click inside the box, hit Ctrl + A to select all then copy and paste wherever.
2. "Where do I go to edit my lookup and how do I edit it?
Go to User Preferences to edit your lookup. My Account, Edit Profile. Put text and HTML/CSS codes in the "About Me" box
Most important tip for lookup makers: Backup your lookup codes in notepad! I do all my coding/editing in notepad. That way I can see all my codes and not have to scroll up and down in the tiny "About Me" box.
Windows: Start, Programs, Accessories, Notepad.
3. "What am I allowed to remove or cover up on my lookup?
From the Neopian Times Editorial section issue 290.
May we take parts off of our new User Lookups or cover over them? For instance, the Neohome section. I do not furnish my Neohome and don't want it prominently displayed on my lookup. Would it be against the rules to cover or remove that box? ~royalpain33
As we said last week, what you can and can't do in User Lookups is currently being debated, and we're looking at the lookups of a lot of the talented folks that have already figured out the new code to see what they've done. We're currently leaning toward allowing the Neohome and Shop & Gallery modules to be removed while everything else must stay in some form. We'll make an official announcement in New Features when the rules are decided, and we'll update the "My Profile" page (where you edit your User Lookup) to also list what you can and can't cover so everyone knows the deal.
From the Neopian Times Editorial section issue 230.
Okay, so I asked this on the Help Board, but no one seemed to have an answer for me. So straight to the source I went! I know there are specific rules for what you can and can't cover up in a userlookup or guild, but what about shops? I recently came across a shop with a full page layout. TThe navigation (retyped) & items were there, but otherwise everything else (shopkeeper, report this shop link, etc) was covered. Is this against the rules? ~thedevilsarithmatic
Erm, yes. Covering the report shop link especially is not allowed. In short, any links on the page must always be there. To clarify, here's a list of the definitive rules on the subject.User Lookup:
Pet Lookups:
- You MUST have your real, official stats viewable. You cannot retype these yourself. They have to be the official, default stats that exist on every user lookup. (Your block of text info, your Neopets, your trophies, etc.) This is so that everyone visiting your lookup knows for sure that this is your true information.
- You can cover your shield! It's quite nice to cover it with something that matches the theme of your lookup. And your join date is available in your text stats, so covering the shield does not hide how long you've been on the site. However, you CANNOT cover this shield with a different, official Neopian shield. If your current shield says "2 Years," you can't cover it with the 5 year shield.
- You should have the standard yellow bar links so that they are clickable. They don't have to be on the bar itself, so you can retype them as text links or make your own navigation bar if you like. Whatever you wish as long as those links are on the page. :)
Shop/Gallery:
- The correct stats of your Neopet(s) must be displayed. Again, you cannot retype them or cover them in any way.
Guilds:
- You can replace the side navigation and header as long as ALL standard navigation links are clickable somewhere else in your shop/gallery. If you do not have these links, your shop/gallery will be cleared.
- In general, all other information, such as prices, your account name, user lookup and report links, etc, must be clearly visible and clickable.
- For shops specifically, you CANNOT have your font color and background colour the same, or similar enough that it is difficult to read the prices of your items. Your shop will be cleared if a monitor sees this. A user must be able to clearly see what they are buying and how much it costs.
There may be some things we missed, but it should be quite clear from this list what is and isn't allowed. :) If you have all the real information from the specific page viewable, and the user can navigate all the links on the page that are normally found there, your code is probably good to go.
- The real guild navigation and welcome sections must be visible. You may cover everything else with graphics, but if you do, the yellow bar links MUST exist somewhere else on the page so that people can navigate away from your guild.
4. "Where are some good places with premade lookups, backgrounds and stuff???
For onsite premades, check out Cybunny_61603 petpage.
There's lots of fan sites offsite that offer premade stuff for Neopets. But be very careful when visiting these site. Don't download anything from them because it might be a virus. There's also a code out there called a Cookie Grabber. From what I understand, this code copies the cookie that keeps you logged into Neopets and puts in on their comp and then they have full access to your account. To prevent that from happening, you should clear your cache before visiting off site pages and clear it again before coming back on Neopets. In Internet Explorer, go to Tools, Internet Options, General tab, under Temporary Internet Files, Delete Cookies.. and just delete all the cookies if you want. In FireFox, go to Tools, Options, Privacy and click on the Clear button to the right of Cookies.
Try a search on Google. There's a high chance you won't like what you find. Look for sites or people that make "good" lookups and hope they take free requests. Don't pay people or promise big tips because it's against the rules.
5. "I put a premade lookup in or whatever, but a Hang On! There's a new rule! thing pops up. What do I do?
There's probably something wrong with the URL. The image code basically looks like this..
it can also look weird like..
It always starts out with 
img and the URL should end with .jpg .jpeg .gif .bmp or .png (these are the only image types that Neopets allows you to use on your pages). It's the thing that's after the s rc= that causes the problem. Here's the proper way to get the URL of the image.
Windows: On a webpage, right-click on the image, go to Properties then copy the URL, Address, Location or whatever looks like.. http://images.neopets.com/neoboards/avatars/uni.gif Then paste it in the image code
Mac: On a webpage, click in the image and hold down the button until the menu shows up, go to Properties then copy the URL, Address, Location or whatever looks like.. http://images.neopets.com/neoboards/avatars/uni.gif Then paste it in the image code
Important: A URL should not have spaces in it. The spaces will also give you the error. Some image hosts allow you to create folders for your images. These folder names should not have spaces in them. Use _ instead. To tell if there are spaces in your URL, look for a %20.
6. "How do I put in my favorite/current/newest avatar in my premade layout?
Go here
7. "I put text/pictures on my lookup and the "enter" button doesn't work. How do I start a new paragraph or put things on the next line?
Time to learn some basic HTML. Go to the Basics section
8. "The image is saved on my computer. How do I put it on my lookup?
You have to upload the image to an image host and they'll give your image a web address or URL. Go to the Image section for a tutorial.
Don't put pics of yourself on your lookup or anywhere on Neopets. From the Neopian Times editorial section issue 210.
It has recently come to my attention that people have been recieving warnings for putting pictures of themselves on this site. I personally think that as long as the photo is family friendly, it should be allowed. It should be up to the person posting the picture whether or not they want their fellow neopians to see what they look like. And as long as they are also taking careful steps to insure their own safety (not posting personal info, place of residence etc.) Then it should be fine. Can you please clear this up for me once and for all, Are we allowed to post pictures of ourselves or not? I'm really hoping that it's still allowed, as a parent I take precautions to ensure I don't give away too much personal info, to keep myself and my family safe. But there are people on this site I talk to on a regular basis, and I like to be able to put a face to their usernames, and vice versa. Please answer this question, as I know a lot of people are wondering the same thing. Thank you. ~ terri_baby24
Though many people are cautious with personal information, many others, especially younger users, aren't aware of the dangers of posting personal information on the internet. As a parent, I'm sure you can understand it is a protective measure to insure that our younger users are not unknowingly putting themselves in harm's way. As there is no way to enforce an age cut-off on the internet, we must do the responsible thing and try our best to keep all personal photos off the site.
9. "How come the images show up as red X's or broken images?
It might be that you have the wrong URL. Try to copy and paste the URL again as shown in question 5. Maybe the image host is having some problems and you just have to wait it out. If you got the image from some other website, maybe the host of the image doesn't allow direct linking to their files. Lastly, it could mean that you've used up all your bandwidth. See your image host's FAQs or Terms for more details on bandwidth usage.
10. "I've made my own layout in a paint program. How do I put it on my lookup?
There are three basic types of layouts. Default: Looks like the default layout but with images replaced. Blog: Huge image with box for stats in a scrollbox, links, and info box. Repeat background with top: Big image on top, stats under it with a repeating background, links and info box usually positioned on top image. See if the codes in the Layout section can help.
11. "I can't find the code I need
Ctrl + F and try searching for some keywords. Try the Help board. No luck? Neomail me but, I really, really like visual samples, show me what you need a code to do.
12. "My lookup looks great in Internet Explorer web browser, but people with Firefox say it's all messed up. Help?
There are so many ways to code the new layout. Lots of things can go wrong. The main problem I see is that all the heights, widths, top and left position numbers need "px" attached to it or else it won't be positioned right in FF. Png images must have height and width on them in the image tag or they won't show up in IE (thanks for the info lynnlynn_rox and the_freebie_man!) Or maybe you're taking different codes from multiple sites and they're not working well together. Try recoding the layout with codes only from this petpage. If the problem is still there, drop me a neomail at mach3000 and I'll check it out.
13. "How do I put my codes on a petpage for people to see and copy?
That code works on petpages. In guilds or on an offsite web page, delete the _ so there's no space between text and area.
Layouts
Types of layouts I have codes for: new default, old default, blog and repeat background with top. You make the graphics, find the type that kinda matches it, copy the code, plug in your images' URL, tweak some numbers and add other spiffy codes.
Example
Original image size is 1024px x 645px. http://www.boomspeed.com/mach3000/cham_bg.jpg
I need my stats in a scrollbox, the default navigation and box to put my text somewhere.
Image plugged in the code with other stuff unedited.
All numbers are tweaked and everything is where I want it to be.
Make it extra spiffy with more codes.
Feel free to do whatever you want with the codes to create your own type of layout. Check out the User Lookup Spolight winners for some ideas (new layout starts at 116).
Layouts. Click on the image of the layout you need.
New Default
Images you need to make: header, footer, optional background
Header. 1000 width 77 height
http://images.neopets.com/themes/000_def_f65b1/header_bg.png
You can make the header as tall as you want. Take note that there's a link on the Neopets logo. If you like the default navigation, make a shaded area for it if you like. If you like the navigation, but don't like the default navigation images, kinda follow the template below to make the header.
http://www.boomspeed.com/mach3000/lh_header_navtemplate.gif
Footer. 1000 width 160 height
http://images.neopets.com/themes/000_def_f65b1/footer_bg.png
Optional background. Any width any height. Some kind of repeating background would be nice for this layout.
Codes. After you make the images in the art program, you gotta upload the images to an image host (instruction on how to do that are in the Image section). Then you can use all the codes found in the Remove/Cover section.
Old Default
Below is how to make it, break it in pieces, etc..
Images you need to make: topbar, sidebar, banner, optional background
Topbar. 728 width 44 height
http://images.neopets.com/t/hdr.gif
You can make your topbar as wide or as tall as you want. The most important thing is to make sure it looks right when it connects to the sidebar.
Sidebar. 128 width 427 height
 http://images.neopets.com/t/m5.gif On the old layout, there would have been a black vertical line to the right of the sidebar. It is not a part of the default image. It's really a table cell filled with black. When you make your sidebar image, draw that vertical line too if necessary. |
 http://www.boomspeed.com/mach3000/lh_sdbarlayout.gif |
Follow the sidebar template. Width can extend over 128px but anything beyond that will not be clickable. Stretch the bottom as far as you want. Sweetest_angel_ever petpage has a tutorial to help you create your own sidebar in MS Paint.
Banner. 480 width 62 height
http://images.neopets.com/new_headers/userlookup.gif
You can make the banner any size you want.
Optional background. Any width any height. Usually, people add an image at bottom right that stays put even when you scroll the page.
Codes. After you make the images in the art program, you gotta upload the images to an image host (instruction on how to do that are in the Image section). Then you can use the codes below.
Remove default Neopets stuff. The welcome links will still be there because you can move them on your top bar later if you wish. Or to remove it now, add ,.user after .footerNifty
Add topbar. Change the height and width on the #header to move the welcome links around.
Add sidebar. Replace http://www.boomspeed.com/mach3000/lh_sdbarlayout.gif with your image's URL, but leave the background URL http://images.neopets.com/transparent_spacer.gif as is (it's needed so the code can work in IE). Change the top and left numbers to move it around. The rest of the code makes the links work since we can't use map #a anymore.
Add banner.
Move the stats (and center the copyright stuff as well). Change padding numbers to move it around
Add fixed bottom right background
Centered blog with just one scrollbox. Text navigation (included) and all text you enter will go in the one scrollbox above the stats.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Increase the #stats width until you don't see the horizontal scrollbar anymore. To uncenter the blog, change #main{width:1000px;position:relative;top:-130px} to #main{position:absolute;top:-130px;left:0px}.
Make an image any size. Make the shaded area big enough for your stats. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_blog.gif
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, set the width of #main to be the same as your blog image's width. The top:-130 is there to hide the header and Userlookup: guest stuff. Change left and top numbers of #stats to move the scrollbox around. Replace my blog image's URL with yours http://www.boomspeed.com/mach3000/pxgrid.gif. Increase the top number of #bg if you want to move the image down a little more (increase the top number for #stats the same amount too).
Centered blog with two scrollbox. One scrollbox for an info box and the other for stats with text navigation above stats.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Increase the #stats width until you don't see the horizontal scrollbar anymore. To uncenter the blog, change #main{width:1000px;position:relative;top:-130px} to #main{position:absolute;top:-130px;left:0px}.
Make an image any size. Make the shaded area big enough for your stats. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_blog2.gif
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, set the width of #main to be the same as your blog image's width. The top:-130 is there to hide the header and Userlookup: guest stuff. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Change left and top numbers of #stats to move the scrollbox around. Replace my blog image's URL with yours http://www.boomspeed.com/mach3000/pxgrid.gif. Increase the top number of #bg if you want to move the image down a little more (increase the top number for #stats the same amount too).
Centered blog with two scrollbox and position text navigation anywhere.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Increase the #stats width until you don't see the horizontal scrollbar anymore. To uncenter the blog, change #main{width:1000px;position:relative;top:-130px} to #main{position:absolute;top:-130px;left:0px}.
Make an image any size. Make the shaded area big enough for your stats. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_blog2.gif
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, set the width of #main to be the same as your blog image's width. The top:-130 is there to hide the header and Userlookup: guest stuff. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Right now, the #nav has just plain text links (check end of layout section for premade links). Change left and top numbers of #stats to move the scrollbox around. Replace my blog image's URL with yours http://www.boomspeed.com/mach3000/pxgrid.gif. Increase the top number of #bg if you want to move the image down a little more (increase the top number for #stats the same amount too).
Blog positioned at top left with two scrollbox and position default navigation dropdown links anywhere.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Increase the #stats width until you don't see the horizontal scrollbar anymore.
Make an image any size. Add box for info with any width and height. Links should be drawn directly on your blog image anywhere. Make the shaded area big enough for your stats. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_blog3.gif
Here's what the default nav link template looks like..
http://www.boomspeed.com/mach3000/lh_header_navtemplate.gif
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Position #template_nav (remove the li img{visibility:hidden} temporarily to see where it's going) Change dropdown box style and colors. Change left and top numbers of #stats to move the scrollbox around. Replace my blog image's URL with yours http://www.boomspeed.com/mach3000/pxgrid.gif. Increase the top number of #bg if you want to move the image down a little more (increase the top number for #stats the same amount too).
Centered blog with as many scrollboxes as you want and position text navigation anywhere.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Increase the #stats width until you don't see the horizontal scrollbar anymore. To uncenter the blog, change #main{width:1000px;position:relative;top:-130px} to #main{position:absolute;top:-130px;left:0px}.
Make an image any size. Make the shaded area big enough for your stats. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_blog4.gif
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, set the width of #main to be the same as your blog image's width. The top:-130 is there to hide the header and Userlookup: guest stuff. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Right now, the #nav has just plain text links (check end of layout section for premade links). In the code, there are two extra boxes. Each box has a CSS thing #box1{...} and the
One column repeat background with banner.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Background. 1000+ width, height can be as low as 1px or as high as you want if images are added. Make an area big enough for your stats. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_1colbg.gif
http://www.boomspeed.com/mach3000/lh_1colbgpic.gif
Banner. Any height, width preferably lower than stat area width
http://www.boomspeed.com/mach3000/lh_banner.gif
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, replace the background URL. Change banner image's URL in the image code and change the top and left numbers in #banner to move it around. Change #stats left and top numbers to move it around. I hid the Userlookup: guest with a visibility:hidden code and I put the This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Top. Any width, any height. Tips on making shaded area on Bl0ghelp.
Background. 1000+ width, height can be as low as 1px or as high as you want if images are added. If it's going to be a 1px thing, I'd just copy the bottom row of the top image and use that as the repeating background.
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, replace the background URL. Change #top image's URL in the image code. Change #stats left and top numbers to move stats around.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Top. Any width, any height with info box, any width and height. Tips on making shaded area on Bl0ghelp.
Background. 1000+ width, height can be as low as 1px or as high as you want if images are added. If it's going to be a 1px thing, I'd just copy the bottom row of the top image and use that as the repeating background.
After you make the images in the art program, you gotta upload them to an image host (instruction on how to do that are in the Image section).
In the original code, replace the background URL. Change #top image's URL in the image code. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Change #stats left and top numbers to move stats around.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Top. Any width, any height with info box, any width and height. Tips on making shaded area on Bl0ghelp.
Background. 1000+ width, height can be as low as 1px or as high as you want if images are added. If it's going to be a 1px thing, I'd just copy the bottom row of the top image and use that as the repeating background.
In the original code, replace the background URL. Change top image's URL in the image code. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Right now, the #nav has just plain text links (check end of layout section for premade links). Change #stats left and top numbers to move stats around.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Top. Any width, any height with info box, any width and height. Links should be drawn directly on your top image anywhere. Tips on making shaded area on Bl0ghelp.
Background. 1000+ width, height can be as small as 1 or as high as you want if images are added. If it's going to be a 1px thing, I'd just copy the bottom row of the top image and use that as the repeating background.
Here's what the default nav link template looks like..
In the original code, replace the background URL. Change top image's URL in the image code. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Position #template_nav (remove the li img{visibility:hidden} temporarily to see where it's going) Change dropdown box style and colors. Change #stats left and top numbers to move stats around.
This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Top. Any width, any height, any number of boxes with any width and height. Tips on making shaded area on Bl0ghelp.
Background. 1000+ width, height can be as small as 1 or as high as you want if images are added. If it's going to be a 1px thing, I'd just copy the bottom row of the top image and use that as the repeating background.
In the original code, replace the background URL. Change top image's URL in the image code. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Right now, the #nav has just plain text links (check end of layout section for premade links). In the code, there are two extra boxes. Each box has a CSS thing #box1{...} and the This is the code. It's set up to test the width of your stat box first. Borders removed, shop module and neohome module removed, trophy images shrunk and width to neopets module (optional). Delete/tweak any part of the code (like if you want the shop module, delete #usershop{display:none}). Everyone's width will be different depending on what stuff you want to show and how many pets you have. Change width of #stats if needed.
Top. Any width, any height with info box, any width and height. Tips on making shaded area on Bl0ghelp.
Background. 1000+ width, height can be as small as 1 or as high as you want if images are added. If it's going to be a 1px thing, I'd just copy the bottom row of the top image and use that as the repeating background.
This is the same code as the "one column repeat bg with many boxes". The only difference is that the box's overflow:auto was taken off. In the original code, replace the background URL. Change top image's URL in the image code. In the code, the #info box is just a plain ol' scrollbox now (at the end of the layout section, I have premade tables to hold avatar, wishlist and goal info). The scrollbar on it will show up when the content inside surpasses the height of the box. Change its left and top numbers to move it around and change its width and height. Right now, the #nav has just plain text links (check end of layout section for premade links). Change box1 width and position. Change #stats left and top numbers to move stats around.
Premade info box. How to change avatar or wishlist items? Go here These codes are meant to be used with the layout codes.
About Me
text text text text text text text text text text text
Replace #info{..lots of stuff inside..} with..
#info{color:black;position:absolute;left:30px;top:150px;overflow:auto;width:350px;height:295px;z-index:2} And replace
About Me text text text text text text text text text text text Replace #info{..lots of stuff inside..} with..
#info{position:absolute;left:30px;top:150px;z-index:2}
And replace
Premade links. These codes are meant to be used with the layout codes.
Replace #nav{..lots of stuff inside..} with.. And replace with..
Replace #nav{..lots of stuff inside..} with..
And replace with..
If that doesn't work, try..
to make it seem like you started a new paragraph
like this. use as many as you want to do paragraphs correctly, use at the start of the paragraph and like this and this, but you really don't need the Every image on a webpage has a unique web address known as the URL (Uniform Resource Locator). To find the URL of a picture, right-click it (if possible) and go to properties.
Images saved on your computer don't have a URL yet. You have to upload them to an image host and they will give it an address. You can go to Google.com and search for.. free image host ..and you'll find tons of hosts. Some image hosts require you to sign up and submit some personal information. All image hosts are pretty much the same. Sign up, find the page where you can start uploading images, click on the "browse" button to find the image on your computer to upload, then hit some upload button. After successfully uploading the image, you will be redirected to a page with some information about the image. The only thing you need to look for on that page is the URL of the image which looks something like.. http://images.neopets.com/neoboards/avatars/uni.gif (most likely says "URL Link" or "Direct Link") It always starts out with http:// and ends in an image format like .gif .jpeg .jpg .png or .bmp You can check if you copied the right thing by pasting the URL in the address bar, hit enter and see if you image comes up. To put it on your lookup, simply put the URL in the HTML image code (.png images need a width and height on them like in code #5 of the image section or else they'll be really tiny in IE).
Before you upload your image, please resave them as .png .jpg or .gif One of the most common image problem is that people save their image in MS Paint and don't know that their image is saved as a .bmp by default. Bmp files are huge and some image hosts will shrink them and other image hosts might not even accept them. To resave them as a different file type, open the image in MS Paint, go to File, Save As..., select .png .jpg or .gif from the drop down list (.png should be the best, .jpg is ok, .gif isn't saved very well on MS Paint). Save and upload. If for some reason you didn't have png or jpg in the drop down list, there might be an image host out there that converts your bmp into jpg after you upload to them or there are downloadable programs that can convert image formats too. Neopets allows users to put only .jpg .jpeg .gif .bmp and .png images on their pages.
Note: The file name of the image should not have spaces, use _ instead. An error message will appear if you try to update a lookup with images that have spaces in the file name.
1. HTML image code. Replace everything between the = and the greater-than sign with your URL. In the new layout, .png images need to have the width and height on them like in image code 5 (thanks for the info lynnlynn_rox and the_freebie_man!).
2. "CSS image code. To put a picture anywhere on your lookup, use this image code. A position number of top:0;left:0 would be at the top left corner of the lookup. Try increments of 100 if you're unsure of what numbers to use. Very important info about position:absolute at #8 of Advanced section.
3. Animated Images. The only type of animated images you're allowed to put on your Neopets pages is animated gifs. To make them, you usually need to draw up each frame of the animation then put them all together in an animation program. Go offsite, download and install programs at your own risk Google for.. free animated gif maker ..to find some free programs you can use. There's one called UnFREEz that looks real easy to use. When you're done with the animated gif, you still use the HTML image code to put it on your lookup.
4. Transparent color. On Windows, some versions of MS Paint can save transparencies and some can't. Go to Image, Attributes... and check if you have a shaded out Transparency box. If you do have that box, open up your image, go to File, Save As..., from the drop down list that says "Save as Type" select "Graphics Interchange Format [*.gif]" then save. Then go to Image, Attributes..., check the "Use Transparent background color" checkbox, select the color you want transparent, OK and save it one final time. If your MS Paint doesn't have that option, you need to edit your images in an art program like Paint Shop Pro, Photoshop or GIFFY (free to download somewhere on the web. Go offsite, download and install at your own risk!).
5. Image size. It's best not to resize your images with html code. Usually, resizes are done in the art program. Most of the time, it just gets worse if you shrink or enlarge the image. In MS Paint, go to Image, Stretch/Skew and change the Horizontal and Vertical percentages. The image size code below uses pixels as values. To view the current size of the image in MS Paint, go to Image then Attributes and set the Units to Pixels. Or if your image is on the internet already, right-click it and go to properties. Even if you don't need to resize, it's a good idea to put the actual size in anyways. When the page loads, and it gets to an image with no height and width, the browser will have to load the image first so it can figure out how to load the text around it. If that image had a width and height on it, the browser will kinda make an imaginary box in that area, load the text so you can start reading, then come back to load the image after it's done with the rest of the page. Trick: You can enter only a width and the height will be set proportional to the original image.
6. Border around image. Change the 3 to any size you want.
There are also different styles of borders.
Check the Border section for other types of borders 7. Text Wrap.
Left align 2. Text will start above the image.
8. Space. You can add empty space around your text wrapped images. To set each side's space 9. Alt text. If you want an alternative piece of text to show up if your images don't work, add alt="text here to your image tag. People using IE will see the text in a tooltip box when they hover the mouse cursor over the image.
10. Title text. If you really like the tooltip box and you want it to be seen in other browsers too, add title="text here to the image tag as well. You can pretty much add a title to anything like links and tables.
11. Image hover. When mouse hovers over image it changes (opacity in this case). Try out other filters or properties.
12. Thumbnail image. These are just shrunken down screenies of what the lookup or whatever will look like. Screeniehelp has a tutorial for taking screenies if ya need. Resize images in MS Paint by going to Image, Resize/Skew, and change both the Horizontal and Vertical % to around 20.
13. Image map. You can't put your own image maps on lookups. But here are the codes anyways.
First, open the image in MS Paint. Then on notepad, give the map a name
There are three shapes you can use to make clickable; rectangle, polygon, and circle. In MS Paint, when you put the cursor over the image the cursor position (x number, y number) can be seen at the bottom of the window (if not, go to View and check off Status Bar). You'll use those numbers to plot your clickable regions.
For the rectangle, you just need the upper left coordinates first and then the lower right coordinates.
Then close the map code with the end tag. Whenever you use the image, include a link to the map in the code.
If for some reason you don't have MS Paint on your comp, you can go to http://www.draac.com/imagemap/mapper/ (go offsite at your own risk) and put in the URL of your image (it has to be uploaded somewhere) and click on your image to get the coordinates.
14. PNG images darker in IE. This web page has the solution and explains it. http://www.biorust.com/tutorials/detail/231/en/ Go offsite, download and unstall stuff at your own risk!
In the new layout, there are actually two backgrounds
#main background is white and body is grey by default. The only way to see the body background normally is if your screen resolution is higher than 1024 x 768
If you added a background code to your lookup and can't see it, try adding the code below. All my background codes already have this code added to it.
1. Solid color. Replace yellow with any color (example: blue) or RBG value (example: rgb(255,0,0)) or hex code (example: #0000FF) A bunch of hex colors can be found on this petpage niesean99449 and this one Rantimaru. If you need an exact color, you need an art program like Paint Shop Pro or Photoshop. If you happen to have one of those programs, have an image with the color saved to your computer, open it up, select the eyedropper tool and pick the color. You might have to tweak your color palette preferences to change it from decimal values to hex values. You can always go to the Avatars/Signatures board or Help board and ask for someone with the programs to get the colors for you.
2. Repeating background image. Replace the URL in parenthesis with your image's URL (go back to the Image section if you don't know how to get the URL of an image).
3. Non-Repeating, repeat-x or y background image. Replace the URL in parenthesis with your URL. Replace no-repeat with repeat-x (to make image repeat horizontally only) or repeat-y (to make image repeat vertically) if you wish. Replace center with top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, 20% 80%, or 100px 300px (the first number is the left position).
What size should my background be?. It first depends on the user's screen settings. Windows: Right-click the desktop, properties, setting and see what your screen setting is at. Mac: Hard drive, application, system pref, displays.
Neopoll
640x480 : 124,508
Neopet's pages are now designed for 1024 x 768 users (used to be 800 x 600).
If you're one of those people who need an exact number, I need to tell you that the actual viewable width and height of the background will differ from browser to browser plus other user setting might change things too.
On 800 x 600 resolution
Maximized browser window, visible background width
Full screen by pressing F11, visible background width
Height most likely differs in everyone's browsers. Everyone has different toolbar settings, some like the status bar, some don't, the menu bar in IE7 is hidden by default, some like having tabs, some don't, some have one layer Windows taskbar on bottom (I like two layers), some people move the taskbar to the side maybe, some people may auto hide the taskbar, just lots of stuff to mess with visible background height. The absolute max height I could see was 556px. That was on Windows XP with Firefox, normal max screen (not F11 full screen), no status bar, no special toolbar, no other tabs and auto hide Windows taskbar. In IE7, it was 520px. The F11 height in Firefox could be almost 600 if the status bar and nav bar are hidden with no tabs and in IE7 it is 600. If you're testing these numbers out yourself, lemme know if your numbers differ from mine ; )
On 1024 x 768 resolution
Maximized browser window, visible background width
Full screen by pressing F11, visible background width, probably..
How do I stretch my background to fit the whole page?. This code does not work in Internet Explorer. I would never use this code on Neopets, EVER! The code is here because everyone thinks there's some simple HTML/CSS background code to stretch images to fill the whole page, but there just isn't one. I found the code on a website (neomail me if you need the site) then tweaked it so it works on Neopets. Just replace the image URL with yours.
4. Fixed background. That image that stays in one place even when you scroll the page is a fixed background image. Replace no-repeat with repeat-x (to make image repeat horizontally) or repeat-y (to make image repeat vertically) Replace center with top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, 20% 80%, or 100px 300px (the first number is the left position).
5. Fixed background with background color. Replace anything you want in it.
6. Short version background code.
7. Both tiled background and fixed image. Set the #main background as the fixed background and set body background as repeat background. Width of stats has to be squeezed together for you to be able to see the main background. That's why the #content{width:600px} is there.
8. Some background samples.
Full page background info. They'd have to be at least 1020 width and 550 height to satisfy most people's screen resolution setings. They can steal alot of bandwidth from your image host (most free hosts give you a limit). They can take a long time to download. If you have an image smaller than 1024 x 768 and you enlarge it in an image program, the quality of the image will probably decrease as the size increases. Use big, high-quality images then shrink down whenever possible.
9. Remove background to all stat boxes.
10. Change background to all stat boxes. Replace background:pink with background:url(urlofimageinhere) if you want to use an image.
11. Change background to individual stat boxes.
12. Each stat box really has 3 backgrounds. Try out the code below yourself and see if it can be of any use to you in your layout.
13. Remove all stat box header background.
14. Change all stat box header background. Check Background section for more background properties (like if you want image backgrounds and stuff).
15. Change individual stat box header background. The first one doesn't need the #userinfo part.
1. Change default font color, font face and font size of whole page. Replace red with any color or hex code (example: #0000FF). A bunch of hex colors can be found on this petpage niesean99449 and this one Rantimaru. If you need an exact color, you need an art program like Paint Shop Pro or Photoshop. If you happen to have one of those programs, have an image with the color saved to your computer, open it up, select the eyedropper tool and pick the color. You might have to tweak your color palette preferences to change it from decimal values to hex values. You can always go to the Avatars/Signatures board or Help board and ask for someone with the programs to get the colors for you. By the way, this code doesn't change the colors for your links or navigation links. medText is for welcome link, td for almost everything else, #nst is for the time and .sf is for all the copyright stuff and event icon text.
2. Short version of above font code.
3. Change font of stat headings (User Info, Collection, Shop & Gallery, etc.).
4. Align stat heading to right or center.
5. Link font and color. By default there is no line under the links. If you did want underline, overline or line-through, add ;text-decoration:underline after the color (or use all three ;text-decoration: underline overline line-through)
6. Welcome link and navigation link font and color.
7. Welcome link font and color and navigation link font and color separate.
8. Justify paragraphs. This code makes your paragraph look straight and flush to the edge on both sides and not jagged. This code makes your paragraph look straight and flush to the edge on both sides and not jagged. This code makes your paragraph look straight and flush to the edge on both sides and not jagged.
9. Double space. To make it seem like your whole lookup was double-spaced, use this code.
Or to just make one paragraph double-spaced use this code.
10. Letter spacing. Add spacing between the letters for whole lookup.
11. Capitalize. Capitalize the first letter in every word for whole lookup.
12. Uppercase. Capitalize every letter in every word for whole lookup.
13. lowercase. lowercase every letter in every word for whole lookup.
15. Faded text. Visible only in Internet Explorer browser. This code will make all your bolded text faded. Change the color to whatever.
16. Two colors. This code tells all the table data, paragraph, body text and Neopets copyright information color to be green and all the words put in bold and that were already in bold in your lookup to be magenta. So, where is says User Lookup:, Name:, Last Spotted:, even the Male/Female will be magenta. Replace the color, size and font to whatever you want.
17. Change font color, size and face temporarily. If you have the whole lookup font color set to blue and you just wanted a few random words to be orange, use this code. You can delete size=3 and face=verdana if you just want to change the color.
18. Stop center. By default, all the stuff you type on your lookup will be centered. To stop that, use
19. Text anywhere. Very important info about position:absolute at #8 of Advanced section.
20. Text wrap. Like you want an image on the left side and you want text to wrap all around it or just on the right side or whatever. Check code #7 in the Image section.
21. Marquee. You're trying to put scrolling text that go across the page on your lookup?
Here are the codes anyways. You can use font code #16 to change the color of the text in the marquee. Try mixing around the attributes for custom effects.
Basic code.
Behavior. Replace alternate with slide to make text come out at one side and stop before it reaches the end. Slide works in Internet Explorer, but will just keep scrolling in Firefox.
Bgcolor. Set the background color of the text.
Height and width. Change width and height of area of scroll.
Direction. Right or left or up or down. For some reason, direction=right or left will not work in Firefox if the marquee is centered or aligned right.
Hspace and Vspace. Increase the amount of space around the marquee.
Loop . Repeats a number of times then disappear forever. Specific numbers of loop works in Internet Explorer, but will just keep looping in Firefox.
Scrollamount and Scrolldelay. Just setting only the scrollamount will change the speed of the text, but really scrollamount is how many pixels the text will move in the default amount of time. Using scrollamount and scrolldelay together tells the text to move a certain number of pixels in a delayed number of milliseconds (the bigger the number, the "jumpier" it seems).
Images and Links. You can add image and link codes in the marquee as well.
Marquee in Marquee. Figure this one out yourself : P
1. Regular link. Replace everything between the = and the greater-than sign with your URL. Replace Mystery Beach with your own text which will be clickable. You can't link to sites out of Neopets. Don't forget the end tag
2. Link opened in new window. The added target=_blank makes the link open in a new window. Don't forget the end tag
3. Image link opened in new window. Don't forget the end tag Note: the border=0 takes the border off image links.
4. Link to different part of page. These are called named anchors. Let's say you want someone to click on "Random Events" and it will take you to the random event screenies on your page. Put the first set of tags around your "Random Event" text or image.
In my old l00kuphelp layout, there was a "back to the top" button. Viewed with Firefox, you'll see a "back to top" image fixed to the left of the page. Here's the exact code for it.
I put it way down at the end of all my codes because it didn't work in IE. There's something about the "position:fixed" that IE doesn't like. All you'll see in IE is a regular image link. After each section on l00kuphelp, I had to put this..
It's visible only in IE because I hid it in all other browsers with the style="opacity:.00 part.
5. Link to someone else's anchors. They have to have anchors already set up. Click on their link and look in the address bar to see their # name.
6. Link font and color. By default there is no line under the links. If you did want underline, overline or line-through, add ;text-decoration:underline after the color (or use all three ;text-decoration: underline overline line-through)
7. Welcome link and navigation link font and color.
8. Welcome link font and color and navigation link font and color separate.
9. Old text link navigation. If you plan on using this code on other pages, you have to put in http://www.neopets.com before each link url or else the links might not work.
10. New text link navigation. If you plan on using this code on other pages, you have to put in http://www.neopets.com before each link url or else the links might not work.
11. Text link sidebar. Change font, background color (you can even put in background image, check Background section to figure out how), border and hover stuff (paragraph after this code). Very important info about position:absolute at #8 of Advanced section. Here's a sample of what it will look like.
Create a Neopet
Pet Central
etc...
There are so many other things you can add to the link hover code. Here are a few.
Upside down. (Internet Explorer browser only) Add filter:flipv();height:0; after one of the ; in the hover code.
12. CSS rollovers. When the mouse goes over an image link, the picture will change.
First, you should make the image for the rollover. It's one image with both the regular and hover image combined. The trick is, the CSS code shows only the top part of the image first. Then, when the mouse is hovering over the image, only the bottom part will be visible. Both the top and bottom part of the image have to be the same dimensions. The tricky part of making the image for me was aligning it so that elements of the top and bottom image are perfectly "on top" of each other on the rollover.
This is basically how you would make the image in MS Paint. First, make the top image.
Second, go to Image, Attributes..., double the height number then OK.
Last, put in the bottom image, save and upload.
Now you gotta code it. Here's the first part of the code. Set the width to the actual width and set the height to half of the actual height. Then change the url of the background and you're done with the first part of the code.
If you have more than one rollover, make a copy of the same code and just change the rollover1's (there are three of them).
You'll need a more condensed code if you plan on replacing all the sidebar links with rollovers. Check code #16 below.
13. Add old default sidebar. Sweetest_angel_ever petpage has a tutorial to help you create your own sidebar in MS Paint. Replace http://www.boomspeed.com/mach3000/lh_sdbarlayout.gif with your image's URL, but leave the background URL http://images.neopets.com/transparent_spacer.gif as is (it's needed so the code can work in IE). Very important info about position:absolute at #8 of Advanced section.
14. Add sidebar 2. Use your own images as links in a position:absolute table. If you want your sidebar to have bigger clickable custom buttons, you'll be using this code. Note: the log out.phtml will always get filtered out (just like it does in the code below..) Also, if you plan on using this code on other pages, you have to put in http://www.neopets.com before each link url or else the links might not won't work. Very important info about position:absolute at #8 of Advanced section.
15. Add sidebar 3. Put image links anywhere on the page. By doing it this way, you can be very creative with the link placement. I did the create and petcen, you do the rest. Reminder: the log out link won't work. Very important info about position:absolute at #8 of Advanced section.
16. Add sidebar 4. Rollover links. The code is modified to save lots of space. Once you learn how to do one rollover the regular way, you should be able to understand the code below. Also, if you plan on using this code on other pages, you have to put in http://www.neopets.com before each link url or else the links might not work. Very important info about position:absolute at #8 of Advanced section.
Test the above code out if you want. Add #content{padding-left:200px} to the CSS to move the stats out of the way.
17. Add sidebar 5. Rollover sidebar. You'll have to test the below code on your lookup to see what it looks like. Make two sidebars: one that people will see first and the other of what the rollover will look like. Sweetest_angel_ever has a guide on how to make a sidebar in MS Paint.
18. Dropdown links. Wouldn't it be cool to make your own dropdown lists like in the defaut navigation? You could, but it wouldn't work in IE. For it to work in IE, you'd need to add a bit of -disallowed_word- and Neopets somehow disabled it for the content section (like I couldn't even "link" to the script that's already on the page). Google for "CSS drop down" if you still wanna learn how to make them.
Put your cursor over the sample boxes to see your cursor change. If I put a ? next to the All, it means the cursor will work in IE and Firefox, but maybe not all other browsers. . The last column of cursors will look like a regular text cursor in Safari (thanks _storm_87_ for the info!).
1. Change cursor for whole page.
2. Custom cursor whole page. There's lots of custom cursors on the web. Use your favorite web search engine to find them. Visit offsite pages at own risk.
3. Link hover cursor.
4. Couple of words.
5. Paragraph.
6. Table cell.
7. Make your own cursors. This site has a free program to make you cursors Go offsite, download and install at your own risk http://www.conware.org/products/index.php Find IconArt, click the download link then scroll all the way down and click one of the links in the Download now section. You might have to download runtimes from here http://www.conware-pro.com/runtimes/ but maybe not. Have fun learning how to use it! After you've made your cursor, you have to upload it to a host that accepts .cur or .ani files (it might be hard to find a free one.. I don't even know any at the moment)
1. Scrollbar code. Scrollbar colors are only visible to Internet Explorer users. A bunch of hex colors can be found on this petpage niesean99449 and this one Rantimaru If you need an exact color, you need an art program like Paint Shop Pro or Photoshop. If you happen to have one of those programs, have an image with the color saved to your computer, open it up, select the eyedropper tool and pick the color. You might have to tweak your color palette preferences to change it from decimal values to hex values. You can always go to the Avatars/Signatures board or Help board and ask for someone with the programs to get the colors for you.
2. Scrollbar code 2. Thanks kaurilover for telling me about this code! Use this code if you don't need to tweak all of the colors in the scrollbar. Change color to whatever.
Don't use "aaaaaaaaa.............." to test, use "testing testing testing..." instead. It has spaces and gives it a chance to start new lines of text.
3. Regular scrollbox. Change width and height. Scrollbar will show up when the content inside surpasses the height of the div
4. Text in a scrollbox anywhere. Very important info about position:absolute at #8 of Advanced section.
Scrollbox tip: Take off the overflow:auto part to make the scrollbox not scroll.
5. Transparent scrollbar. Scrollbar colors and filters are only visible to Internet Explorer users. You can't make the main scrollbar on the right transparent, but you can make your other scrollbox's scrollbar transparent. The chroma filter makes any specified color transparent (#3366FF in this case).
6. Lookup in a scrollbox 1. This code will put your all the stat boxes in a scrollbox anywhere you want. Anything after this code will go in the scrollbox. Very important info about position:absolute at #8 of Advanced section.
.
7. Lookup in a scrollbox 2. Another weird way to code it. Very important info about position:absolute at #8 of Advanced section.
First put this piece of code at the very very beginning of all your codes.
Then put this code at the very end. Anything after this code will go in the scrollbox too. The #content thing removes the User Lookup: guest
8. Lookup in a scrollbox 3. This code will put your all the content modules in a scrollbox anywhere you want plus the copyright info will be in the there too.
First put this piece of code at the very very beginning of all your codes.
Then put this code at the very end. Anything after this code will go in the scrollbox too. The #content thing removes the User Lookup: guest, footer and footerNifty is also removed. Very important info about position:absolute at #8 of Advanced section.
9. Put the scrollbar on the left side of the scrollbox. Add the direction:rtl to the div tag. This code will make your punctuation marks appear on the left side too. (rtl stands for right to left)
10. Add background image to scrollbox. Add style="background-image:url(http://www.boomspeed.com/mach3000/lh_button.gif) to the div tag. You can add more background properties like found in the Background section.
11. Make scrollbox and everything in it transparent. Add ;filter:alpha(opacity=75);opacity:.75 to you div style.
12. Codes in a text box. You can't put text area or xmp tags on your lookup. If you really need to put codes for people to see on your lookup, type it up in an image program, save, upload and put it on your lookup. The code below works on petpages. In guilds or on an offsite web page, delete the _ so there's no space between text and area.
There are SO many ways to code the new layout. I'll show you what I think is best. If you're already using codes from other sites, there's a slight chance that my codes won't work with theirs.
To remove stuff, you can use a {visibility:hidden} or {display:none}. The difference between them is, visibility:hidden will make it seem like the object is still there but invisible and display:none will delete the object entirely and shift everything else up or left to take its place. If you ever use visibility:hidden in your code, make sure it's on a separate line from style or else you'll get a "You have more opening style tags than closing style tags" error.
Site themes notes. You can unlock some site themes if you didn't know already. Here's a petpage with all of them smoking_fish's theme guide. Lots of things you need to take note of. The default navigation link image color is black, but on the Maraquan theme, it's white. The default theme has an orange bottom border under the header and the Maraquan theme has no border at all.
The stats header color, link color, and dropdown box style are set to match the theme. People with themes visiting you lookup will see different colors here and there unless you set them yourself in your lookup code. Recheck your lookup with other themes if possible.
1. Remove the white background (and border) that covers body background. Check Background section for explanation.
2. Remove the entire header. Use this code if you want to remove the default header background, events, welcome links, navigation, time and header bottom border.
3. Remove the header background, but keep events, welcome links, navigation and time still visible. You can increase #content padding number to move stat stuff down. Change top and left numbers to move it around. Very important info about position:relative at #8 of Advanced section.
4. Replace the header with other stuff still visible. The default header width is 1000px and height is 77px. Make your header image as high as you wish. Set the height the same as your image's height. If your height was bigger than 77px, change padding number to move the events, welcome links, nav and time up or down.
5. Replace the header, but with navigation image invisible. Use this code if you like the navigation but want to replace the images with the images on the header. Make your header image as high as you wish. Set the height the same as your image's height. If your height was bigger than 77px, change padding number to move the events, welcome links, invisible nav and time up or down. To just move the navigation, edit the #navigation height. Kinda stick with the template provided below. Take note that Neopets positioned their text perfectly so that the drop down list is right under the text, not touching it at all.
6. Replace the header, but remove some or all of other stuff. Make your header image as high as you wish. Set the height the same as your image's height. In the code below, the event, welcome links, nav and time are removed (in that order). Delete whatever part of the code to keep it on the lookup. Change padding number if you have anything left you want to move up or down.
7. Change just navigation image link color. This will set the "my account, pet central, etc." color to black or white so that people with different site themes will see the color you want them to see. Choose either black or white.
8. Change navigation box colors and stuff. The first part is link color, ul.dropdown stuff is box style and the last stuff is hover color.
9. Remove header bottom border.
10. Change style of header bottom border. Check the Border section for more styles.
11. Remove the User Lookup: guest Easy way. Put this code at the very beginning. The code hides all bold text and images in the content area, then makes all bold text and images after
The weird way. There's a chance that this code will mess up your current lookup code if you already have one. Put this code at the very beginning of your codes.
Under that, put in this code to remove the text and recreate another div and table for the content.
12. Change content width to squeeze stat boxes together a little bit.
13. Super squeeze stats together. Content and main width shrunk, Neoshop and Neohome modules removed, trophy images shrunk, footer removed and header must be removed or put in position:absolute. This codes was tweaked for a user with four pets and full racks of trophies. Feel free to experiment with the numbers.
14. Remove borders around stat boxes.
15. Change borders around stat boxes. contentModule is the outer border. Check Border section for more border styles.
16. Remove background to all stat boxes.
17. Change background to all stat boxes. Check Background section for more background properties (like if you want image backgrounds and stuff).
18. Change background to individual stat boxes.
19. Each stat box really has 3 backgrounds. Try out the code below yourself and see if it can be of any use to you in your layout.
20. Remove all stat box header background.
21. Change all stat box header background. Check Background section for more background properties (like if you want image backgrounds and stuff).
22. Change individual stat box header background. The first one doesn't need the #userinfo part.
23. Center User Info stuff.
24. Blinkies. This code won't work in Firefox until it can properly display inline-block. Replace your name with: . (everytime you update your codes, you'll have to reset the name) Change the width and height numbers to match the width and height of your image and change the URL. Blinkixi 's petpage has tutorials on making your own blinkies.
25. Custom shield. Neopets rule: "You can cover your shield! It's quite nice to cover it with something that matches the theme of your lookup. And your join date is available in your text stats, so covering the shield does not hide how long you've been on the site. However, you CANNOT cover this shield with a different, official Neopian shield. If your current shield says "2 Years," you can't cover it with the 5 year shield." The dimensions of the Neopets shields are width=100 and height=150. Replace my URL with yours.
26. Remove the line above the Icons in User Info. Thanks swordfire82 for the tip!
27. Custom shield and custom user info icons. Shield and icons need to be all in one image in the right spots. The dimensions of the Neopets shields are width=100 and height=150; icons are 40px by 40px. Here's a sample layout, but everyone's will be different depending on the user info box size.
28. Replace collections image with your own. All icons must be drawn on one image just like the code above.
29. Replace shop keeper image with your own.
30. Replace pets' background image with your own. Special thanks to hailydelacruz for the code! Only one background for all the pets. Pet must be customized without a background. To remove customized background, go to the customise page, check off Applied radial button in Items View, click on the background in Icon View and press remove button in Selected Item window. Image size should be 150px x 150px.
31. Replace pets' background image with your own 2. Each background must be on one image and all pets' "real" background must be removed.
Tip. Use code 30 but set the background to black (use.. background:black ..instead of background:url(http://www.boomspeed.com/mach3000/lh_button.gif)) Then screenie it. Crop the image to just the Neopets module without the header and use that as a template for code 31.
32. Remove horizonal rule lines.
33. Change color and height and length of hr line. Keep the color and bg color the same, one works for IE and the other for FF.
34. Change the hr into a border. Keep the border-width and height the same.
35. Remove white stuff from around your images. Chroma filter, works only in IE.
36. Remove space under trophies. If you don't have any trophies at all, there'll be a big space under the Lutari Talisman. Reduce the empty space with this code.
37. "CSS image code" to put an image anywhere. Very important info about position:absolute at #8 of Advanced section.
38. Move stats if you didn't use the weird method in code #11 to remove User Lookup: guest
39. Move stats if you did use the weird method in code #11 to remove User Lookup: guest
40. Move stats with copyright right under. Use this code if you wanna move the stats and have the copyright info to move with it.
First put this piece of code at the very, very beginning of all your codes.
Then put this code at the very end. Anything after this code will move with the stats. Position the stats by changing the top and left numbers (increasing the top number will move the box down and increasing the left number will move it to the right) and feel free to change the width. The #content thing removes the User Lookup: guest, footer and footerNifty is also removed. Very important info about position:absolute at #8 of Advanced section.
41. Move each content module individually. You can even change the widths if you want, but there's no way to change the heights. Increase #content height to move footer down more if you still have it. Very important info about position:absolute at #8 of Advanced section.
42. Remove Shop & Gallery and Neohome Module.
43. Remove the entire footer (bottom part).
44. Remove just footer background.
45. Replace footer background. The default footer width is 1000px and height is 160px. Increase padding number if your footer is higher than 160px.
46. Align center the copyright text.
47. Remove the search stuff.
48. Remove the spiffy footer image.
49. Remove invisible footer link that's usually on the Neopets logo.
50. Remove the Privacy Policy .... Help links.
1. Remove borders around stat boxes.
2. Change borders around stat boxes. contentModule is the outer border. Check Border section for more border styles.
3. Remove background to all stat boxes.
4. Change background to all stat boxes. Check Background section for more background properties (like if you want image backgrounds and stuff).
5. Change background to individual stat boxes.
6. Each stat box really has 3 backgrounds. Try out the code below yourself and see if it can be of any use to you in your layout.
7. Remove all stat box header background.
8. Change all stat box header background. Check Background section for more background properties (like if you want image backgrounds and stuff).
9. Change individual stat box header background. The first one doesn't need the #userinfo part.
10. Change content width to squeeze stat boxes together.
11. Table hover. Firefox only. Try out the code below. Info table will have red background. When hovered over, background will turn pink. You can even do td:hover. Play around with the code ; )
12. Add matching tables. Add tables that will match your stat tables. Add !important after 300px manually (Neopets won't let me add it to the code..)
13. Add about me table. Huge code. It looks plain now, but it's coded to match your stat tables. The colors will show up when you put it on your lookup. Go here to learn how to add avatars and items.
About Me
text text text text text text text text text text text
14. Put tables side-by-side. By default, tables always start on a new line. To get two of them side-by-side, either align=left the first table and the table after it will go to the right of it (if necessary, use
Why would anyone want to use tables? We use tables to organize things. For example, instead of having a column of similar stuff, we could put them in a table so they all fit on one page like so..
You can organize it any way you want.
I had to put tables inside tables for this one.
At first, coding tables looked like a nightmare to me and they became one of the things I learned last. Now, I can't image how I ever lived without them. I'll try my best to teach you how to code tables as painlessly as possible. I recommend that you practice these codes on your petpage or somewhere so you can get the hang of it. Also, here's the site that taught me how to code tables http://www.w3schools.com/html/html_tables.asp They have a "What You See Is What You Get" thing where you code the table or make minor changes on the left, press a button and it will automatically show what you coded on the right side of the page.
Most basic table code in the world. There's no border on it so you can't really see the table.
Now add a border.
Now a table with a border, with two cells. Add as many
But.. if you have many cells, you should put it in a table row code thing. Just add the
Now, if you want two rows or more... do this.
That's basically all there is to making a table. Once you've mastered making rows and cells, then the next step is to add neat stuff like background color, widths and heights.
Things you can add to the table tag.
Align. If align is added to the table tag, all the stuff around the table will wrap around it exactly like text wrap in the Image section.
Cellpadding. All the stuff in the cells will be 5 pixels away from all the walls of the cell. Usually, a cellpadding of 0 is desired.
Cellspacing. The cells will be separated by a width of 2 pixels. Usually, a cellspacing of 0 is desired.
Width. Change to any % or any number in pixel units.
Height. Change to any % or any number in pixel units.
Border. Table will have a border 7 pixels thick. Leave out the border attribute and the table will have no border.
Border color. There's 2 ways to change the border color. Simple way..
Check the Border section for more border styles.
Bgcolor. Entire table will have a blue background. If no bgcolor is specified, then the table's background will be transparent.
Background. Table will have a tiled image as a background.
Or you can do it this way.
Things you can change in td tag. You can change the attributes of each individual cell. Width, height, bgcolor and background will work for the td tag too. Example:
Align. Align right makes all the text and stuff in this table's cell start on the right side. You can replace right with center and if you leave out the align attribute, it will be left aligned by default.
You can also do
and all the table cells in that row will be aligned right.
Valign. All the stuff in the cells will be aligned to the top. Replace top with bottom, center valign is default.
Colspan. Table cells can span over as many cells as u specify.
Rowspan. Works like colspan but will span across rows. You can even use colspan and rowspan together in one table.
Table in table. You can put a table in a table's cell. 1. Lookup in a blog. This code will put your all the stat boxes in a scrollbox anywhere you want. Anything after this code will go in the scrollbox. Very important info about position:absolute at #8 of Advanced section.
1. Lookup in a blog 2. Another weird way to code it. First, put this piece of code at the very very beginning of all your codes.
Last, put this code at the very end. Anything after this code will go in the scrollbox too. The #content thing removes the User Lookup: guest. Very important info about position:absolute at #8 of Advanced section.
2. Lookup in a blog 3. Use this code if you want the copyright stuff in the scrollbox too. First put this piece of code at the very very beginning of all your codes.
Then put the blog image on your lookup with the HTML code or CSS code (or background code if you know how).
Last, put this code at the very end. Anything after this code will go in the scrollbox too. The User Lookup: guest, footer background and footerNifty is also removed. Very important info about position:absolute at #8 of Advanced section.
Blog tutorials on Bl0gHelp if you need.
In the new layout the !important part is sometimes needed to make the filters work. Thanks swordfire82 for the tip!
Filters can only be seen with Internet Explorer browser. Replace filter:chroma(color=white) with the filter code found below the image examples.
1. Filter effect on all stat box and everything inside. This works for Firefox too.
2. Filter effect on just one module's image(s). I'm just listing them all. Change whichever you want.
3. Filter effect on just one image. You gotta add the !important after the (color=white) in this code manually because Neopets says it's an invaid word when I add it to the code on the petpage. You don't need to add the !important if you use this on a petpage.
4. Filter effect on text.
Filter codes. Under all the images will be the filter code I used. Copy the code and paste it in place of the filter:chroma(color=white) bit of text from the above codes.
Alpha filter
Here's an alpha filter code that works in both IE and Firefox (thanks vulpes_panthera!)
Blur filter
Chroma filter
Dropshadow filter
Fliph filter
Flipv filter
Glow filter
Gray filter
Invert filter
Mask filter
Shadow filter
Wave filter
Xray filter
5. Two or more filters combined. Put in the first filter code you want. Then put the next filter code right after it BUT delete the filter: on it (same for third filter). See examples below.
6. Glitter effect around images. You have to have some kind of animated background. Try out the code below (animated background is included).
Having music on your web pages is Totally illegal. There are three main types of music files: wav (cd quality with words), mp3 (compressed version of wav) and mid (instruments only). Having wavs and mp3s ripped directly off CDs on your webpage is of course illegal. MIDI files of songs are also illegal. Here's a webpage that explains it http://goinside.com/98/12/copyr.html Unless you have written permission from the person(s) who owns the copyrights to the song, don't put music on your page. Sampling, or having just 30 seconds of a song, is a myth and is illegal. Let's say you did make your own music or want to use Neopet's mp3s. At the moment, only Internet Explorer users will be able to hear music on lookups. Just like images, you need the address or URL of the music. Loop can be set to infinite or a specific number.
This is a solid border
This is a double border
This is a groove border
This is a dotted border
This is a dashed border
This is an inset border
This is an outset border
This is a ridge border
1. Remove borders aorund info boxes.
2. Change borders around info boxes. contentModule is the outer border.
3. Border around all images.
4. Border around whole lookup. Put the border codes in your background code.
5. Different border on each side.
6. Border around one specific paragraph, a couple of words, table or table cell. Replace p with font (for few words), table or td.
7. Border around text with width. Let's say you used code 6 above and wanted to add a width to it. If you add ;width:200px after the border-width: 5, the paragraph will then have a width of 200px, but only in IE. For other browsers, add ;display:block to it too.
Visitor counter.
Go off-site at your own risk!
Boingdragon.com Go to http://boingdragon.com/ Click on Web Counters in the side bar and Register for a Counter account! After that's done, Log into your account, click on Add A New Counter at the top, click on the counter you like, edit it and hit Create Counter. Then you'll be taken to your Counter Listing page. Click on the Install link next to your counter and copy the entire IMG SR C code and paste it in your lookup code. Also at boingdragon, you can "make" your own counters. Really, you set the background image and they put a number over it. Select the Overlay option at the end when selecting a counter type.
http://shops.nphero.com/settings has counters too (thanks moranmorgan!) but they only work in shops.
Goal counters
To edit your pet lookup, go to My Account, Control Panel then Neopet Description. You can't position:absolute anything on pet lookups. Pet lookups aren't as customizable as regular lookups.
Replace entire top background. If you have a special site theme, you can see that the whole top has seemingly one background. It's actually the banner background and header background put together. Note: Premium members don't see/have the banner background.
1. Replace banner background. Default is 1000 width and height HAS to be 94 and can't be changed.
2. Replace header background. Default is 1000 width and 77 height. Make your header image as high as you wish. Set the height the same as your image's height. If your height is bigger than 77px, change padding number to move the events, welcome links, nav and time up or down.
3. Remove borders around content modules.
4. Change borders around content modules. contentModule is the outer border. Check border section for more border styles.
5. Remove background to all content modules.
6. Change background to all content modules. Check background section for more background properties (like if you want image backgrounds and stuff).
7. Change background to individual content modules. Can't.
8. Remove all content module header background.
9. Change all content module header background. Check Background section for more background properties (like if you want image backgrounds and stuff).
10. Change individual content module header background. Can't. Just three.
11. Change stat width. Normally, the code would shrink the Description box too, but the added div will stretch it back out.
12. Move stats to the right. Change padding number. If you need to move stats down, use padding-top
13. Remove sidebar.
14. Remove sidebar background.
15. Remove sidebar border. Table is the inner border, module is the outer.
16. Remove active pet and neofriend table background.
17. Change color of background behind neofriend username.
18. Change size of your pet's image.
This section shows you how to keep your codes clean and short.
1. You only need one and one . Instead of..
You save 90 characters by doing it this way..
2. Combine selectors that have the same properties and values. Selectors are separated by commas and sets of properties and values are separated by semicolons.
Selector{Property:Value}
.hdr{display:none}
You can save 26 character by doing this..
.hdr,#m,#n,#mb,.tt{display:none}
3. Like to keep adding new codes and don't bother to delete old codes? Check for duplicate codes.
The table{background:none} can be deleted because it's already paired up with the td {background:none}. At the bottom there are two td{width:auto}. Deleting those saved 36 characters.
There are two p table selectors. They have width:500 in common so one can be deleted. Since both have different properties, they can be combined to look like this (save 16 characters)..
p table {border-width:1;border-color:orange;border-style:solid;width:500;
There are two td,p,body,.sf selectors. They each have the font-size: and font-family: property but with different values. In CSS, the last value override all others.
td,p,body,.sf{color:green;font-size:7pt;font-family:garamond}
The first font code makes everything green, 7pt and garamond. After adding the second font code, the font is still green, but now with 8pt and verdana. The two codes should be combined to look like (save 49 characters)..
4. In CSS there are sometimes short versions of a code. You can tell when you see a bunch of properties with the same beginning like font-weight, font-size, font-family, background-color, background-image, and etc.
td,p,body,.sf{color:green;font-size:8pt;font-family:verdana}
body{
p table {border-width:1;border-color:orange;border-style:solid;width:500;
5. CSS id and class. This stuff lets you add style to specific.. stuff. Example:
The first table cell will have regular text and the second table cell will have red, garamond, 15pt text. Id and classes are kinda the same, but kinda different. I'll let you look up this stuff on the internet yourself. : P Just search for.. css id class.
Tip: I've seen some people add "nonsense" classes or ids to their CSS codes. If a person steals a lookup with "nonsense" code in it and leaves it there because he or she doesn't know how to read code, then the original owner of the lookup can catch the culprit red handed by just pointing out the bit of "nonsense" code.
Another way to add style to specific stuff is to use inline style. Example:
This code does exactly what the previous code does.
6. Style. First, my style that I'll stick to..
If some 1337 coder from TNT wrote the above code, it would most likely look like this..
Much more readable, easy to edit, lots more spaces and after every set of property and value is a semicolon. If you check lookup spotlight winners and one looks really, really good, there's a high possibility their CSS is like above. : P
7. To quote or not to quote. Let's say you want to add styles to an image or anything. If you put spaces in between the : and the attribute or between the ; and the next property, you have to use quotes. You don't need the quotes if you didn't use spaces.
or this is fine too..
8. Position:absolute or position:relative on stuff?
If you want a centered lookup, you'll probably need to use position:relative on your images or divs or whatever. If you need something in position:absolute, be sure to position:absolute #main or body. Below are animated images that show what users with resolutions higher than 1024 x 768 will see when they stretch their browser window wider then back to what a person at 1024 x 768 resolution will noramlly see.
9. Stuff hiding behind other stuff?
When something is hiding behind something else and you wanna bring it up to the top layer, add z-index:3 to it somehow.
Inline example:
CSS example:
Very Important. Always feel free to play around with the codes. Add stuff, remove stuff or change stuff in the codes then test it. If it didn't work, maybe you're using the wrong properties name (background-attachment:, font-style:, border:, etc.), attributes (fixed; oblique; #00FF00; italic; 200; etc.) or maybe you just made a little mistake and forgot a " : ; } or maybe you're missing the end tags 9. Code too big? No room for text? Make the text an image instead of actual text.
Common error messages.
1. Hang On! There's a new rule!
You can only embed src files that end in: blah blah..
2. You must have an opening style tag first in order to match a closed style tag.
FAQS
1. "Code my layout or make lookup for me? Nope, that's why I made this petpage.
2. "Link to different part of page? Code 4, link section
3. "Code for copy & paste box? Question 13 at the beginning
4. "How to edit petpage? My Account, Control Panel, Edit Petpage
5. "Remove sidebar? Code 13, petlookup section
6. "Scrollbox has undesired horizontal bar? Don't use "aaaaaaaaa.............." to test, use "testing testing testing...", it has spaces and gives it a chance to start new lines of text.
7. "How to code blogs/guild layout? neopets.com/~Bl0ghelp. Do a 1 scrollbox blog as best as you can on a petpage, neomail me to check coding if needed
8. "Can't see background? Check background section for explanation
9. "img src problem? All .png need width & height now. check question 5 at beginning and intro of img section for more info.
10. "How to put avatar on lookup? Go here
11. "Quick Photobucket guide. Upload, copy the URL Link, type out the HTML image code, paste the URL in the image code, copy and paste the whole code to the "About Me" box.
12. "Remove or move copyright stuff in petpage? Delete all the < / div> at the end of the petpage so the copyright stuff can go in the scrollbox too or use this code to remove it.
13. "Can I use your codes and not have to give you credit or put your button on my page? Read the code stealing facts below. As long as you know exactly how each code works and can probably retype it blind-folded, then use the codes in my tutorials anyway you want.
Code stealing facts. I got this info from the Neopian Times editorial section issues 250 and 251.
Want to see how pages are coded? Right-click on the page somewhere and look for a View Source (or something similar) option or go to View in the browsers top menu and View Source from there. That's what I do to check for problems in people's coding.
Link back to this page. Need more help? Try the Help board on Neopets.
Things I would like to know before you neomail me about a coding problem.
1. What browser are you using?
I don't have a degree in programming or anything, I'm just learning this stuff from web sites found off of Google or from other petpages.
If you want to learn a more HTML, here's Neopet's guide to html http://www.neopets.com/help/html1.phtml Here's where I learned most HTML http://www.w3schools.com/html/default.asp Go to the homepage of w3schools and you can even learn CSS coding. For hands on training, help as many people as you can on the Help board.
One column repeat background with top.
http://www.boomspeed.com/mach3000/lh_1coltop.gif
http://www.boomspeed.com/mach3000/lh_1colbg.gif
http://www.boomspeed.com/mach3000/lh_1colbgpic.gif
One column repeat background and top with box for info.
http://www.boomspeed.com/mach3000/lh_1coltop2.gif
http://www.boomspeed.com/mach3000/lh_1colbg.gif
http://www.boomspeed.com/mach3000/lh_1colbgpic.gif
One column repeat background and top with info box and position text navigation anywhere.
http://www.boomspeed.com/mach3000/lh_1coltop.gif
http://www.boomspeed.com/mach3000/lh_1colbg.gif
http://www.boomspeed.com/mach3000/lh_1colbgpic.gif
After you make the images in the art program, you gotta upload the images to an image host (instruction on how to do that are in the Image section).
One column repeat background and top with default navigation dropdown links anywhere.
http://www.boomspeed.com/mach3000/lh_1coltop3.gif
http://www.boomspeed.com/mach3000/lh_1colbg.gif
http://www.boomspeed.com/mach3000/lh_1colbgpic.gif
http://www.boomspeed.com/mach3000/lh_header_navtemplate.gif
One column repeat background and top with as many scrollboxes as you want and position text navigation anywhere.
http://www.boomspeed.com/mach3000/lh_1coltop4.gif
http://www.boomspeed.com/mach3000/lh_1colbg.gif
http://www.boomspeed.com/mach3000/lh_1colbgpic.gif
Two column repeat background and top with info box and position text navigation anywhere.
http://www.boomspeed.com/mach3000/lh_2coltop.gif
http://www.boomspeed.com/mach3000/lh_2colbg.gif
Avatar
Favorite
Newest
Wanted
Info
NeoFriend: Open
Guild Invite: Closed
Battledome: Closed
Wishlist
Goals
#info td{text-align:center}
h1{margin:0px;font-size:15pt;line-height:15px}
Avatar
Info
Wishlist
Newest
Wanted
NeoFriend: Open
Guild Invite: Closed
Battledome: Closed
Goals
My Account
Pet Central
Explore
Games
Boards
Shops
News
Video
#nav{
position:absolute;top:450px;left:28px;
width:353px;height:120px;z-index:2;
}
#nav td{text-align:center;background:pink;padding:0px}
Basics
What you want
How to code it
Bold text
Italic text
Underlined text
Strike through textThis one is tricky. You usually do this..
..but Neopets blocks the code on lookups for some reason. You have to use CSS codes instead. If you use the CSS code, you won't be able to use the normal italics tag. Tutorial continued in the Font section
Superscript text
Subscript text
By default, everything on your lookup is already centered. To uncenter everything, put..
..somewhere before your text or images.
Break or..
Start a new lineanything after
will start on the next line.
use
Paragraph
Image
2x original size
Original size
1/2 original size
Original size
1/2 original size
1/3 original size
Original size
1.5x original size
Top align. Text will start along the top of the image. Text will go back under the image when the next line is reached or until you put a
somewhere in your text.
Middle align. Text will start along the middle of the image. Text will go back under the image when the next line is reached or until you put a
somewhere in your text.
Bottom align. Text will start along the bottom of the image by default. Text will go back under the image when the next line is reached or until you put a
somewhere in your text.
Left align. Text will start along the top of the image. Text will go back under the image when the there are enough lines to surpass the image's height or until you put a
somewhere in your text.
Image will appear in the new line after the image code was inserted. Text will go back under the image when the there are enough lines to surpass the image's height or until you put a
somewhere in your text.
Right align. Text will start along the top of the image. Text will go back under the image when the there are enough lines to surpass the image's height or until you put a
somewhere in your text.
Left and Right align. Text will start along the top between the images. Text will go back under the image when the there are enough lines to surpass either image's height or until you put a
or
somewhere in your text.
Change the numbers to any size you want.
individually, you'll have to use inline style. It goes.. margin: top# right# bottom# left#.
For the polygon, you need all the points and the browser will automatically connect the last and first coordinates. You'll need to add quotes to the coords if you use this.
For the circle, you need the coordinates of the center first then the radius (distance between center of circle to the edge of circle) of the circle.
Background
1280 x 800
What resolution is your monitor set at? (Closed)
800x600 : 586,617
1024x768 : 300,930
1152x864 : 97,934
1280x1024 : 212,836
Firefox: 785px
IE7: 780px
Firefox: 785px
IE7: 785px
Firefox: 1008px
IE7: 1004px
Firefox: 1008px
IE7: 1008px
(I didn't actually test this one, just my guess based on 800 x 600 test : P )
Seamless tile
Regular tile
Use code #2 for backgrounds like these.
Original height is 1, but I made it 5 so you can see it. This image was created by cutting off the last row of pixels from the "top" image http://www.boomspeed.com/mach3000/halo_top.jpg (way too big to put on this page, but check it out) The shaded area is where the stats will go and the background will repeat behind and under it for the rest of the stats. Use code this code for something like that. I've seen people have a small column for info and a wide column for stats.
If this image was really wide and had columns for stats and info added, use the above code. For this exact image, I'd just use code #2.
Font
14. Strike through text. Normally done like so..
but Neopets doesn't let you use those tags on your lookup. To go around that problem, we use the italics tag and tweak it with CSS codes so it's not italic and make it have a line through it. Add the below CSS code into your lookup and add the italics tag to text.
22. Headings
First, set up the properties for the header. Change color size and font face. Increase space between heading text and bottom border by increasing padding-bottom number. Change border style (check Border section for other border types) Increase space between border line and text underneath by increasing margin-bottom number. Make the border go through the header text by adding line-height: .5 after the last ;
Then use this code where ever.
Link
Then, all the way down in your random event section, put the other set of tags right before the header of that section (nothing needs to be between the tags).
The a href will take you to the a name part. Use any word you want. If you click on your link and it doesn't take you anywhere, it's most likely that the word you used wasn't exactly the same in each section.
Background color. Add background-color:pink; after one of the ; in the hover code.
Cursor. Add cursor: s-resize; after one of the ; in the hover code.
Uppercase. Add text-transform: uppercase; after one of the ; in the hover code.
Shift a lil bit. Add position:relative; top:1; left:1; after one of the ; in the hover code.
Opacity change. Add filter:alpha(opacity=25);opacity:.25; after one of the ; in the hover code.
(this is one image, I just removed all the white in the art program)Example of a miss-aligned image
Second part of the code. Add this code where ever you want the rollover to appear and replace my shop's URL with any URL you want.
Regular sidebar
Rollover sidebarCursor
Icon
Sample
Browser
Icon
Sample
Browser
Icon
Sample
Browser
cursor: default
All
cursor: e-resize
All
cursor: progress
All?
cursor: hand
IE
cursor: ne-resize
All
cursor: all-scroll
All?
cursor: pointer
All?
cursor: nw-resize
All
cursor: col-resize
All?
cursor: crosshair
All
cursor: n-resize
All
cursor: row-resize
All?
cursor: text
All
cursor: se-resize
All
cursor: no-drop
IE
cursor: wait
All
cursor: sw-resize
All
cursor: not-allowed
All?
cursor: help
All
cursor: s-resize
All
cursor: vertical-text
All?
cursor: move
All
cursor: w-resize
All
cursor: url(urlofcursor), default
All?
Scrollbar & Scrollbox
Remove/Cover up Stuff
http://www.boomspeed.com/mach3000/lh_header_navtemplate.gif
. Two ways to do this.
That code closes the div and table that the User Lookup: guest and the rest of the lookup is supposed to be in.
http://www.boomspeed.com/mach3000/lh_shield.gif
Font: Coolvetica 20pt
http://www.boomspeed.com/mach3000/lh_shield_icon_avatar.gif
http://www.boomspeed.com/mach3000/lh_pet_bg.jpg
. Increase padding-left number to move it more to the right. Increase padding-top number to move it down more.
. Increase padding-left number to move it more to the right. Increase padding-top number to move it down more.
http://images.neopets.com/themes/000_def_f65b1/footer_bg.png
Table
Avatar
Info
Wishlist
Newest
Wanted
NeoFriend: Open
Guild Invite: Closed
Battledome: Closed
Goals
after second table code to start a new paragraph under the tables) or just put the two tables in a table.
This
Is
A
Small
Column
Of
Stuff
This
Is
A
Small
Column
Of
Stuff
This
Is
A
Small
Column
Of
StuffCode How it looks
stuff goes here Code How it looks
stuff goes here
as you want and they'll just keep adding on to the right of the last box.
Code How it looks
stuff goes here the second added box
before the row and
at the end of the row.
Code How it looks
stuff goes here stuff goes here stuff goes here stuff goes here Code How it looks
1st box in first row 2nd box in first row
1st box in second row 2nd box in second row
and other way..
Cell 1 Cell 2 Cell 3 Cell 4
td colspan=2
Cell 1
Cell 2
td colspan=3
Cell 1
Cell 2
Cell 3
td rowspan=2 colspan=2 width=200
Cell 1
Cell 2
Cell 3
td rowspan=2 width=130
Cell 4
Cell 5
Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Just a bunch of text in this cell. If you want, you can put another table in here too.
Blog
Then put the blog image on your lookup with the HTML code or CSS code (or background code if you know how).
Filters
Original image
filter:alpha(opacity=80)
Opacity can be 100-0 (0 will be completely see through)
filter:alpha(opacity=80, style=1)
There are 4 styles of the alpha filter. Style=0 is default so I didn't even add it in the first one. Style=1 is a linear one. By default, it fades from left to right.
filter:alpha(opacity=100, finishopacity=50, style=1)
You can add a different finishopacity if you want.
filter:alpha(opacity=100, finishopacity=0, style=1, startx=150, starty=150, finishx=0, finishy=0)
You can change where it fades from and to.
filter:alpha(opacity=80, style=2)
Style=2 is a circular fade.
filter:alpha(opacity=100, finishopacity=50, style=2)
You can add a different finishopacity if you want.
filter:alpha(Opacity=80, Style=3)
Style=3 is a rectangular fade.
filter:alpha(opacity=100, finishopacity=50, style=3)
You can add a different finish opacity if you want.
filter:blur
filter:blur(add=0)
Add=1 was default. Add=0 makes it so the original image wasn't added to the blur.
filter:blur(add=1, direction=0)
Direction is expressed in degrees and you can only use increments of 45. 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 270=left, 315=top left
filter:blur(add=1, direction=180, strength=30)
Strength=5 is default
filter:chroma(color=white)
People use this to try and remove the white around the image but.. it also removes any pure white from eyes, hair, teeth or where ever. Using this code alone will sometimes leave the image with jagged "white" edges or unwanted holes. Combine the chroma and glow filter to make it look better, details at end.
filter:dropshadow(color=#E8AD68)
Set the color of dropshadow. Works best when the image has some tranparencies in it already (or combine with chroma filter, details at end)
filter:dropshadow(color=#E8AD68, offx=-30, offy=30)
Positive offx numbers move shadow to right and negative numbers move shadow left. Positive offy numbers move shadow down and negative numbers move shadow up.
filter:fliph
filter:flipv
filter:glow(color=green, strength=21)
Works best on images with transparencies (or combine with chroma filter, details at end)
filter:gray
filter:invert
filter:mask(color=blue)
Works best on images with transparencies (or combine with chroma filter, details at end)
filter:shadow(color=#9BAD71, direction=225)
Direction is expressed in degrees and you can only use increments of 45. 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 270=left, 315=top left
filter:wave(add=1, freq=5, lightstrength=50, phase=100, strength=30)
Figure out this one yourself :P Add can be 0 or 1, freq=3 is default, lightstrength and phase can be 100-0, strength can be any number I think.
filter:xray
Just chroma filter.
filter:chroma(color=white)
Chroma filter with glow filter.
filter:chroma(color=white) glow(color=#fffffe)
filter:chroma(color=white) dropshadow(color=#E8AD68)
filter:chroma(color=white) glow(color=green, strength=21)
filter:chroma(color=white) mask(color=blue)Music
Border
Counter
Counter started on July 13, 2008
Pet Lookup
Advanced
td,p,body,.sf{color:green;font-size:8pt;font-family:garamond}
.hdr{display:none}
table, td{background:none}
#m,#n,#mb{display:none}
.tt{display:none}
table{background:none}
td,p,body,.sf{font-size:8pt;font-family:verdana}
a:link{text-decoration:none;font:8pt verdana;color:green}
a:visited{text-decoration:none;font:8pt verdana;color:blue}
a:hover{text-decoration:underline overline;font:8pt verdana;color:purple}
body{
background-color:#FFFFFF;
background-image:url(http://www.boomspeed.com/mach3000/lh_button.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right
}
p table {border-width: 1; border-color: orange; border-style: solid;width:500}
td{width:auto}
p table{background:white;width:500;filter:alpha(opacity=50);opacity:.50}
td{width:auto}
td,p,body,.sf{color:green;font-size:8pt;font-family:garamond}
.hdr{display:none}
table, td{background:none}
#m,#n,#mb{display:none}
.tt{display:none}
table{background:none}
td,p,body,.sf{font-size:8pt;font-family:verdana}
a:link{text-decoration:none;font:8pt verdana;color:green}
a:visited{text-decoration:none;font:8pt verdana;color:blue}
a:hover{text-decoration:underline overline;font:8pt verdana;color:purple}
body{
background-color:#FFFFFF;
background-image:url(http://www.boomspeed.com/mach3000/lh_button.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right
}
p table {border-width: 1; border-color: orange; border-style: solid;width:500}
td{width:auto}
p table{background:white;width:500;filter:alpha(opacity=50);opacity:.50}
td{width:auto}
Selector{Property:Value;Property:Value;Property:Value}
Selector,Selector{Property:Value}
#m,#n,#mb{display:none}
.tt{display:none}
td,p,body,.sf{color:green;font-size:7pt;font-family:garamond}
.hdr,#m,#n,#mb,.tt{display:none}
table, td{background:none}
table{background:none}
td,p,body,.sf{font-size:8pt;font-family:verdana}
a:link{text-decoration:none;font:8pt verdana;color:green}
a:visited{text-decoration:none;font:8pt verdana;color:blue}
a:hover{text-decoration:underline overline;font:8pt verdana;color:purple}
body{
background-color:#FFFFFF;
background-image:url(http://www.boomspeed.com/mach3000/lh_button.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right
}
p table {border-width: 1; border-color: orange; border-style: solid;width:500}
td{width:auto}
p table{background:white;width:500;filter:alpha(opacity=50);opacity:.50}
td{width:auto}
background:white;filter:alpha(opacity=50);opacity:.50}
.hdr,#m,#n,#mb,.tt{display:none}
table, td{background:none}
table{background:none}
td,p,body,.sf{font-size:8pt;font-family:verdana}
...
td,p,body,.sf{color:green;font-size:8pt;font-family:verdana}
Change to (save 17 characters)..td,p, body,.sf{color:green;font:8pt verdana}
background-color:#FFFFFF;
background-image:url(http://www.boomspeed.com/mach3000/lh_button.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right
}
Change to (save 88 characters)..
body{background: #FFFFFF url(urlinhere) no-repeat fixed bottom right}
background:white;filter:alpha(opacity=50);opacity:.50}
Change to (save 31 characters)..
p table {border: 1px solid orange;width:500;
background:white;filter:alpha(opacity=50);opacity:.50}
td,p, body,.sf{color:green;font:8pt verdana}
.hdr,#m,#n,#mb,.tt{display:none}
table, td{background:none}
a:link{text-decoration:none;font:8pt verdana;color:green}
a:visited{text-decoration:none;font:8pt verdana;color:blue}
a:hover{text-decoration:underline overline;font:8pt verdana;color:purple}
body{background: #ffffff url(http://www.boomspeed.com/mach3000/lh_button.gif) no-repeat fixed bottom right}
p table {border: 1px solid orange;width:500;background:white;filter:alpha(opacity=50);opacity:.50}
td{width:auto}
Invisible table with 200 height and a regular image under it.
Invisible table with 200 height and image is set at position:absoute;left:30px;top:100px
Invisible table with 200 height and image is set at position:relative;left:-395px;top:-200px. You'll probably use negative numbers to get the image where you want it to be. Take note of the space under the invisible table where the image is supposed to be. You can kinda fix the extra space by adding.. display:block;margin-bottom:-100px; ..and I only see like a 10px difference between FF and IE (lemme know if you know a better way to fix it)
Invisible table with 200 height, position:relative image and body or #main is set to position:absolute with a code like this..
#banner{top:190px;left:35px;position:absolute;z-index:3}
FAQs 'n Stuff
If you used an image host that lets you create folders for your images, make sure there isn't a space in the folder name like.. "lookup stuff" ..instead rename it or whatever to.. "lookup_stuff". If you check the URL and find a %20 somewhere, that's where the space is too.
There seems to be a debate going on in the chat boards about whether or not Lookup code "stealing" is a warnable or freezable offence. So could you clear this up once and for all? Can you be frozen for taking someone's coding (but using your own graphics)? What if it's only basic coding? Or if someone uses someone else's coding to get the basics down and then changes it to their liking? Please clear this up so we know. Thanks. ~psychokittie25
As most people are aware, stealing someone else's content is NOT allowed, and this is no different with code and layouts. There is a big difference between breaking apart another user's code to learn new things and then coding that yourself for your lookup and blatantly stealing that code and replacing the graphics. The former is fine. The latter is not. If you feel your code has been stolen, report it using the theft form and someone will look into the matter and determine if it really is theft. There are many different ways to code the same thing, and two people can come up with similar ideas, but it's quite obvious when one person has outright stolen from another.Last week you talked about how taking someone else's code and putting in your own graphics was stealing. A lot of people ask other people to help them for their shop, guild, etc. What if what you get is someone else's code but new graphics? Would you get frozen? ~writingkid
Well, if the original creator helps you by giving their permission to use their content, there is no problem. ;) Generally, though, this is not the case. Simply replacing the graphics is still stealing the code someone else worked hard to create, and that is not allowed. Typically, the creator of the code should first Neomail you to ask you to remove it. If you do not, and a monitor views the report and determines that you are, in fact, taking someone else's code without permission, then yes. You can be warned or frozen.
2. Have you checked your page in other browsers?
3. What page is the problem on (lookup, shop, which petpage, pet lookup, guild)?
4. Please leave coding error/what you've tried on the page
5. If you got an error message, and couldn't update the page, put your code in notepad, screenie it and put it on a petpage so I can see
6. What is the problem?
7. What is it supposed to look like? Have examples I can see?
Les caractères, logos et noms NEOPETS et toutes les appellations qui y sont liées
sont des marques déposées de Neopets, Inc., © 1999-2009.
® denotes Reg. US Pat. & TM Office. Tous droits réservés.
Politique de Confidentialité | Astuces Sécurité | Contactez-nous
A Propos de Neopets | Plaquette de Presse
Utiliser ce site implique que tu acceptes les Termes et Conditions