Welcome to L00kupHelp

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. 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.

Copy this entire sentence and paste it anywhere in the box 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:

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. :)
Pet Lookups:

The correct stats of your Neopet(s) must be displayed. Again, you cannot retype them or cover them in any way.
Shop/Gallery:

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.
Guilds:

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.
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.

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.

How the image code should NOT look like. See if you can spot the mistakes.

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.

Premade info box
Premade links

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

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.

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).

Centered blog with two scrollbox and position text navigation anywhere.

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.

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.

</td></tr></table></div> <style> #stats{width:100px;height:263px;left:50px;top:180px;position:absolute;overflow:auto;z-index:2} .contentModule,.contentModuleTable{border:none} #usershop{display:none} #userneohome{display:none} #usertrophies img{width:50px;height:50px} #userneopets{width:600px} #main{width:1000px;position:relative;top:-130px} #info{width:245px;height:132px;left:160px;top:490px;position:absolute;overflow:auto;z-index:2} #nav{top:490px;left:68px;position:absolute;z-index:2} #box1{width:100px;height:132px;left:430px;top:490px;position:absolute;overflow:auto;z-index:2} #box2{width:100px;height:132px;left:550px;top:490px;position:absolute;overflow:auto;z-index:2} .contentModule{width:auto} body{background:white} #bg{position:absolute;top:130px;z-index:1} #userinfo table{border-top:0px !important} #main{border:none} #footer,#header,#content{display:none} </style> <img id="bg" src=http://www.boomspeed.com/mach3000/pxgrid.gif> <div id="info">about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff about me stuff</div> <div id="nav"> <a href=/myaccount.phtml>My Account</a> <br><a href=/petcentral.phtml>Pet Central</a> <br><a href=/explore.phtml>Explore</a> <br><a href=/games/arcade.phtml>Games</a> <br><a href=/neoboards/index.phtml>Boards</a> <br><a href=/objects.phtml>Shops</a> <br><a href=/nf.phtml>News</a> <br><a href=/video/index.phtml>Video</a> <br><a href=http://ncmall.neopets.com/mall/shop.phtml>NC Mall</a></div> <div id="box1">more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff</div> <div id="box2">even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff even more stuff</div> <div id="stats"><table>

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 <div id="box1">more stuff more stuff more stuff</div> Make as many as you need, just keep increasing the box number. Remove the overflow:auto; from the #box if you don't need it to scroll. 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).

One column repeat background with banner.

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 <div id="cme"> stuff in so that anything else that's bold or an image will be visible.

One column repeat background with top.

Top. Any width, any height. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_1coltop.gif

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.

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 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.

One column repeat background and top with box for info.

Top. Any width, any height with info box, any width and height. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_1coltop2.gif

http://www.boomspeed.com/mach3000/lh_1colbgpic.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 #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.

One column repeat background and top with info box and position text navigation anywhere.

Top. Any width, any height with info box, any width and height. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_1coltop.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.

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.
http://www.boomspeed.com/mach3000/lh_1coltop3.gif

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.

http://www.boomspeed.com/mach3000/lh_1colbg.gif

http://www.boomspeed.com/mach3000/lh_1colbgpic.gif

Here's what the default nav link template looks like..

http://www.boomspeed.com/mach3000/lh_header_navtemplate.gif

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.

One column repeat background and top with as many scrollboxes as you want and position text navigation anywhere.

Top. Any width, any height, any number of boxes with any width and height. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_1coltop4.gif

http://www.boomspeed.com/mach3000/lh_1colbgpic.gif

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 <div id="box1">more stuff more stuff more stuff</div> Make as many as you need, just keep increasing the box #. Remove the overflow:auto; from the #box if you don't need it to scroll. Change #stats left and top numbers to move stats around.

Two column repeat background and top with info box and position text navigation anywhere.

Top. Any width, any height with info box, any width and height. Tips on making shaded area on Bl0ghelp.
http://www.boomspeed.com/mach3000/lh_2coltop.gif

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.

