Coding Guide

This is a complete coding guide that you can use to learn how code yourself, just copy and paste to make simple layouts, or use to edit premade css layouts.

HTML Basics

HTML stands for Hyper Text Markup Language. First off, everything goes between two triangular brackets called tags.

To add something to a page, you need an opening tag and a closing tag. The closing tag looks exactly the same as the opening tag, except with a / after the first triangular bracket, and tells the command where to stop. For example:

After you have this much down, html is very simple and easy to grasp.

Changing Font

Determine font size, style and color

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

Other Font Effects

bold
italics
underline
strike
marquee

Line Break
Line Break

New Paragraph

New Paragraph

Links

A link takes you to another page, or in some cases, to a specific spot on the same page.
Makes a link
Open link in a new window
Link an image

Page Anchors

The page anchor essentially marks a spot on the page, then you add a link that takes you to that spot. An example can be found on this page under Navigation.

Adding Images

Put up an image
Resize up an image
(If you change only the height or only the width, the size of the image will automatically adjust.)
Add a border

Backgrounds

Change the background color of the page
Add a background image to the page

Tables

Cell one Cell two
Cell three Cell four

Code:

CSS Basics

CSS stands for Cascading Style Sheets. CSS can be used to change the appearance of the entire page. To start your coding, you need 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 codes

Change the background color of the whole page
Add a background to the whole page
Change the page's cursor.
Other options: default, crosshair, not-allowed, re-size, help, wait
Change the font size, style and color of the whole page
Edit the color of the links
Remove the line underneath the links
Edit the color of the links when you hover over them
Edit any bold font
Edit any italicized font
Edit the textareas

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:

Userlookup Codes

Remove the header and footer
Hide neomhome box
Hide shop and gallery box
Get rid of the border around the main section
Change the background and width of the main section
Change the font of the whole page
Change all the stats boxes
Change user info box
Change collections box
Change shop and gallery box
Change neopets box
Change neohome box
Change trophies box
Code to change all the stats headers
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.
Changes the font style.
Chages the size of the font.
Changes the weight of the font.
Other options: bold, normal
Changes the color of the font.
Changes the alignment of the font.
Other options: left, right, center
Makes all the font uppercase/lowercase.
Other options: uppercase, lowercase, capitalize
Makes all the font underlined.
Other options: underline, line-through, blink, none
Changes the amount of space between each letter.
Changes the amount of space between each word.
Changes the amount of space between each line of text.
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.
Adds a plain color background background.
Adds a background image.
Keeps the background from scrolling with the page.
Other options: scroll, fixed
Makes the background only repeat vertically.
Other options: repeat, no-repeat, repeat-y, repeat-x,
Changes whether items will line up next to eachother or stacked on top of each other.
Other options: inline, block
Changes how much space will be put between items.
Changes how much space there will be between the text and the border.
Changes how an item is positioned, must be used with top/bottom and left/right codes.
Other options: relative, fixed
Changes the amount of space from the top of the page.
Changes the amount of space from the left side of the page.
Changes the amount of space from the right side of the page.
Changes the amount of space from the bottom of the page.

Multiple Blog Codes

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

If you aren't sure what a multiple blog is, here's an example:
One - Two - Three
First section.
Second section.
Third section.

Cursors

cursor:default;

cursor:crosshair;

cursor:not-allowed;

cursor:move;

cursor:se-resize;

cursor:col-resize;

cursor:help;

cursor:wait;

cursor:text;

Border Types

There are four different types of borders: solid, dashed, dotted, and double. The larger the number, the thicker the border will be.

border:2px solid red;


border:4px dashed purple;


border:6px dotted green;


border:3px double blue;

Font Faces

Georgia
Verdana
Arial
Tahoma
Courier New
Mistral
Century Gothic
Copperplate Gothic Light
Vivaldi
AR Bonnie
Maiandra gd

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



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