Coding GuideThis 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 BasicsHTML 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.
|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
LinksA 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 AnchorsThe 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.
|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|
|Change the background color of the page|
|Add a background image to the page|
|Cell one||Cell two|
|Cell three||Cell four|
CSS BasicsCSS 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 filtersDue 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.
|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|
DivsA 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:
|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|
PropertiesThis 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 CodesIf 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