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.
.stuff{background-image:url(HTTP://YOU.COM/IMAGE.GIF);height:HEIGHT;width:WIDTH; position:absolute;top:NUMBER;left:NUMBER}
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:
<b class=stuff></b>
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{ }
background-color:COLOR;
background-image:url(HTTP://YOU.COM/IMAGE.JPG);
background-repeat:no-repeat; - no-repeat can also be changed to: repeat-x (repeats the image horizontally) or repeat-y (repeats the image vertically).
background-position:x y; - x is the horizontal position and y is the vertical postion. You can insert regular numbers for both of these letters. A position of0 0 is the top left corner of your screen. When using regular numbers it measures in pixels. The width of one pixel is the same as the width of this line -no_html_comments- |.
Besides regular numbers, you can also use percentages (like50% 50%) or you can use word commands: top, bottom, left, right or center. When you use word commands make sure you substitute the correct word for the correct position.
background-attachment:fixed; - This keeps the background from moving as you scroll.
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{ }.
color:COLOR;
font-family:FONT NAME; - There are thousands of font names you can use, but remember, the person viewing it can only see the font if they have it installed on their computer. Two fonts that everyone has are Arial and Verdana.
font-size:NUMBERpt; - Examples of font-size: 7pt, 8pt, 9pt, 10pt
text-decoration:underline; - underline can also be replaced with: overline or line-through.
font:bold; - bold can also be replaced with: italic, underline or normal. Using normal is good for getting rid of the bold words neopets uses on lookups, but you need to use a certain code: b{ }. The 'b' in the beginning stands for bold, so whatever codes you put inside will only work on bolded words.
This code can also be used as a shortcut for text size and family:
font:SIZEpt FONTNAME;
line-height:NUMBERpt; - The number in this code depends on the size of your font. If you're using a small font, you'll want a smaller line-height, the example below is using 4pt height:
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.
background-color:COLOR; - Example.
background:url(HTTP://YOU.COM/IMAGE.JPG); - Example.
border:NUMBERpx BORDERSTYLE COLOR; - Example.
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:
border-bottom:NUMBERpx BORDERSTYLE COLOR; - Example. bottom can also be replaced with top, left or right.
position:relative;left:1px;top:1px; - Lifts or pushes the link when you hover over it. Top can be replaced with bottom and left can be replaced with right. Here are two examples, both of these are using 1px: Lifts the text up or pushes the text down.
letter-spacing:NUMBERpx; - Adds spaces between each letter of the text when you hover over it. You can also make the number a negative so the letters overlap. Here's an example using 2px: Spacey.
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:
hr{color:COLOR;widthNUMBERpx;height:NUMBERpx;}
Browser Border
body{border:COLOR NUMBERpx BORDERSTYLE;} - The border will go all the way around your lookup page. The border doesn't have to go all the way around though, refer to hover code borders for more info.
Lookup Info BG
p table{background-image:url(HTTP://YOU.COM/IMAGE.JPG);} - This code adds a background to your info and trophy area.
Transparent Table
table{background:transparent;} - This removes some of the yellow on the sidebar.
Input/Textarea/Option Colors
input, textarea{background:COLOR;color:COLOR;font-family:FONT NAME;font-size:NUMBERpt;} - This changes the Search Box colors
If you change "input, textarea" to "select, option" you can change the colors of the language dropdown menu.
Adding a Banner/Sheild
.banner{background-image:url(HTTP://YOU.COM/IMAGE.GIF);height:HEIGHT;width:WIDTH; position:absolute;top:NUMBER;left:NUMBER;} - You'll have to position the banner to where you want it. Keep in mind the numbers for positioning it are in pixels and one pixel is the width of this -no_html_comments- | Be sure to add the class code after your ending tag:
<b class=banner></b>
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.
Custom Lists
ul,li{list-style-image: url(IMAGEURL);} - This gets rid of the normal bullets that appear when you make a list. This is great to use in guilds for the side menu :)
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:
<link rel=stylesheet -disallowed_word- font class=chg>HTTP://YOU.COM/FILE.CSS>
Opacity
img{filter:alpha(opacity=NUMBER);} - Example, with a 50 opacity:
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.
Opacity Styles
img{FILTER:Alpha(Opacity=NUMBER, FinishOpacity=1, Style=#1-3, StartX=0, FinishX=100, StartY=0, FinishY=100);} - Here are examples of each style in 50 opacity. 1 is a slanted fade, 2 is circular and 3 is square:
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.
Filter Colors
img{filter:invert;} - Example:
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.
filter:shadow(color=COLOR,direction=NUMBER);height:1; - A shadow. Example: Mental Help
filter:dropshadow(color=COLOR,offX=NUMBER,offY=NUMBER);height:1; - A Dropshadow. Example: Mental Help
filter:glow(color=COLOR,strength=NUMBER);height:1; - A Glow effect. Example: Mental Help
filter:blur(strength=NUMBER);height:1; - A blur effect. Example: Mental Help
filter:wave(strength=NUMBER,lightstrength=NUMBER);height:1; - A wavy effect. Example: Mental Help
filter:fliph;height:1; - A horizontal flip. Example: Mental Help
filter:flipv;height:1; - A vertical flip. Example: Mental Help
Chroma Filter
A chroma filter will remove any specified color from the page you have it on.
filter:chroma(color=COLOR); - Example, the first is the regular image and the second has been specified to filter out any white in the image:
----- 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:
<font color=red>Blah Blah</font>
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:
<b><font color=red>Blah Blah</font></b>
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.
<body background=HTTP://YOU.COM/IMAGE.GIF text=COLOR link=COLOR vlink=COLOR alink=COLOR;" bgproperties=fixed style=SCROLLBAR COLOR CODE AND/OR BACKGROUND CODES HERE>
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"'.
Text Basics
<font color=COLOR size=1 face=FONTNAME>Your Text Goes Here</font> - This will change only the text you have inbetween the two codes. If you have a link in your shop you want to change the color of, you can use this combined with the Link Code, so you won't have the default blue and red colors.
Here are some various codes you can use for text. All of these can also be mixed together.
<b>Bolded Text</b>
<u>Underlined Text</u>
<i>Italic Text</i>
Some more basic text commands to alter where the text appears.
<br> - This will skip all text after it to the next line, no ending tag is required.
<p> - Text after this code will skip a space then start on a new line, no ending tag is needed.
<dd> - This indents a sentence.
Link Code
<a -disallowed_word- font class=chg>URL OF LINK target=window>Text You Click on Goes Here</a> - This creates a basic text link. The 'target="window"' attribute simply makes the link open in a new -blocked- If you want the link to open in the same window, just remove it.
If you want an image to be a link, then instead of putting text, you would put the image code.
Image Code
<img src="http://www.neopets.com/thisisasample.gif" width=NUMBER height=NUMBER border=NUMBER> - With the image tag you don't need to have the width or height. You also don't need to have a border, unless the image is going to be a link, then you should add a border of 0 so that the image doesn't have that ugly link border around it.
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:
<img src="http://www.neopets.com/thisisasample.gif" align=left> - You can also change left to right, or center.
Div Code (Blog)
<div style="width:NUMBER;height:NUMBER;text-align:left;overflow:auto;">TEXT HERE</div> - This will create a small area for text that you can scroll through. If you manage to combine this code with tables, you can make your own shop blog. As you can tell, divs use CSS coding, which means you can easily add a border, background and specific scrollbar colors to it using CSS.
Divs can also be position on a specific spot on a page. Just add the position attribute to the CSS properties in the code:
position:absolute;top:NUMBER;left:NUMBER;
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.
[font c=COLOR s=NUMBER f=FONTNAME]NeoHTML[/font] - Your basic font code. c stands for color, s stands for the font size and f is the font face (like Arial, verdana, Terminal or Tahoma), you can only use one worded fonts.
[shadow c=COLOR]NeoHTML[/shadow] - Adds a shadow like the CSS effect for shadow.
[glow c=COLOR]NeoHTML[/font] - Hmm.. what might this do? Add a glow? I think so.
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:
[center]NeoHTML[/center] - Centers Text.
[br]NeoHTML[/br] - Breaks to the next line.
[p]NeoHTML[/p] - Skips a line then starts a new line.
[b]NeoHTML[/b] - Bolds text.
[u]NeoHTML[/u] - Underlines text.
[i]NeoHTML[/i] - Italicizes text.
[sup]NeoHTML[/sup] - Small text slighty rised up.
[sub]NeoHTML[/sub] - Small text slighty lowered.
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:
[center][font c=white]- Your Name -[/font][/center][p][font c=black]NeoHTML[/font] - If you use a code like this, "- Your Name -" will appear above every post you make. Where it says NeoHTML is where what you type will appear. Make sure you don't use too many codes, because there is a character limit on your NeoHTML.
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.