introduction

This page is free to use. You are not required to give credit back at any point. Feel free to use this guide for anything you choose. If you are searching for something in particular but are unsure of what its called please consult me via neomail.
This guide was written entirely by whisp_will with the use of various guide for the neopets coding and reference from w3schools. Feel free to book mark this page if it helped you and also feel free to send me a neomail with requests on what you would like to see in the future, or anything you need help with. I'm on daily so don't be shy. Also I have plenty of talented guild members willing to help, so check us out at MBT.

f.a.q

How do I bypass the css filter?

How do I create a div that shows raw codes?

How do I change my cursor on neopets?

What do you mean by custom properties?

How do I create anchor links?

How do I remove the border around a linked image?

What are hex codes?

Where do I edit my user lookup?

Where do I edit my pets lookup?

Where do I edit my pets pet page?

Coming Soon

• Layout update (done)
• More detailed Lookup Help (done)
• More detailed Petpage Help
• More detailed Shop Help
• More detailed Pet Lookup Help
• How to code a layout
• Advanced Hyperlinks and Images (done)
• Filter Help Update (done)
• Roll Over Images (done)
• Layouts that always stay centered
• Banners that span the page and stay put
• Side by Side divs without use of a table
• Drag and Drop codes on neo ((oh yes it is possible, I shall show you))

Link In

Neopets and Filters

Neopets has some very strong coding filters running throughout the site. This makes using normal codes relatively difficult, especially with its newest filter blocking position, margin, and various other necessary properties. However like a bucket with too many leaks, clever people have discovered ways around said filters. Now our worst fears as coders is that TNT will come up with a perfect filter. Though, lets hope they don't. Now onto the meat of this topic, what's blocked, why, and how to get around some of the filters.

Topic 1, What's blocked on Neo:
• Curse words of any kinds
• Any talk over a pg rating
• Request or discussion of the "cough" word (hint for you special people: *********)
• Outside links (though I don't see the point, their site is already polluted with advertisements leading to various sites with who knows what virus's)
• Various tid bits of coding including css, java, php, forms, anything other then the basics (yet another pondering...)

Topic 2, Loop holes:
No, I'm not going to tell you how to bypass banned things #1-4, but I will help you bypass annoying #5. That is the coding filters. Now all of the following loop holes are allowed and you wont get your account iced for using them. Anything not here, well your on your own.

Positioning Filters
Main problem filters is the blocking of the word "position" in your style tags.
Now this makes things very annoying for coders because this is one of the main tags we use to position things. Without it, well... things would get interesting. However there are are simple solutions:

In order to get positioning tags to work on neopets simply move the position tag to the element itself rather than in the style.

Font Filters
The usage of tags and are no longer in use and no longer function you can replace them with:

It's all rather wordy now, thankfully bold and italic are still fully functional.

Music Filters
In the Distant past people were allowed to put up music and sounds on their pages, however neopets no long allows this. As of right now there is no working bypass to play music. Both bgsound and audio no long work as functioning tags. Why were they removed? For one they proved annoying in most cases, and secondly music only played on IE.


defining tags

All of the following tags are where you place your CSS and other information. Your CSS refers to your coding. You cannot place codes where ever you wish on a page, it just doesn't work like that. It has to be within the following tags. The main one you will be using is the style tag, the other 2 you can simply ignore for now until you become a more proficient coder.
*tip: when coding anything, whether it be very simple and short, or very long and complex, save it to notepad or something on your computer. That way if you mess it up, or your internet decides to die and delete all your hard work, you can relax knowing you had a backup file*

defines style information for a web page
Contains elements such as text, hyperlinks, images, tables, lists, etc
Defines information about the document, use to place scripts and meta information

basic tags

These define basic aspects of text such as bold, italic, or underlines. They can be used with or without a custom tag.
•The first line defines what can be placed within style tags and applies to the whole document
•The second line can be used without defining tags, though using custom tags can add a new property to the element These are independent tags
•Properties of the element will not appear in the text, with or without custom properties, unless in between independent tags

example of text: bold
example of text: italic
example of text: underline

defines a paragraph, applies space around the element

starts
or
adds a new line

hyperlinks

Hyperlinks or links is a way of "linking" one page to another via url. They can be used to link to anything with an address on the internet.
EX: web pages, pictures, videos, etc

Hyperlinks are highly customizable, though to get the more substantial effects some skill is needed.

basic tag for a hyperlink, belongs within style tags and applies to all links on a page.
standard html to display a hyperlink
EX: whisp_will
names an element, useful for anchoring
•view anchor link section
defines custom properties for a regular hyperlink
changes the properties of a hyperlink that has been clicked
defines custom properties when a hyperlink is hovered over, or moused over
changes the properties of a hyperlink that is currently being used

images

The following codes are for displaying images, along with adding effects such as links or hover effects.
Images are also highly customizable.

this alters all images on a page
standard html for displaying and image, ex:
if an image doesn't load it provides alternative text, ex:
broken image to → ack! the image didn't load!
easy way to add a description to an image, hover for ex:
changes the properties of an image when hovered over (please note this may not work with all browsers, much like various other image filters I decided not to list)

*tip: you can string together links and images to create a crackable image! However it will leave a border around your picture. But removing it is simple, just add border=0 like I did below*


Code:

div

A div is a text box, its where you place your text if you want it visible and orderly. Div can be confsing to use unless you understand CSS well. In the hands of someone who truely understands, div's become a corner stone of coding.

style tag for a div, this applies to every div on your page
standard code for placing a div on your page
This is a div that shows the raw coding of whatever you write in it. Treat it just like a div. (this one works on neopets ONLY)
allows the customization of a single div, this will apply only to one div
a naming property, will only alter divs claiming the same name (you may only use a name once! more then one element in the page can claim a name, but you cannot have two of the same name's in your style tags. That means you cannot have two #name1's, its has to be #name1 and #name2)
a div claiming a name, note the id=
shows a classification, only applies to div's claiming the same class (not as effective as id)
a div claiming the class of an element


This is an example of a div, with a few custom properties.

this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div

Code:

table

A table is a text box using cells that are placed in rows or columns. How many rows or columns are up to you, tables are useful for keeping things organized.

style tag for a table, this applies to every table on your page
standard code for placing a table on your page
changes all rows in every table on a given page
standard tags for placing a new row within a table
*must be placed between table tags*
changes all columns in every table on a given page
standard tags for placing a new column within a row
*must be placed between tr tags*
allows the customization of a single table, this will apply only to one table
*table can be changed to td or tr as well*
a naming property, will only alter tables claiming the same name
*can be applied to td or tr as well*
a table claiming a name, note the id=
shows a classification, only applies to tables's claiming the same class (not as effective as id)
a table claiming the class of an element
*can be applied to td or tr as well*


Here is a working example of a table:

1 2
3 4

Code:


custom properties

Anything and everything you maybe need to fill into everything that says {custom properties}
Please note, these will only work within a defined tag

changes the text color
changes the font face
changes the font size (use #px or #pt to change size)
underlines everything in a given element
Other Options: none, overline, line-through, blink
(to remove an element already in place, change to text-decoration: none)
makes everything in a given element bold
Other Options: none, bolder, lighter
(to remove an element already in place, change to font-weight: normal)
forces everything in an element to uppercase
Other Options: none, lowercase, capitalize
aligns the text in a given element
Other Options: center, left, top, bottom
increases or decreases the amount of space between words
spaces out individual letters in a given element
changes the space between lines in an element
changes the space between lines in an element
add a border to a given element
Alternative: border-left, border-right, border-bottom, border-top
Other Options: (replace solid) none, dashed, dotted, double, groove, ridge, inset, outset
Defines how an objext appears such as: home
Other Options: none, inline, inline-block, inline-table, list-item, run-in
tells an element how far away from the top of the browser to be
tells an element how far away from the left of the browser to be
tells an element how far away from the right of the browser to be
tells an element how far away from the bottom of the browser to be
tells where to position an element, absolute means it will go where ever on a page reguardless of other elements
Other Options: relative, static, fixed
*must be linked with a top, left, right, or bottom command! best to use more then one*
tells how much space will be around the outside of an element
Alternative: margin-left, margin-right, margin-bottom, margin-top
tells how much space will be around the inside of an element
Alternative: padding-left, padding-right, padding-bottom, padding-top

Header Codes

Codes for altering/removing the header of neopets. The following codes will work on guilds, user looups, shops, and galleries. Basically anywhere you can code that has the Neopets header.
Normally these are used to hide things.

Edit "Welcome, username | NP: # | Logout"
Edit the clock
Edit header background
Edit the the event icon, ex: new neomail envelope
Edit header links
Edit the drop down menu

Footer Codes

Codes for altering/removing the footer of neopets. The following codes will work on guilds, user looups, shops, and galleries. Basically anywhere you can code that has the Neopets footer.
Normally these are used to hide things.

Edit Footer background
Remove footer links
Edit languages and search
Remove Neopets Link
Remove Copyright
Remove advertisement

Sidebar Codes

Codes for altering/removing the sidebar of neopets. The following codes will work on guilds, user looups, shops, and galleries. Basically anywhere you can code that has the Neopets sidebar.
Normally these are used to hide things.

Edit side bar search
Remove neofriends
Edit active pet information
Edit active neopet image
Remove active pet box entirely
Remove side bar headers

Guild Removal Codes

Here is a list of guild removal codes to remove any unfavorable elements.

Remove guild name and neighbourhood
Remove Guild Home | Guild Help | My Guild
Remove guild Logo
Remove guild navigation
Remove header
Remove sidebar
Remove Footer

User Lookup Removal

General:
Remove header
Remove sidebar
Remove Footer
Remove image banner
Remove Nickelodeon banner
User Info Box:
Remove User Information box all together
Remove title of User Info Box
Remove Trades, Auctions, Wishlist, Neomail, and Neofriend
Remove shield
Collections Box:
Remove Collection box all together
Remove title of your Collection Box
Remove collection box images
Shop and gallery
Remove shop and gallery box all together
Remove title of shop and gallery Box
Remove the shop keepers
Neopets:
Remove Neopets box all together
Remove title of Neopets Box
Remove the Neopets images
Remove the horizontal lines in the Neopets box
next page

Lookup Removal Continued

Neohome:
Remove the Neohome box all together
Remove title of the Neohome Box
Remove the image of your Neohome
Remove the link to your Neohome
Games & Trophies:
Remove User Trophie box all together
Remove title of Trophie Box
Remove bold face fonts in Trohpie Box
Remove # of Games Played in Trohpies box
Remove images in Trohpie Box
previous page

User Lookup Codes

Neopets requires a few extra steps when it comes to coding user lookups. For one, you don't have free rein. That means you can't just post codes willy nilly and hope they work. No, instead your basically toying with the coding already in place. Sure you can add your own elements but mostly it's just editing theirs.
So here is a listing of all the code's you'll need to edit your user lookup.

*please make sure you've mastered the basics before moving on to this*

Information Boxes: (all the little boxes holding your info)

Edit User Information box
Edit your collection box
Edit user shop and gallery box
Edit your neohome box
Edit the box containing your neopets
Edit your trophies box
General Editing: (makes all your boxes uniform)
Change the background of your user lookup
Alter the position of neopets standard content
Edit the boxes in general, all the backgrounds and all the borders for all your boxes.
Edit the headers off all your boxes for every section.
Edit the boxes in general, all the backgrounds and all the fonts for all yoru boxes.
Change the link color of Neopets standard content.
Miscellaneous: (extra tid bits)
Edit the standard neopets shield for your own shield
Edit user neopets images
Edit user trophie images

Pet Lookup Codes

For all the people who love their pets so dearly. This is a way to snazzy up their pet lookup. Instead of you having to go find someone else's CSS, why not make your own?
Here are the codes for your pets lookup.
Edit your Neopets Title, the content header
Change the size of your neopets portrait
Edit section background and font colors
Edit the statistics and description headers
Remove images (Fishing Skill image, Jobs Completed, Battledome image)
Remove the neomail and petpage icons
Remove the color, name and species of your pet
Change the color of pet's name, color, and species
Change the color of "gender"
Change the color of the text below your pets petpet
Remove image of your pets petpet
Remove your pets rating

Shop Codes

TNT has made it some what difficult to edit your shop due to the various scam people have pulled with clever coding. That means that your ability to edit your shop has been limited but is still very possible. Here are the codes available to use in your shop, please keep in mind the filters. If your not sure was is filtered, please view the filters section (:
Edit the border around items in your shop
Edit your shop keepers greeting
Edit your shops name
Remove shop name
Remove navigation
Remove shop keepers image
Remove shop keepers greeting

Petpage Codes

Seeing as a petpage is virtually blank there are very little neopets specific codes. I have provided said codes in addition to a basic layout for the sake of empty space removal.
Removing neopets banner
Changing Font Properties for Neopets Copyright
Changing Link Properties for Neopets Copyright
Removing the Neopets Copyright without removing save button
premade layout coming soon

Cursors

A cursor in text book definition is: indicator consisting of a movable spot of light (an icon) on a visual display; moving it allows the user to point to commands.

What all that really means it's the arrow you use to point and click on things. Now some times that arrow can get to be a little boring and maybe you'd like to spice things up a bit. Well creating a cursor isn't as simple as pasting a code onto a page, it will require a few more steps and a download of Jasc Animation Shop 3. (or anything else that can save an .ani or a .cur file)

Step 1: First we need to create a pixel or find and image to use. I've decided to make a pencil. This isn't a "how to pixel" tutorial so I wont be going over how I made it, just know you need a picture. Any picture will do but keep it under 30 pixels by 30 pixels (so 30x30px). If you don't know what a pixel is, go google it. Another thing, make sure it has an arrow or some kind of indicator in t he UPPER LEFT HAND corner. That way a person knows what your cursor is actually clicking on. Here's my image:

Step 2: After finding or creating an image, we need to find an image host that hosts a .cur or .ani file. I suggest googling this. I had no issue since I own my own site, so I hosted it myself. However most people don't have this luxury and have to out source. My apologies, I'm unaware of any hosts at this moment. My suggestion would be start up a site with x10hosting (it's free) and host them yourself. You also need to host a regular .gif file. (so in total you need to save your file twice, one as .ani or .cur and the other as .gif).

Step 3: Now to code it. As you probably guessed, creating a working cursor will require a unique code. Well look no further, I am supplying you with it. This code will work anywhere on neopets. Also please take notice that this code requires a .ani file and a .gif file!

Premade Cursor

For those that are having issues, I've also created a working cursor that you are free to use anywhere. Just make sure you link credit back to this guide ;3


Works Perfectly on: Firefox, Chrome, Opera, Safari
•Works on IE but size distorts!
Live example

Premade Anchor Links

This is due to the large amount of neomail I get requesting help with anchor links and layouts that seemingly have "multiple pages" even though it's all on one page. Like this guide for example, hitting a link sends you to "another page". When in actuality it's just sending you to a hidden div. Now I expect you to read up on hyperlinks and divs so I'm making this template as basic as possible. It's your job to make it look fancy, not mine. How will you learn if I do everything for you.

The code:


Live example of the code provided:

This is what div 1 says! ♥
This is what div 2 says! ♥
View Div 1 || View Div 2


If clicking those links made the top half of this page disappear click here to fix it

Hexidecimal Color Chart

Here is a list of web safe colors for those who do not have a graphics program. If you desire a custom color and have a graphics program such as photoshop, simply use the color changer and selected a color. The hex code should be provided.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Fancy Links

Here we attempt to replace boring and dull text based link such as this one with fancy ones like this one.
Please note most of this is for advanced users, in order to truly utilize this variant you must have knowledge of custom properties, what class claiming is, and the general ability to alter the appearance of and element.

For Beginners: Here is the simplest of all "fancy links", nothing more than a background attached to a link and a font color change. This will give you a desired looked and is still easy to change without wordy css coding.


example

For Petpages/User Lookups/Pet Lookups

For Guilds

For Advanced Users: In addition to the basic frame work we will add a display function, borders, padding, text alignment, etc, along with a basic hover change. I'm using the links on this site as an example. This is everything needed to create a truly unique navigation that fits perfectly with your layout. This will require advanced coding knowledge in order to manipulate the pre-made code to your liking.


example

For Petpages/User Lookups/Pet Lookups

For Guilds

It's amazing how large the code segment is in order to achieve the most basic looking, but clean, "fancy links".
Whispy you have two different appearences of links on your page! How did you do that?
I used two different class codes lol. Nav and Nav2. YOu can have an infinite amount of different link styles on your page!


What if I wanted to use an image instead and have it change on hover?
Please view my rollover image section

Well that's all the help I can give, have add it!

Rollover Images

For those many people who want cool image effects but arent sure how to acquire them. Things such as image navigation where hovering over an image changes it to another. Or just making something look cool. This requires VERY advanced knowledge of all aspects of CSS. The reason being, there isn't actually a code that allows this function. Instead you must problem solve and play with the elements available.

For Advanced Users: We will be altering your common table or div inorder to get the desired affects. You cannot alter an image code to change into another image on neopets (to my knowledge at least). So instead we will use div or table backgrounds since we can change those with a hover function! I wont be going into too much depth with this but I will give you the basic frame work. Why I suggested very advanced users.



Hover over me!

The above example should start moving. If you want to use it for links etc you'll have to figure that part out yourself ;3
What fun would it be if I showed you how to do everything? Here's a hint, study the fancy links as well (those can have backgrounds.. huh...and they can be used with the hover function... hmmmmm)

Link back

Did you find what you needed? Why not link back and maybe you'll help someone else find what they're looking for. No need to ask just add me ;3

Listed at

Credit

Seeing as everything on this site was written/coded/drawn by me I'd like to pat myself on the back. however none of this would've been possible without the help of utter boredom! Yay for boredom! It some how compels average people to write ridiculous amounts of information with scrupulous details.

However I validated my information using a site called w3. It not only educates people on CSS but also every other coding script out there. It's very useful and I'd suggest it to anyone. Both CSS experts and people who still aren't sure what CSS is in the first place.
So yay! ♥




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions