Skeletons.

What are skeletons, you ask? They're templates! :D I just like to call them skeletons because honestly, they are. Layouts are the structure of a site, much like your bones are the structure of your body. So calling them skeletons made more sense to me. These will be very plain. You can edit these to your hearts content, I encourage it actually. Just don't remove the credit. If you're not sure how to edit a layout, check out a these tutorials. I have used them and they have definitely helped me.

Tutorials

Getting a skeleton

001: Find the skeleton you want.
002: Click anywhere in the textarea.
003: Right click and select Select All.
004: Right click again and select Copy
005: Click here to choose a petpage to edit.
006: Once you chose a petpage to edit, delete all the coding that's already there and paste the copied coding from Vibe into the code box. To paste, right click in the box and select Paste.
007: Click the Preview Changes button.
008: On the preview, click the Save Changes button.

Voila! You now have a new petpage skeleton courtesy of Vibe! Enjoy! :3

One Column

<style>
#CSSbyiKiwipop {
}
#MadeforVibe {
}
body {
	background: #ededed;
}
.sf {
	display: none;
}
table {
	background: transparent;
}
a:link, a:active, a:visited {
	font: 7.5pt verdana;
	text-decoration: none;
	color: #bababa;
	font-weight: bold;
}
a:hover {
	color: #e1e1e1;
}
a.nav:link, a.nav:visited, a.nav:active {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #000000;
	text-decoration: none;
	display: block;
	text-align: right;
	padding-right: 5px;
	text-transform: uppercase;
	margin-bottom: 1px;
}
a.nav:hover {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #939393;
}
#save {
	top: 0px;
	left: 750px;
}
#main {
	top: 100px;
	left: 100px;
	width: 500px;
	height: auto;
	overflow: auto;
	text-align: center;
	background-color: #ffffff;
	border-left: 20px solid #000000;
	padding: 5px;
}
#navi {
	top: 150px;
	left: 0px;
	width: 100px;
	height: auto;
}
#title {
	top: 40px;
	left: 125px;
	width: auto;
	height: auto;
}
h1 {
	font-family: georgia;
	font-size: 32;
	font-weight: normal;
	color: #ffffff;
	text-align: center;
	background-color: #828282;
	margin-top: 0px;
	margin-bottom: 6px;
	letter-spacing: -3px;
	text-transform: lowercase;
}
h2 {
	font-family: georgia;
	font-size: 20;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	text-transform: lowercase;
	background-color: #c8c8c8;
	margin-top: 3px;
	margin-bottom: 6px;
}
tr, td, body, .text {
	font-family: verdana;
	font-size: 7.5pt;
	color: #9b9b9b;
}
textarea {
	font: 6pt verdana;
	color: #FFFFFF;
	background: #d1ece8;
	border: 1px solid #97d5cc;
	margin-bottom: 3px;
	height: 20px;
	width: 88px;
}
b {
	font: 7.5pt verdana;
	font-weight: bold;
	color: #000000;
}
i {
	font: 7.5pt verdana;
	font-weight: normal;
	font-style: italic;
	color: #ababab;
}
i.a {
	font: 50px georgia;
	font-weight: normal;
	font-style: italic;
	color: #000000;
}
.u {
	font: 7.5pt verdana;
	font-weight: normal;
	border-bottom: 1px solid #767676;
	color: #767676;
}
</style>
<div id="navi" style="position: fixed;">
<a href="#one" class="nav">oh</a>
<a href="#two" class="nav">look</a>
<a href="#three" class="nav">floating</a>
<a href="#four" class="nav">navigation</a>
<a href="#five" class="nav">8D</a>
<a href="/~riyvern" class="nav">css</a> 
</div>
<div id="title" style="position: absolute;">
<i class="a">your page title here * *</i>
</div>
<div id="main" style="position: absolute;">
<h1>header one</h1>
<b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D
</p>
<p>
<b>This skeleton will not work in Internet Explorer!</b>

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>
This skeleton will stretch as you add more content. And the navigation will float! How cool is that!? But! Because of the floating nav, it won't work in IE. =/
</p>
<p>