Avatar

Favorite

Newest

Wanted

Info

Neomail: Open
NeoFriend: Open
Guild Invite: Closed
Battledome: Closed

About Me

text text text text text text text text text text text

Wishlist

Goals

goals goals goals goals goals goals goals goals goals goals

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}
#info td{text-align:center}
h1{margin:0px;font-size:15pt;line-height:15px}

And replace <div id="info">about me stuff about me stuff</div> with..

<div id="me"><div style="padding:3px"> <table> <tr> <td><h1>Avatar</h1></td> </tr> <tr><td><div align=center><table> <td><b>Favorite</b><br><img src=http://images.neopets.com/neoboards/avatars/default.gif></td> <td><b>Newest</b><br><img src=http://images.neopets.com/neoboards/avatars/default.gif></td> <td><b>Wanted</b><br><img src=http://images.neopets.com/neoboards/avatars/default.gif></td> </table></td></div></tr> <tr> <td><h1>Info</h1></td> </tr> <tr> <td> <div style="overflow:auto;width:320px;height:100px"> <b>Neomail:</b> Open<br> <b>NeoFriend:</b> Open<br> <b>Guild Invite:</b> Closed<br> <b>Battledome:</b> Closed <p><b>About Me</b> <p>text text text text text text text text text text text </div></td> </tr> <tr> <td><h1>Wishlist</h1></td> <tr> <td> <div style="overflow:auto;width:320px;height:100px"> <img src=http://images.neopets.com/items/babypaintbrush.gif> <img src=http://images.neopets.com/items/toy_faerie_princess.gif> <img src=http://images.neopets.com/items/bd_ghostkerchief_bomb.gif> </div> </td> </tr> <td><h1>Goals</h1></td> <tr> <td> <div style="overflow:auto;width:320px;height:100px"> goals goals goals goals goals goals goals goals goals goals </div></td> </tr> </table> </div></div>

Avatar Info Wishlist

Favorite

Newest

Wanted

Neomail: Open
NeoFriend: Open
Guild Invite: Closed
Battledome: Closed
About Me
text text text text text text text text text text text

Goals

goals goals goals goals goals goals goals goals goals goals

Replace #info{..lots of stuff inside..} with.. #info{position:absolute;left:30px;top:150px;z-index:2}

And replace <div id="info">about me stuff about me stuff</div> with..

<div id="info"> <table cellpadding="0" cellspacing="0" border="0" style="margin-top: 7px;"> <td width="500" valign="top"> <table cellpadding="3" cellspacing="0" border="0"> <tr> <td>Avatar</td> <td>Info</td> <td>Wishlist</td> </tr> <tr> <td align="center"> <div style="overflow:auto;width:100px;height:100px"> <b>Favorite</b><br> <img src=http://images.neopets.com/neoboards/avatars/default.gif><br> <b>Newest</b><br> <img src=http://images.neopets.com/neoboards/avatars/default.gif><br> <b>Wanted</b><br> <img src=http://images.neopets.com/neoboards/avatars/default.gif></div></td> <td align="center"> <div style="overflow:auto;width:300px;height:100px"> <b>Neomail:</b> Open<br> <b>NeoFriend:</b> Open<br> <b>Guild Invite:</b> Closed<br> <b>Battledome:</b> Closed <p><b>About Me</b> <p>text text text text text text text text text text text </div></td> <td align="center"> <div style="overflow:auto;width:100px;height:100px"> <img src=http://images.neopets.com/items/babypaintbrush.gif><br> <img src=http://images.neopets.com/items/toy_faerie_princess.gif><br> <img src=http://images.neopets.com/items/bd_ghostkerchief_bomb.gif><br></div></td> </tr> <tr> <td colspan=3> Goals</td> </tr> <tr> <td colspan=3 align="center"> <div> goals goals goals goals goals goals goals goals goals goals</div></td></tr></table></td></table></div>

Premade links. These codes are meant to be used with the layout codes.

My Account Pet Central

Explore Games

Boards Shops

News Video

Replace #nav{..lots of stuff inside..} with..
#nav{
position:absolute;top:450px;left:28px;
width:353px;height:120px;z-index:2;
}
#nav td{text-align:center;background:pink;padding:0px}

And replace <div id="nav">..links in here...</div> with..

<table id="nav" cellpadding="0" cellspacing="2"> <tr> <td><a href=/myaccount.phtml>My Account</a></td> <td><a href=/petcentral.phtml>Pet Central</a></td> </tr> <tr> <td><a href=/explore.phtml>Explore</a></td> <td><a href=/games/arcade.phtml>Games</a></td> </tr> <tr> <td><a href=/neoboards/index.phtml>Boards</a></td> <td><a href=/objects.phtml>Shops</a></td> </tr> <tr> <td><a href=/nf.phtml>News</a></td> <td><a href=/video/index.phtml>Video</a></td> </tr> <tr> <td><a href=/mall/index.phtml>NC Mall</a></td> <td><a href=/whatever>Whatever</a></td> </tr> </table>

Create a Neopet Pet Central Explore Games Neomail Shops Boards News Stuff Help Login

Replace #nav{..lots of stuff inside..} with..

#nav{position:absolute;top:44px;left:0px;background:none} #nav a,#nav a:visited{ font:8pt verdana;color: black;background-color:orange; border: 1px solid black; display:block; width:120px; text-align:center; margin-bottom:2px} #nav a:hover{font:8pt verdana;color:#ffffff}

And replace <div id="nav">..links in here...</div> with..

<div id="nav"> <a href=/addpet.phtml>Create a Neopet</a> <a href=/petcentral.phtml>Pet Central</a> <a href=/explore.phtml>Explore</a> <a href=/gameroom.phtml>Games</a> <a href=/neomessages.phtml>Neomail</a> <a href=/objects.phtml>Shops</a> <a href=/neoboards/index.phtml>Boards</a> <a href=/nf.phtml>News</a> <a href=/stuff.phtml>Stuff</a> <a href=/help.phtml>Help</a> <a href=/loginpage.phtml>Login</a> </div>

Basics

What you want How to code it

Bold text <b>text that needs to be bold</b>

Italic text <i>text that needs to be italic</i>

Underlined text <u>text that needs to be underlined</u>

~~Strike through text~~ This one is tricky. You usually do this..
<strike>text that needs a line through it</strike>
..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 <sup>text that needs to be shifted up</sup>

_Subscript text <sub>text that needs to be pushed down</sub>

Center stuff <div align=center>text or images that needs to be centered</div>
If that doesn't work, try.. <div style="text-align:center">stuff that needs to be centered</div>
By default, everything on your lookup is already centered. To uncenter everything, put..
<p align=left>
..somewhere before your text or images.

Break or..
Start a new line anything after <br> will start on the next line.
use <p> to make it seem like you started a new paragraph
like this. use as many <br><p><br><p> as you want

Paragraph
to do paragraphs correctly, use <p> at the start of the paragraph and </p> at the end
like this
and this, but you really don't need the </p>

Image

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.

Example of how enlarging or shrinking an image will look.

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

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.
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 <br> somewhere in your text.

<img src=http://images.neopets.com/pets/happy/uni.gif align="top">Add text here.

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 <br> somewhere in your text.

<img src=http://images.neopets.com/pets/happy/uni.gif align="middle">Add text here.

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 <br> somewhere in your text.

<img src=http://images.neopets.com/pets/happy/uni_blue_baby.gif>Add text here.

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 <br clear=left> somewhere in your text.

<img src=http://images.neopets.com/pets/happy/uni.gif align="left">Add text here.

Left align 2. Text will start above the image. 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 <br clear=left> somewhere in your text.

Add text here <img src=http://images.neopets.com/uni.gif align="left">Add text here.

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 <br clear=right> somewhere in your text.

<img src=http://images.neopets.com/pets/happy/uni_blue_baby.gif align="right">Add text here.

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 <br clear=left> <br clear=right> or <br clear="all"> somewhere in your text.

<img src=http://images.neopets.com/pets/happy/uni_blue_baby.gif align="left"><img src=http://images.neopets.com/pets/happy/uni_blue_baby.gif align="right" height=150>Add text here.

8. Space. You can add empty space around your text wrapped images. Change the numbers to any size you want.

Add text here.<img src=http://images.neopets.com/pets/happy/uni_blue_baby.gif align=right hspace=20 vspace=30>Add text here.

To set each side's space individually, you'll have to use inline style. It goes.. margin: top# right# bottom# left#.

Add text here.<img src=http://images.neopets.com/pets/happy/uni_blue_baby.gif align=left style="margin: 1px 2px 3px 4px">Add text here.

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.
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.

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!

Background

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

1280 x 800

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
What resolution is your monitor set at? (Closed)

640x480 : 124,508
800x600 : 586,617
1024x768 : 300,930
1152x864 : 97,934
1280x1024 : 212,836

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
Firefox: 785px
IE7: 780px

Full screen by pressing F11, visible background width
Firefox: 785px
IE7: 785px

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
Firefox: 1008px
IE7: 1004px

Full screen by pressing F11, visible background width, probably..
Firefox: 1008px
IE7: 1008px
(I didn't actually test this one, just my guess based on 800 x 600 test : P )

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.

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.

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.

Font

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.

<p align="justify"> paragraph goes in here </p>

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.

<p style="line-height:2"> paragraph here

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.

~~14. Strike through text~~. Normally done like so..

<strike> text to be crossed out here </strike>
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.

<i>text that needs a line through it</i>

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.

<font color=orange size=3 face=verdana>some text that needs to be changed</font>

18. Stop center. By default, all the stuff you type on your lookup will be centered. To stop that, use

<p align=left> put everything here </p>

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?
Marquee codes don't work on lookups..

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.

Welcome to L00kupHelp

<marquee>Welcome to L00kupHelp</marquee>

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.

L00K l00k LOOK look

Bgcolor. Set the background color of the text.

Where to get hex colors..

<marquee bgcolor=#00ffff>Where to get hex colors..</marquee>

Height and width. Change width and height of area of scroll.

hi hi hi hi

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.
stuff here
elevator go down the hole..

<marquee direction=right width=200 bgcolor=orange>stuff here</marquee> <marquee direction="down" height=100 width=150 bgcolor=red>elevator go down the hole..</marquee>

Hspace and Vspace. Increase the amount of space around the marquee.

<marquee direction=right width=200 hspace=30 vspace=50>stuff here</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.

<marquee loop=3>Welcome to L00kupHelp</marquee>

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).

What you want	How to code it
Bold text	<b>text that needs to be bold</b>
Italic text	<i>text that needs to be italic</i>
Underlined text	<u>text that needs to be underlined</u>
~~Strike through text~~	This one is tricky. You usually do this.. <strike>text that needs a line through it</strike> ..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	<sup>text that needs to be shifted up</sup>
_Subscript text	<sub>text that needs to be pushed down</sub>
Center stuff	<div align=center>text or images that needs to be centered</div> If that doesn't work, try.. <div style="text-align:center">stuff that needs to be centered</div> By default, everything on your lookup is already centered. To uncenter everything, put.. <p align=left> ..somewhere before your text or images.
Break or.. Start a new line	anything after <br> will start on the next line. use <p> to make it seem like you started a new paragraph like this. use as many <br><p><br><p> as you want
Paragraph	to do paragraphs correctly, use <p> at the start of the paragraph and </p> at the end like this and this, but you really don't need the </p>

Seamless tile	Regular tile

Use code #2 for backgrounds like these.