Coding Guides

Coding Help

These Guides go over everything from the basics of HTML, coding layouts, filter solutions, color schemes, and alternate header codes you can use for your layout. You can use the coding guide to teach yourself css, or just to edit premade layouts. You may copy and past any of the codes. Feel free to send me a message if you have any additional coding questions. =)

Navigation

HTML Codes
-Basics Of HTML
-Changing font
-Images and Links

CSS Codes
-Basics of CSS
-How to bypass the filters
-Backgrounds, Editing font, Editing textareas
-Userlookup/Petlookup codes
-Properties list

Advanced
-Divs
-Multiple Blog Codes
-Headers

Other Coding Help
-Hexadecimal color chart
-Cursors

Basic Of HTML

HTML stands for Hyper Text Markup Language. All your coding goes between two triangular brackets called tags.

To add something to a page, you use an opening tag, which starts the coding, and a closing tag, which tells the coding where to stop. The closing tag looks exactly the same as the opening tag, except with a backslash ( / ) after the first triangular bracket.

General HTML codes

<b>text</b>	bold
<i>text</i>	italicize
<strike>text</strike>	~~strike~~
Line One<br>Line Two	Line Break Line Break
<p>Line One</p> <p>Line Two</p>	New Paragraph New Paragraph
<center> text </center>	Centers everything in between the opening and closing tag
<font face="Courier New">text</font>	Change font style
<font size="3">text</font>	Change font size
<font color="#f91698">text</font>	Change font color
<font face="Courier New" size="3" color="#f91698">text</font>	Change font style, size, and color at once
<img src="/imageURL.png">	Add an image
<img src="/imageURL.png" width="200" height="100">	Resize an image (If you change only the height or only the width, the image will adjust automatically)
<a href="http://www.neopets.com">Click Here</a>	Make a link
<a href="/url"><img src="/imageURL.png" border="0"></a>	Link an image (i.e., link back button codes)

Basics of CSS

CSS stands for Cascading Style Sheets. CSS is used to change the appearance of the entire page. To start your coding, you use an opening tag at the very beginning, and a closing tag at the end. All of your coding goes between the style tags.

How to Bypass the filters

Due to Neopet's coding filters, 'position' is no longer allowed inside the style sheets, so in order to position anything on the page, you must use inline coding. All the properties outside of 'position:absolute;' can still be placed inside the style sheet.

Basic CSS codes

body{ background:#f11994;}	Change the background color of the whole page
body{ background:url("imageURL");}	Add a background image to the whole page
body{ cursor:crosshair;}	Change the page's cursor. Other options: default, crosshair, not-allowed, re-size, help, wait
body{ font-size:9px; font-family:Verdana; color:#a6f120;}	Change the font size, style and color of the whole page
a{ color:#f19410;}	Edit the color of the links
a{ text-decoration:none;}	Remove the line underneath the links
a:hover{ color:#adfe21;}	Edit the color of the links when you hover over them
b{ color:#faa021;}	Change the color of any bold font
i{ color:#faa021;}	Change the color of any italicized font
textarea{ border:2px solid #cccccc; font:7pt georgia; color:#f19410; background:#efefef;}	Edit the textareas

Userlookup Codes

#header, #footer, #ban{display:none;}	Remove the header, footer, and the gray banner above the header.
#userneohome{ display:none;}	Hide neomhome box
#usershop{ display:none;}	Hide shop and gallery box
#main{border:none;}	Get rid of the border around the main section
#main, #content{ background:#444444; width:700px;}	Change the background and width of the main section
body, .medText{ font:7pt verdana; color:#888888;}	Change the font of the whole page
.contentModule, .contentModuleContent, .contentModuleTable{ border:none; background:white;}	Change all the stats boxes
#userinfo{ background:#000000; border:none;}
.contentModuleHeader,.contentModuleHeaderAlt{ background:#ff1493; text-align:right; color:#0000000; font:normal 12pt century gothic;}	Code to change all the stats headers
#userneopets img{ width:80px; height:80px;}	Resize neopet's images

Properties

This is a complete list of the properties that you can add to your coding, next to each is a description of what it does.

font-family:Verdana;	Changes the font style.
font-size:10px;	Chages the size of the font.
font-weight:bold;	Changes the weight of the font. Other options: bold, normal
color:#888888;	Changes the color of the font.
text-align:left;	Changes the alignment of the font. Other options: left, right, center
text-transform:uppercase;	Makes all the font uppercase/lowercase. Other options: uppercase, lowercase, capitalize
text-decoration:underline;	Makes all the font underlined. Other options: underline, line-through, blink, none
letter-spacing:3px;	Changes the amount of space between each letter.
word-spacing:5px;	Changes the amount of space between each word.
line-height:18px;	Changes the amount of space between each line of text.
border:1px solid #39cd04;	Adds a border. Border can be changed to border-top, border-bottom, border-right, or border-left. Solid can be changed to dotted, dashed, or double.
background:#48fg65;	Adds a plain color background background.
background:url(URL);	Adds a background image.
background-attachment:fixed;	Keeps the background from scrolling with the page. Other options: scroll, fixed
background-repeat:repeat-y;	Makes the background only repeat vertically. Other options: repeat, no-repeat, repeat-y, repeat-x,
display:block;	Changes whether items will line up next to eachother or stacked on top of each other. Other options: inline, block
margin:2px;	Changes how much space will be put between items.
padding:3px;	Changes how much space there will be between the text and the border.
position:absolute;	Changes how an item is positioned, must be used with top/bottom and left/right codes. Other options: relative, fixed
top:20px;	Changes the amount of space from the top of the page. (Must be use with position:absolute;)
left:50px;	Changes the amount of space from the left side of the page. (Must be use with position:absolute;)
right:40px;	Changes the amount of space from the right side of the page. (Must be use with position:absolute;)
bottom:20px;	Changes the amount of space from the bottom of the page. (Must be use with position:absolute;)

Divs

A div is basically a box where all of your page's content goes. You can give it a background, a width, and position it at a certain point on the page. Unless you're using inline coding, a div requires both css and html to work.
Basic div code:

Multiple Blog Codes

If you want to alter the size, make sure the width and height are the same for both #box and #container.

Example:

One - Two - Three

First section.

Second section.

Third section.

Cursors

cursor:default;

cursor:crosshair;

cursor:move;

cursor:se-resize;

cursor:help;

cursor:wait;

#ff1199

#33ccdd

#ffaa00

#ff1199

Hexidecimal Color Chart

#000000

#222222

#444444

#666666

#888888

#aaaaaa

#cccccc

#ffffff

#110000

#221100

#331100

#551100

#772200

#993300

#aa4411

#cc6633

#ee8855

#ff11bb

#ff33bb

#ff55bb

#ff77bb

#ff99bb

#ff1199

#ff3399

#ff5599

#ff7799

#ff9999

#ff1177

#ff3377

#ff5577

#ff7777

#ff9977

#220000

#330000

#550000

#770000

#990000

#bb0000

#dd0000

#ff2200

#ff4400

#ff6600

#ff8800

#ffaa00

#ffcc00

#557700

#669900

#99cc00

#aff00

#001100

#003300

#005500

#007700

#009900

#00bb00

#00dd00

#44dd33

#77dd55

#99dd66

#000011

#000033

#000055

#000077

#000099

#0000dd

#3333dd

#5555dd

#7777dd

#9999dd

#220044

#330055

#440066

#770099

#9933bb

#110011

#220022

#330033

#550055

#770077

#990099

#bb00bb

#bb33bb

#cc55cc

#dd66dd

#ff88ff

#330011

#440022

#550033

#770055

#990077