</p>
<h1>header one</h1>
<b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D
</p>
<p>
<b>This skeleton will not work in Internet Explorer!</b>

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>
This skeleton will stretch as you add more content. And the navigation will float! How cool is that!? But! Because of the floating nav, it won't work in IE. =/
</p>
<p>
</p>
</div>
<div id="save" style="position: absolute;">
</div>

Two Column

	<style> #CSSbyiKiwipop { } #MadeforVibe { } body { background: #ededed; } .sf { display: none; } table { background: transparent; } a:link, a:active, a:visited { font: 7.5pt verdana; text-decoration: none; color: #bababa; font-weight: bold; } a:hover { color: #e1e1e1; } a.nav:link, a.nav:visited, a.nav:active { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #c3c3c3; text-decoration: none; display: block; text-align: center; text-transform: uppercase; margin-bottom: 1px; } a.nav:hover { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #939393; } h1 { font-family: georgia; font-size: 32; font-weight: normal; color: #ffffff; text-align: center; background-color: #828282; margin-top: 0px; margin-bottom: 6px; letter-spacing: -3px; text-transform: lowercase; } h2 { font-family: georgia; font-size: 20; color: #ffffff; font-weight: normal; text-align: center; letter-spacing: 2px; text-transform: lowercase; background-color: #c8c8c8; margin-top: 3px; margin-bottom: 6px; } tr, td, body, .text { font-family: verdana; font-size: 7.5pt; color: #9b9b9b; } textarea { font: 6pt verdana; color: #FFFFFF; background: #d1ece8; border: 1px solid #97d5cc; margin-bottom: 3px; height: 20px; width: 88px; } b { font: 7.5pt verdana; font-weight: bold; color: #000000; } i { font: 7.5pt verdana; font-weight: normal; font-style: italic; color: #ababab; } .u { font: 7.5pt verdana; font-weight: normal; border-bottom: 1px solid #767676; color: #767676; } </style> <center><table> <td width="600" valign="top"> <div style="width: 600px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;"> <h1>Header One</h1> <b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? <p> </p> <h1>Header One</h1> <b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? </div> </td> <td width="200" valign="top"> <div style="width: 200px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;"> <h1>sidebar</h1> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <p> </p> <h1>Credit</h1> Layout "skeleton" by <a href="/~Riyvern">Vibe</a>. </div> </td> </table></center>
	<style> #CSSbyiKiwipop { } #MadeforVibe { } body { background: #ededed; } .sf { display: none; } table { background: transparent; } a:link, a:active, a:visited { font: 7.5pt verdana; text-decoration: none; color: #bababa; font-weight: bold; } a:hover { color: #e1e1e1; } a.nav:link, a.nav:visited, a.nav:active { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #c3c3c3; text-decoration: none; display: block; text-align: center; text-transform: uppercase; margin-bottom: 1px; } a.nav:hover { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #939393; } h1 { font-family: georgia; font-size: 32; font-weight: normal; color: #ffffff; text-align: center; background-color: #828282; margin-top: 0px; margin-bottom: 6px; letter-spacing: -3px; text-transform: lowercase; } h2 { font-family: georgia; font-size: 20; color: #ffffff; font-weight: normal; text-align: center; letter-spacing: 2px; text-transform: lowercase; background-color: #c8c8c8; margin-top: 3px; margin-bottom: 6px; } tr, td, body, .text { font-family: verdana; font-size: 7.5pt; color: #9b9b9b; } textarea { font: 6pt verdana; color: #FFFFFF; background: #d1ece8; border: 1px solid #97d5cc; margin-bottom: 3px; height: 20px; width: 88px; } b { font: 7.5pt verdana; font-weight: bold; color: #000000; } i { font: 7.5pt verdana; font-weight: normal; font-style: italic; color: #ababab; } .u { font: 7.5pt verdana; font-weight: normal; border-bottom: 1px solid #767676; color: #767676; } </style> <p> </p> <table> <td width="600" valign="top"> <div style="width: 600px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;"> <h1>Header One</h1> <b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? </div> <p> </p> <div style="width: 600px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;"> <h1>Header One</h1> <b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? <p> </p> <h1>Header One</h1> <b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? </div> </td> <td width="200" valign="top"> <div style="width: 200px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;"> <h1>sidebar</h1> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <p> </p> <h2>header two</h2> Add more boxes if you need them. </div> <p> </p> <div style="width: 200px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;"> <h1>Credit</h1> Layout "skeleton" by <a href="/~Riyvern">Vibe</a>. </div> </td> </table>
	<style> #CSSbyiKiwipop { } #MadeforVibe { } body { background: #ededed; } .sf { display: none; } table { background: transparent; } #save { top: 0px; left: 820px; } a:link, a:active, a:visited { font: 7.5pt verdana; text-decoration: none; color: #bababa; font-weight: bold; } a:hover { color: #e1e1e1; } a.nav:link, a.nav:visited, a.nav:active { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #c3c3c3; text-decoration: none; display: block; text-align: center; text-transform: uppercase; margin-bottom: 1px; } a.nav:hover { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #939393; } #side { top: 30px; left: 75px; width: 200px; height: 500px; overflow: auto; padding: 5px; border: 1px gray solid; background-color: #ffffff; font: 7.5pt verdana; color: #9b9b9b; } #top { top: 30px; left: 290px; width: 500px; height: 200px; overflow: auto; padding: 5px; border: 1px gray solid; background-color: #ffffff; font: 7.5pt verdana; color: #9b9b9b; } #main { top: 245px; left: 290px; width: 500px; height: 285px; overflow: auto; padding: 5px; border: 1px gray solid; background-color: #ffffff; font: 7.5pt verdana; color: #9b9b9b; } h1 { font-family: georgia; font-size: 32; font-weight: normal; color: #ffffff; text-align: center; background-color: #828282; margin-top: 0px; margin-bottom: 6px; letter-spacing: -3px; text-transform: lowercase; } h2 { font-family: georgia; font-size: 20; color: #ffffff; font-weight: normal; text-align: center; letter-spacing: 2px; text-transform: lowercase; background-color: #c8c8c8; margin-top: 3px; margin-bottom: 6px; } tr, td, body, .text { font-family: verdana; font-size: 7.5pt; color: #9b9b9b; } textarea { font: 6pt verdana; color: #FFFFFF; background: #d1ece8; border: 1px solid #97d5cc; margin-bottom: 3px; height: 20px; width: 88px; } b { font: 7.5pt verdana; font-weight: bold; color: #000000; } i { font: 7.5pt verdana; font-weight: normal; font-style: italic; color: #ababab; } .u { font: 7.5pt verdana; font-weight: normal; border-bottom: 1px solid #767676; color: #767676; } </style> <div id="top" style="position: absolute;"> <h1>Header One</h1> <b>bold</b> <i>italic</i> <font class="u">underline <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? </font> </div> <div id="main" style="position: absolute;"> <h1>Header One</h1> <b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? </div> <div id="side" style="position: absolute;"> <h1>sidebar</h1> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <a href="/~riyvern" class="nav">link</a> <p> </p> <h1>Credit</h1> Layout "skeleton" by <a href="/~Riyvern">Vibe</a>. </div> <div id="save" style="position: absolute;"> </div>
	<style> #CSSbyiKiwipop { } #MadeforVibe { } body { background: #ededed; } .sf { display: none; } table { background: transparent; } #save { top: 0px; left: 970px; } a:link, a:active, a:visited { font: 7.5pt verdana; text-decoration: none; color: #bababa; font-weight: bold; } a:hover { color: #e1e1e1; } a.nav:link, a.nav:visited, a.nav:active { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #c3c3c3; text-decoration: none; display: block; text-align: center; text-transform: uppercase; margin-bottom: 1px; } a.nav:hover { font: 14px century gothic; font-weight: normal; color: #ffffff; background-color: #939393; } #updates { top: 30px; left: 20px; width: 200px; height: 200px; overflow: auto; padding: 5px; border: 1px gray solid; background-color: #ffffff; font: 7.5pt verdana; color: #9b9b9b; z-index: 1; } #links { top: 250px; left: 20px; width: 200px; height: 280px; overflow: auto; padding: 5px; border: 1px gray solid; background-color: #ffffff; font: 7.5pt verdana; color: #9b9b9b; z-index: 1; } #shadow { top: 40px; left: 30px; width: 200px; height: 500px; overflow: hidden; padding: 5px; background-color: silver; } #shadow2 { top: 65px; left: 260px; width: 700px; height: 474px; overflow: hidden; padding: 5px; background-color: silver; } #main { top: 55px; left: 250px; width: 700px; height: 474px; overflow: auto; padding: 5px; border: 1px gray solid; background-color: #ffffff; font: 7.5pt verdana; color: #9b9b9b; z-index: 1; } #navi { top: 25px; left: 250px; width: auto; height: auto; } h1 { font-family: georgia; font-size: 32; font-weight: normal; color: #ffffff; text-align: center; background-color: #828282; margin-top: 0px; margin-bottom: 6px; letter-spacing: -3px; text-transform: lowercase; } h2 { font-family: georgia; font-size: 20; color: #ffffff; font-weight: normal; text-align: center; letter-spacing: 2px; text-transform: lowercase; background-color: #c8c8c8; margin-top: 3px; margin-bottom: 6px; } tr, td, body, .text { font-family: verdana; font-size: 7.5pt; color: #9b9b9b; } textarea { font: 6pt verdana; color: #FFFFFF; background: #d1ece8; border: 1px solid #97d5cc; margin-bottom: 3px; height: 20px; width: 88px; } b { font: 7.5pt verdana; font-weight: bold; color: #000000; } i { font: 7.5pt verdana; font-weight: normal; font-style: italic; color: #ababab; } .u { font: 7.5pt verdana; font-weight: normal; border-bottom: 1px solid #767676; color: #767676; } </style> <div id="navi" style="position: absolute;"> <center><table cellspacing="5" cellpadding="0"> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> <td width="96"> <a href="/~riyvern" class="nav">link</a> </td> </table></center> </div> <div id="main" style="position: absolute;"> <h1>Header One</h1> <b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a> <p> This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D </p> <h2>Header Two</h2> Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot? </div> <div id="shadow2" style="position: absolute;"> </div> <div id="updates" style="position: absolute;"> <h1>updates</h1> Here's a great place to add your updates. Nice and small and right at the top. :D <p> Oh! And it scrolls! </p> </div> <div id="links" style="position: absolute;"> <h1>sidebar</h1> Use this for links, link backs, whatever. Just remember to leave the credit. <p> </p> <h1>Credit</h1> Layout "skeleton" by <a href="/~Riyvern">Vibe</a>. </div> <div id="shadow" style="position: absolute;"> </div> <div id="save" style="position: absolute;"> </div>

Three Column.

<style>
#CSSbyiKiwipop {
}
#MadeforVibe {
}
body {
	background: #ededed;
}
.sf {
	display: none;
}
table {
	background: transparent;
}
a:link, a:active, a:visited {
	font: 7.5pt verdana;
	text-decoration: none;
	color: #bababa;
	font-weight: bold;
}
a:hover {
	color: #e1e1e1;
}
a.nav:link, a.nav:visited, a.nav:active {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #c3c3c3;
	text-decoration: none;
	display: block;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1px;
}
a.nav:hover {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #939393;
}
h1 {
	font-family: georgia;
	font-size: 32;
	font-weight: normal;
	color: #ffffff;
	text-align: center;
	background-color: #828282;
	margin-top: 0px;
	margin-bottom: 6px;
	letter-spacing: -3px;
	text-transform: lowercase;
}
h2 {
	font-family: georgia;
	font-size: 20;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	text-transform: lowercase;
	background-color: #c8c8c8;
	margin-top: 3px;
	margin-bottom: 6px;
}
tr, td, body, .text {
	font-family: verdana;
	font-size: 7.5pt;
	color: #9b9b9b;
}
textarea {
	font: 6pt verdana;
	color: #FFFFFF;
	background: #d1ece8;
	border: 1px solid #97d5cc;
	margin-bottom: 3px;
	height: 20px;
	width: 88px;
}
b {
	font: 7.5pt verdana;
	font-weight: bold;
	color: #000000;
}
i {
	font: 7.5pt verdana;
	font-weight: normal;
	font-style: italic;
	color: #ababab;
}
.u {
	font: 7.5pt verdana;
	font-weight: normal;
	border-bottom: 1px solid #767676;
	color: #767676;
}
</style>
<center><table>
<td width="150" valign="top">
<div style="width: 150px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;">
<h1>sidebar</h1>
One sidebar! And look! There's one on the other side! :O
<p>
Sometimes one sidebar isn't enough. With just one sidebar, you might find that your sidebar is longer than your main content area. Not cool. With two sidebars, you can split up your content and organize better! :D
</p>
</div>
</td>

<td width="500" valign="top">
<div style="width: 500px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;">
<h1>Header One</h1>
<b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>

</p>
<h1>Header One</h1>
<b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
</div>
</td>

<td width="150" valign="top">
<div style="width: 150px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;">
<h1>sidebar</h1>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<p>

</p>
<h1>Credit</h1>
Layout "skeleton" by <a href="/~Riyvern">Vibe</a>.
</div>
</td>
</table></center>

<style>
#CSSbyiKiwipop {
}
#MadeforVibe {
}
body {
	background: #ededed;
}
.sf {
	display: none;
}
table {
	background: transparent;
}
a:link, a:active, a:visited {
	font: 7.5pt verdana;
	text-decoration: none;
	color: #bababa;
	font-weight: bold;
}
a:hover {
	color: #e1e1e1;
}
a.nav:link, a.nav:visited, a.nav:active {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #c3c3c3;
	text-decoration: none;
	display: block;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1px;
}
a.nav:hover {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #939393;
}
h1 {
	font-family: georgia;
	font-size: 32;
	font-weight: normal;
	color: #ffffff;
	text-align: center;
	background-color: #828282;
	margin-top: 0px;
	margin-bottom: 6px;
	letter-spacing: -3px;
	text-transform: lowercase;
}
h2 {
	font-family: georgia;
	font-size: 20;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	text-transform: lowercase;
	background-color: #c8c8c8;
	margin-top: 3px;
	margin-bottom: 6px;
}
tr, td, body, .text {
	font-family: verdana;
	font-size: 7.5pt;
	color: #9b9b9b;
}
textarea {
	font: 6pt verdana;
	color: #FFFFFF;
	background: #d1ece8;
	border: 1px solid #97d5cc;
	margin-bottom: 3px;
	height: 20px;
	width: 88px;
}
b {
	font: 7.5pt verdana;
	font-weight: bold;
	color: #000000;
}
i {
	font: 7.5pt verdana;
	font-weight: normal;
	font-style: italic;
	color: #ababab;
}
.u {
	font: 7.5pt verdana;
	font-weight: normal;
	border-bottom: 1px solid #767676;
	color: #767676;
}
</style>
<p>
</p>
<center>
<div style="width: 820px; height: auto; border: solid #ffffff 5px; background: #ffffff; text-align: center;">
<img src="http://i40.tinypic.com/1zbfdl0.jpg">
</div>
<div style="width: 820px; height: auto; border: solid #ffffff 5px; background: #ffffff; text-align: center;">
<center><table cellspacing="5" cellpadding="0">
<td width="150" valign="top">
<div style="width: 150px; height: 400px; overflow: auto; background-color: #ffffff; text-align: center;">
<h1>sidebar</h1>
One sidebar! And look! There's one on the other side! :O
<p>
Sometimes one sidebar isn't enough. With just one sidebar, you might find that your sidebar is longer than your main content area. Not cool. With two sidebars, you can split up your content and organize better! :D
</p>
</div>
</td>

<td width="500" valign="top">
<div style="width: 500px; height: 400px; overflow: auto; background-color: #ffffff; text-align: center;">
<h1>Header One</h1>
<b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>

</p>
<h1>Header One</h1>
<b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?

<h1>Header One</h1>
<b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>

</p>
<h1>Header One</h1>
<b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
</div>
</td>

<td width="150" valign="top">
<div style="width: 150px; height: 400px; overflow: auto; background-color: #ffffff; text-align: center;">
<h1>sidebar</h1>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<p>

</p>
<h1>Credit</h1>
Layout "skeleton" by <a href="/~Riyvern">Vibe</a>.
</div>
</td>
</table></center>
</div>
</center>

Blog.

Single Blog

<style>
#CSSbyiKiwipop {
}
#MadeforVibe {
}
body {
	background: #ededed;
}
.sf {
	display: none;
}
table {
	background: transparent;
}
a:link, a:active, a:visited {
	font: 7.5pt verdana;
	text-decoration: none;
	color: #bababa;
	font-weight: bold;
}
a:hover {
	color: #e1e1e1;
}
a.nav:link, a.nav:visited, a.nav:active {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #c3c3c3;
	text-decoration: none;
	display: block;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1px;
}
a.nav:hover {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #939393;
}
h1 {
	font-family: georgia;
	font-size: 32;
	font-weight: normal;
	color: #ffffff;
	text-align: center;
	background-color: #828282;
	margin-top: 0px;
	margin-bottom: 6px;
	letter-spacing: -3px;
	text-transform: lowercase;
}
h2 {
	font-family: georgia;
	font-size: 20;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	text-transform: lowercase;
	background-color: #c8c8c8;
	margin-top: 3px;
	margin-bottom: 6px;
}
tr, td, body, .text {
	font-family: verdana;
	font-size: 7.5pt;
	color: #9b9b9b;
}
textarea {
	font: 6pt verdana;
	color: #FFFFFF;
	background: #d1ece8;
	border: 1px solid #97d5cc;
	margin-bottom: 3px;
	height: 20px;
	width: 88px;
}
b {
	font: 7.5pt verdana;
	font-weight: bold;
	color: #000000;
}
i {
	font: 7.5pt verdana;
	font-weight: normal;
	font-style: italic;
	color: #ababab;
}
.u {
	font: 7.5pt verdana;
	font-weight: normal;
	border-bottom: 1px solid #767676;
	color: #767676;
}
</style>
<p>
</p>
<center><table><td width="815" valign="top">
<div style="width: 815px; height: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;">
<h1>Header One</h1>
This section will stretch. Just keep typing. ^^
</div>
</td></table></center>
<center><table><tr>
<td width="600" valign="top">
<div style="width: 600px; height: 400px; overflow: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;">
<h1>Header One</h1>
<b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>

</p>
<h1>Header One</h1>
<b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>

</p>
<h1>Header One</h1>
<b>bold</b> <i>italic</i> underline <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
</div>
</td>

<td width="200" valign="top">
<div style="width: 200px; height: 400px; overflow: auto; background-color: #ffffff; padding: 5px; border: 1px gray solid; text-align: center;">
<h1>sidebar</h1>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<a href="/~riyvern" class="nav">link</a>
<p>

</p>
<h1>Credit</h1>
Layout "skeleton" by <a href="/~Riyvern">Vibe</a>.
</div>
</td>
</tr></table></center>

Multiple Blog

<style>
#CSSbyiKiwipop {
}
#MadeforVibe {
}
body {
	background: #ededed;
}
.sf {
	display: none;
}
table {
	background: transparent;
}
a:link, a:active, a:visited {
	font: 7.5pt verdana;
	text-decoration: none;
	color: #bababa;
	font-weight: bold;
}
a:hover {
	color: #e1e1e1;
}
a.nav:link, a.nav:visited, a.nav:active {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #c3c3c3;
	text-decoration: none;
	display: block;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1px;
}
a.nav:hover {
	font: 14px century gothic;
	font-weight: normal;
	color: #ffffff;
	background-color: #939393;
}
#save {
	top: 0px;
	left: 750px;
}
#main {
	top: 50px;
	left: 200px;
	width: 500px;
	height: 300px;
	overflow: hidden;
	text-align: center;
	background-color: #ffffff;
	border: 5px solid white;
}
#navi {
	top: 30px;
	left: 200px;
	width: 500px;
	height: auto;
	text-align: right;
}
#stripe {
	top: 100px;
	left: 0px;
	width: 100%;
	height: 200px;
	background-color: #828282;
	border-top: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
}
#title {
	top: 370px;
	left: 300px;
	width: auto;
	height: auto;
}
#shadow {
	top: 370px;
	left: 297px;
	width: auto;
	height: auto;
	z-index: 50;
}
h1 {
	font-family: georgia;
	font-size: 32;
	font-weight: normal;
	color: #ffffff;
	text-align: center;
	background-color: #828282;
	margin-top: 0px;
	margin-bottom: 6px;
	letter-spacing: -3px;
	text-transform: lowercase;
}
h2 {
	font-family: georgia;
	font-size: 20;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	text-transform: lowercase;
	background-color: #c8c8c8;
	margin-top: 3px;
	margin-bottom: 6px;
}
tr, td, body, .text {
	font-family: verdana;
	font-size: 7.5pt;
	color: #9b9b9b;
}
textarea {
	font: 6pt verdana;
	color: #FFFFFF;
	background: #d1ece8;
	border: 1px solid #97d5cc;
	margin-bottom: 3px;
	height: 20px;
	width: 88px;
}
b {
	font: 7.5pt verdana;
	font-weight: bold;
	color: #000000;
}
i {
	font: 7.5pt verdana;
	font-weight: normal;
	font-style: italic;
	color: #ababab;
}
i.a {
	font: 50px georgia;
	font-weight: normal;
	font-style: italic;
	color: #828282;
}
i.b {
	font: 50px georgia;
	font-weight: normal;
	font-style: italic;
	color: #000000;
}
.u {
	font: 7.5pt verdana;
	font-weight: normal;
	border-bottom: 1px solid #767676;
	color: #767676;
}
</style>
<div id="navi" style="position: absolute;">
<a href="#one">one</a> | <a href="#two">two</a> | <a href="#three">three</a> | <a href="#four">four</a> | <a href="#five">five</a> | <a href="#six">six</a> | <a href="/~riyvern">css</a> 
</div>
<div id="stripe" style="position: absolute;">
</div>
<div id="title" style="position: absolute;">
<i class="a">your page title here * *</i>
</div>
<div id="shadow" style="position: absolute;">
<i class="b">your page title here * *</i>
</div>
<div id="main" style="position: absolute;">
<a name="one"></a>
<div style="width: 500px; height: 300px; overflow: auto;">
<h1>Section one</h1>
<b>bold</b> <i>italic</i> <font class="u">underline</font> <a href="/~riyvern">link</a>
<p>
This look pretty plain, huh? Well, that the point. This is a "skeleton" or template. Edit this however you want, just don't remove the credit. Don't know how to edit layouts? Check out one of the tutorials listed on Vibe. Good luck! :D
</p>
<p>
<i>I'll admit. This skeleton is more advanced than the others, but that's because it's uber spiffy!</i>

</p>
<h2>Header Two</h2>
Add more headers if you want. Make the headers fancy. It's all encouraged. By editing premades and templates you can learn how to create your own layouts. That's how I learned. So why not give it a shot?
<p>
This layout has six different sections, you can add or delete sections if you need to.
</p>
<p>
Please, don't remove the credit. You can move it to a different part of the layout, but it must be on here somewhere!
</p>
<p>
Each section will scroll. All you have to do is type enough.
</p>
<p>
Oh look! The page title looks like it has a dropshadow! Cool, right?
</p>
</div>

<a name="two"></a>
<div style="width: 500px; height: 300px; overflow: auto;">
<h1>section two</h1>
</div>

<a name="three"></a>
<div style="width: 500px; height: 300px; overflow: auto;">
<h1>section three</h1>
</div>

<a name="four"></a>
<div style="width: 500px; height: 300px; overflow: auto;">
<h1>section four</h1>
</div>

<a name="five"></a>
<div style="width: 500px; height: 300px; overflow: auto;">
<h1>section five</h1>
</div>

<a name="six"></a>
<div style="width: 500px; height: 300px; overflow: auto;">
<h1>section six</h1>
</div>
</div>
<div id="save" style="position: absolute;">
</div>