Using the Codes
I've designed my codes to be color coded for easier use. Any text written in this color is what you edit yourself, and any text in this color should be left alone.
Css Orders
In CSS you have to put the codes in a 3 step order. Step 1 is the beginning tag:
Step 2 is all the CSS codes. Step 3 is the ending tag:
It's very important that you have the beginning and ending tags, otherwise all the codes you put in between them won't work.
Adding Extra Codes
In my step-by-step guide I have basic codes (they offer no decorations) that you can copy and paste. If you want to add decorations, like underlined text, you need to know where to add the extra codes. At the end of each code there is a colon ';' and a right parentheses '}', this is where extra codes should be placed. Here's an example for adding an extra code to make a link become underlined when you hover over it:
Underlined Code: A:hover{color:red;text-decoration:underline;}
You'll notice that even though the extra code was added, the marks are at the end again, this is so you can add more codes.
Some codes can also use more then one attribute, which can be added by using a space. For example, if you want your link to change to underline as well as overline when you hover over it, the code would look like this.
Css Classes
Class codes are good to use if you want to position an image somewhere on your lookup, like a banner for instance.
Once you have this code done you have to add the code below after the ending tag in order for the image to show up:
The most important thing for class codes is the name. The first and second must code have the same name for it to work. You can create multiple class codes by using different names.
Also, the "b" in the second code stand for bold, you can also use u or i, but this only matters if you're using class codes for text.
Step One
Add the beginning tag:
Step Two
Add a background:
Step Three
Change the Main Font, Link, Visited, Active and Hover Properties:
Main Font Code
Link Code
Active Code
This code alters the look of the currently selected link, before it changes to visited:
Visited Code
This code is for what the links will llook like after they've been clicked on:
If your Link, Visited and Active codes have all the same attributes you can use the code below instead:
A{color:COLOR;font-family:FONT NAME;font-size:NUMBERpt;}
Hover Code
This code changes the way the link looks when you move your mouse over it:
Step Four
Change the Scrollbar Colors:
Step Five
Add the ending tag:
Background Codes
All of these codes go inside the parentheses in this code: body{ }
Font/Text Codes
All of these codes can be used with any of the following: td,p,body,a{ }, font{ }, A:link{ }, A:active{ }, A:visited{ }, A:hover{ }.
This code can also be used as a shortcut for text size and family:
example example example example
Hover Codes
These codes are best to use for the hover code: A:hover{ }. Although you can use them for other font codes.
Below are examples of borderstyles.
| dotted | dashed | solid | double |
| groove | ridge | inset | outset |
If you only want the border on one side of the link, such as the bottom, you can add '-bottom' to border. So it looks like this:
Scrollbar Colors
Scrollbar color code and a guide so you know what does what:
| body{scrollbar-face-color:COLOR;
scrollbar-arrow-color:COLOR; scrollbar-track-color:COLOR; scrollbar-shadow-color:COLOR; scrollbar-highlight-color:COLOR; scrollbar-3dlight-color:COLOR; scrollbar-darkshadow-color:COLOR;} |
Divider Bars
To change the width and color of the divider bars on your lookup use this code:
If you change "input, textarea" to "select, option" you can change the colors of the language dropdown menu.
To add a sheild you use the same code, just change "banner" to "sheild" (although you can use a different name if you want) in both codes.
Reference Sheet
A reference sheet is a .css file that allows you to use multiple css codes with only one code. This is great to use in guilds since Neopets limits your character usage.
First, open up notepad. You should find it by clicking "start> programs> accessories> notepad". This is where you're going to type all the CSS codes you want for your pets lookup. You don't have to add the beginning or ending tags when you do this.
When you finish all the coding click "file> save as..." Name the file whatever you want, but add ".css" to the end, so it looks like this: file.css. Do not save the file as a ".txt".
Now you have to upload the file to a webhost. Once that's done, you need to add the code below to the page you want to use the reference sheet on:
img" in the beginning of the code stands for image, which means this code will make any images on the page a certain opacity. An opacity of 100 mkes no change to the image and an opacity of 0 makes the image disappear completely.
The other numbers in the code alter where the fade ends and starts, mess around with all the numbers as much as you want to get a style you like.
Invert" can be replaced with "gray" or "xray". Here are examples of these two:
Text Filters
Even though I call these text filters they will work on images. Always keep the height:1; code when using filters on text, otherwise the filter won't work.
Chroma Filter
A chroma filter will remove any specified color from the page you have it on.
----- Basic HTML -----
Some Info
Since you can now use basic HTML in your lookups, I decided to add this.
HTML is pretty simple. Here, I have some basic codes you can use just about everywhere on Neopets. When you use HTML it's important to remember that with most codes you have a starting code, then your text, then an ending code. The ending is usually the first word or letter of the starting code with a / in front. For example, a font code:
Any text you put where it says "Blah blah" will be affected by the attributes you put in the font code, in this example, "Blah Blah" will become the color red.
You can also combine multiple HTMl Codes by wrapping them around each other. For example, if you want the text above to be bold, it would look like this:
You can also add more HTML Codes around the bold code, expirement with it.
Body Tag
This code can be used in your shop and in your lookup if you prefer.
Keep in mind that the link colors will only change the border color around your shop items.
Also, "fixed" keeps the background from scrolling, if you want the background to scroll with the page, then just remove: 'bgproperties="fixed"'.
Here are some various codes you can use for text. All of these can also be mixed together.
Some more basic text commands to alter where the text appears.
If you want an image to be a link, then instead of putting text, you would put the image code.
If you want the image to be aligned to the left of text you'll have to add 'align="left"' to the image code.. so it looks like this:
Divs can also be position on a specific spot on a page. Just add the position attribute to the CSS properties in the code:
Text Areas
Text Areas are you use if you want someone to copy and paste a code. Like if have a button for people to use to link a page you made.
----- Extras -----
NeoHTML
Here are some basics of NeoHTML that you can use for chatting on the Neoboards, or in your guild. NeoHTML goes in the boxes for your Chat Prefs. There are two spots, one is for what you type, and the last is for your siggy, which will appear everytime you post.
I'd like to add: when using the Shadow and Glow codes, make sure your font is readable. A lot of people I see make the glow or shadow the same color as their font and no one can read it. So if you're using a dark glow, use a light font to balance it so it's readable.
Here are some other NeoHTML codes you can use for chatting:
Now comes the fun part. You can combine all these codes to have your normal chat font looking spiffy. You can also add extra codes if you want your name to appear with every post. Here's an example:
If you want your font color to match your avatar, then you have to right click on the avatar, save it to your desktop and open up an art program like Jasc PSP (this is what I use). Then open up the avatar and choose the eyedropper tool and click on the color in the avatar you want. The color will show up in your color palette which is defaulted to show on the right side of PSP. Click on the color and a box will pop up. There should be a code near the bottom of the box that will look something like "#56hj9g". This is called a hex code for the color you chose. Just type that code into the color for your font and your done. Have fun expirementing with NeoHTML :)
Link Back
You can place these banners in your shop, lookup, or anywhere you want :)
- blocked form tag -no_html_comments-
- blocked form tag -no_html_comments-
- blocked form tag -no_html_comments-
Mail Me
That's it! There are many things you can do with CSS and HTML, so be sure to expirement with all the codes. If you see something you'd like added here or want to ask a question you can neomail me. But keep in mind I'll help... but only to a point. Some people constantly neomail me expecting me to give them every code I use. I have a help site for a reason. I'd greatly appreciate it if before you mailed me about a problem with your codes that you looked over them yourself and tried to figure out what went wrong. You can often learn from your mistakes. I'm not very inclined to help someone who doesn't put any effort into their design themself.
Also: I will not make lookups for you or guild layouts.. or anything. I have enough to do with my own things right now.
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office.
All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions