Storm .

Premade CSS Layouts and Coding Guide

Welcome

Welcome to Storm, a premade css and coding guide site. This site offers a variety of simple, modern css layouts, and a complete HTML and CSS coding guide. Feel free to edit the coding however you like, and please don't hesitate to send me a message if you have and questions, comments, or need any coding help. =)

Updates

May / 6 / 2012

Revamped all the layouts.

<div id="main">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>Navigation</h1>
<table style="width: 100%;"><tr valign="top">
<td style="width: 50%;">
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>
</td>
<td style="width: 50%;">
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>
</td>
</tr></table>
<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>
</div>

<h1>Navigation</h1>
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
text

</td>
<td id="main">

<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text
<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>. 
</td>
</tr></table>
</div>

<table id="table" cellpadding="0" cellspacing="10">
<tr><td colspan="2">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>
</td></tr>
<tr valign="top">
<td id="side">

<h1>Navigation</h1>
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
text

</td>
<td id="main">

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</td>
</tr>
</table>
</div>

<table id="table" cellpadding="0" cellspacing="15">
<tr><td colspan="2">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>
</td></tr>
<tr valign="top">
<td id="side">

<h1>Navigation</h1>
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
text

</td>
<td id="main">

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.  
</td>
</tr>
</table>
</div>

<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

</td></tr>
<tr valign="top">
<td id="spacer"></td>
<td>
<table id="laytable" cellspacing="20" cellpadding="0"><tr valign="top">
<td>
<div id="side">
<h1>Navigation</h1>
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>
</div>
</td>
<td>

<div id="main">
<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>
</td>
</tr></table>
</td>
<td id="spacer"></td>
</tr>
</table>

<div id="main">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>Navigation</h1>
<table style="width: 100%;"><tr valign="top">
<td style="width: 33%;">
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>
</td>
<td style="width: 33%;">
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>
</td>
<td style="width: 33%;">
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>
</td>
</tr></table>
<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>
</div>

<table id="table" cellpadding="0" cellspacing="0">
<tr><td colspan="2">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>
</td></tr>
<tr valign="top">
<td id="column">

</td>
<td id="column">

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>. 
</td>
</tr>
</table>
</div>

<table id="table" cellpadding="0" cellspacing="15"><tr valign="top">
<td id="column">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>Navigation</h1>
<div id="blocklink">
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
<a href="/~">This Is A Link</a>
</div>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
text

</td>
<td id="column">

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</td>
</tr></table>
</div>

<div id="main">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>
</div>

<h3>The <b>Name</b> Of The Page <b>.</b>
</h3>
<h4>This Is The Page's Subheader</h4>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.

</td></tr>
</table>
</div>

<h3>The <b>Name</b> Of The Page <b>.</b>
</h3>
<h4>This Is The Page's Subheader</h4>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>
</div>

Multiple Blog Layouts

<table id="table" cellpadding="0" cellspacing="20">
<tr><td colspan="2">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>
</td></tr>
<tr valign="top">
<td id="side">

<h1>Navigation</h1>
<div id="blocklink">
<a href="#one">Section 1</a>
<a href="#two">Section 2</a>
<a href="#three">Section 3</a>
<a href="#four">Section 4</a>
<a href="#five">Section 5</a>
</div>

<h1>This Is A Header</h1>
<h2>This Is A Subheader</h2>
text

</td>
<td>
<div id="container">

<a name="one"></a>
<div id="box">
<h1>This Is A Section 1</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>

<a name="two"></a>
<div id="box">
<h1>This Is A Section 2</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="three"></a>
<div id="box">
<h1>This Is A Section 3</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="four"></a>
<div id="box">
<h1>This Is A Section 4</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="five"></a>
<div id="box">
<h1>This Is A Section 5</h1>
<h2>This Is A Subheader</h2>
text 
</div>
</div>
</td>
</tr>
</table>
</div>

<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

</td></tr>
<tr><td id="bar">
<a href="#one">Section 1</a>
<a href="#two">Section 2</a>
<a href="#three">Section 3</a>
<a href="#four">Section 4</a>
<a href="#five">Section 5</a>
</td></tr>
<tr>
<td id="main">
<div id="container">

<a name="one"></a>
<div id="box">
<h1>This Is A Section 1</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>

<a name="two"></a>
<div id="box">
<h1>This Is A Section 2</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="three"></a>
<div id="box">
<h1>This Is A Section 3</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="four"></a>
<div id="box">
<h1>This Is A Section 4</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="five"></a>
<div id="box">
<h1>This Is A Section 5</h1>
<h2>This Is A Subheader</h2>
text 
</div>
</div>
</td>
</tr>
</table>
</div>

<h1>Navigation</h1>
<div id="blocklink">
<a href="#one">Section 1</a>
<a href="#two">Section 2</a>
<a href="#three">Section 3</a>
<a href="#four">Section 4</a>
<a href="#five">Section 5</a>
<a href="/">This Is A Link</a>
<a href="/">This Is A Link</a>
<a href="/">This Is A Link</a>
<a href="/">This Is A Link</a>
</div>

</td>
<td id="main">
<div id="container">

<a name="one"></a>
<div id="box">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>This Is A Section 1</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>

<a name="two"></a>
<div id="box">
<h1>This Is A Section 2</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="three"></a>
<div id="box">
<h1>This Is A Section 3</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="four"></a>
<div id="box">
<h1>This Is A Section 4</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="five"></a>
<div id="box">
<h1>This Is A Section 5</h1>
<h2>This Is A Subheader</h2>
text 
</div>
</div>
</td>
</tr></table>
</div>

<table id="table" cellpadding="0" cellspacing="0">
<tr><td colspan="2" id="bar">
<a href="#one">Section 1</a>
<a href="#two">Section 2</a>
<a href="#three">Section 3</a>
<a href="#four">Section 4</a>
<a href="#five">Section 5</a>
</td></tr>
<tr valign="top">
<td id="side">
<div id="blog">
<h1>This Section Is A Scrollbox</h1>
<h2>This Is A Subheader</h2>
text
</div>
</td>
<td id="main">
<div id="container">

<a name="one"></a>
<div id="box">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>This Is A Section 1</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>

<a name="two"></a>
<div id="box">
<h1>This Is A Section 2</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="three"></a>
<div id="box">
<h1>This Is A Section 3</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="four"></a>
<div id="box">
<h1>This Is A Section 4</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="five"></a>
<div id="box">
<h1>This Is A Section 5</h1>
<h2>This Is A Subheader</h2>
text 
</div>
</div>
</td>
</tr>
</table>
</div>

</td>
<td id="main">
<div id="container">

<a name="one"></a>
<div id="box">
<h3>The <b>Name</b> Of The Page</h3>
<h4>This Is The Page's Subheader</h4>

<h1>This Is A Section 1</h1>
<h2>This Is A Subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm</a>.
</div>

<a name="two"></a>
<div id="box">
<h1>This Is A Section 2</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="three"></a>
<div id="box">
<h1>This Is A Section 3</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="four"></a>
<div id="box">
<h1>This Is A Section 4</h1>
<h2>This Is A Subheader</h2>
text 
</div>

<a name="five"></a>
<div id="box">
<h1>This Is A Section 5</h1>
<h2>This Is A Subheader</h2>
text 
</div>
</div>
</td>
</tr></table>
</div>

<h1>Navigation.</h1>
<div id="blocklink">
<a href="#one">Section 1.</a>
<a href="#two">Section 2.</a>
<a href="#three">Section 3.</a>
<a href="#four">Section 4.</a>
<a href="#five">Section 5.</a>
</div>

</div>
</div>

<a name="one"></a>
<div id="box">
<h3>The <b>name</b> of the page <b>.</b>
</h3>
<h4>This is the page's subheader.</h4>

<h1>This is section 1</h1>
<h2>This is a subheader</h2>
<a href="/">link</a> <b>bold</b> <i>italic</i> text

<h1>Credit</h1>
Layout css from <a href="/~argenteus_">storm.</a>

</div>

<h1>This is section 2</h1>
<h2>This is a subheader</h2>
text

</div>

<h1>This is section 3</h1>
<h2>This is a subheader</h2>
text

</div>

<h1>This is section 4</h1>
<h2>This is a subheader</h2>
text

</div>

<h1>This is section 5</h1>
<h2>This is a subheader</h2>
text

</div>
</div>

Introduction To HTML

HTML stands for Hyper Text Markup Language. It is used to insert content onto a page, such as links, images, or tables. All HTML goes between two triangular brackets called Tags. To add something to a page, you use an opening tag, which begins the coding, and a closing tag, which tells the coding where to stop. The closing tag looks exactly like the opening tag, only with a backslash / after the first triangular bracket.

Text Basics

<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

Altering Font

<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

Font size 1
Font size 2
Font size 3
Font size 4
Font size 5

Font size 6

Font size 7

Images & Links

<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)

Page Anchors

Page anchors are used to make site navigation. A page anchor essentially marks a spot on the page, then you can make a link that takes you to that spot.

Tables

A table is a box where you can arrange your content into parallel columns. A table is arranged into rows of cells. Below is an example of a simple table code.

This is Row 1, Cell 1	This is Row 1, Cell 2
This is Row 2, Cell 1	This is Row 2, Cell 2

Introduction To CSS

CSS stands for Cascading Style Sheets. It is used to change the appearance of certain features of the page, such as the page's background, the color of all the links, or the attributes of a specific div.

Inline Coding

The format of Inline CSS is a bit simpler than a style sheet. It is added into the HTML code, and affects only that code.

This code would change the color of one link, even if the rest of the links on the page are a different color.

Stylesheets

All css codes, except for inline coding, go between two style tags, an opening tag and a closing tag.

Basic CSS Codes

b{color:#f89dcf;}	Change the color of any bold font
i{color:#3cdfe7;}	Change the color of any italicized font
a{color:#faee41;}	Change the color of the links
a:hover{color:#faee41;}	Change the color of the links when you hover over them
body{ font-size:9px; font-style:arial; color:#8f8f8f;}	Change the size, style, and color of the text. This can also be written: body{font:9px arial;}
body{background:#faee41;}	Change the page's background color
body{background:url("URL";}	Add a background image to the page
body{cursor:crosshair;}	Change the page's cursor. Other options are: default, crosshair, not-allowed, re-size, help, wait

Headers

Default headers are very plain, so most people choose to alter them. The code h1{} will change all the h1 headers. To alter the h2 or h3 headers, you must change the code to h2{}.

Header

Textareas

Navigation Links

Navigation link codes are fairly long. The first line of code, display:block;, is what makes the links arrange into an orderly stack. All the rest of the lines change the appearance of the links, such as adding a background and border, otherwise they would just look like a column of ordinary text links.

This Is A Navigation Link This Is A Navigation Link This Is A Navigation Link This Is A Navigation Link

Divs

A div is a box where you can place content. You can give it a width, a background, and position it at a specific point on the page. Unless you are using inline coding, a div requires css to work.

Bypassing 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.

Multiple Blog Codes

Also know as anchored layouts. If you want to change the size, make sure the height and width are the same for both #container and #box.

Userlookup Codes

#header, #footer, #ban{display:none;}	Remove the header and footer
body, td, .medText{font:9px arial;color:#888888;}	Change the font of the whole page
#main{border:none;}	Get rid of the border around the main section
#main, #content{width:700px;}	Change the width of the main section
.contentModule, .contentModuleContent, .contentModuleTable{border:none;background:white;}	Alter all the stat boxes
.contentModuleHeader,.contentModuleHeaderAlt{ background:#3ccfdf; text-align:right; color:#0000000; font:bold 11px arial;}	Change all the stats headers
#userneohome{display:none;}	Hide neohome box
#usershop{display:none;}	Hide shop and gallery box
#userneopets img{width:100px;height:100px;}	Resize neopet's images
#userinfo{background:#e8e8e8;}	Change user info box
#usercollections{background:#e8e8e8;}	Change collections box
#userneopets{background:#e8e8e8;}	Change neopets box
#userneohome{background:#e8e8e8;}	Change neohome box
#usertrophies{background:#e8e8e8;}	Change trophies box

Color Schemes

#c6ac50

#e8d286

#ff587f

#ffae8e

#ffb5b5

#dfc5e8

#68608f

#b47abf

#ffc68e

#ceedb2

#8bc1bf

#c18d5a

#253e8e

#5aa9ae

#86ab44

#c6dc35

#cf2a64

#ef84bb

#5e268e

#3857bc

#eaa725

#f3e94f

#b8db4d

#85d2ae

#c3b8fd

#e1b7f6

#f9aeda

#f1d19f

#c633cb

#8933cb

#625ce5

#16aaff

#f85198

#ff9275

#c8ea77

#fffc9e

#8cc1aa

#ffb5cc

#beffb5

#ffc19c

#f6955a

#e84747

#efc431

#793000

#f44e79

#ff97b2

#d1fb80

#a5d44b

#a793a7

#cbbacb

#ed8cb5

#f3d5f3

#5c8f81

#7fbfae

#f8f182

#6ba6c8

#92ac65

#8792ab

#bcc5d9

#e5cbec

#8f2381

#c68da1

#f48d8d

#f65c5c

#ff9147

#ffb842

#ffb89a

#ffb8d4

#b284bf

#84a0bf

#84bf95

#b6cb8c

Storm .

Premade CSS Layouts and Coding Guide

Welcome

Updates

May / 6 / 2012

Multiple Blog Layouts

Introduction To HTML

Text Basics

Altering Font

Images & Links

Page Anchors

Tables

Introduction To CSS

Inline Coding

Stylesheets

Basic CSS Codes

Headers

Header

Textareas

Navigation Links

Divs

Bypassing The Filters

Multiple Blog Codes

Userlookup Codes

Color Schemes

Link Back Buttons

Affiliates

Listers

Credit