Wacky Onion

About the Owner

I am a university student alternating between school in Flint, MI, and co-op work while living at home in Ann Arbor, MI. I run this blog in my spare time and write about things such as gender and existentialism. More about me

About the Layout

I haven't worked with yellow in a while. It's refreshing. When making this layout, the theme in my mind was "making the pieces fit together." More about the layout

Website Layouts

Some premade site layouts for you to use....Keep credit on please! I only rarely make website layouts, so that's why this is in the archives section.

Comicky


Preview below
Preview
Download

Bare-Boned


Preview below
Preview
Download

"Grunge"

Preview below
Preview
Download

Grey Tables

Preview below
Preview
Download

Lavender CSS
Download
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Lavender Preview</title>
<style type="text/css">

body {
	background-color: #E3E4FA;
	font-size: 14pt;
	color: #808080;
	margin-left: 25%;
	margin-right: 25%;
	text-align: center;
	font-family: tahoma;}

a.nav:hover {font-family: times new roman; color: #808081; font-size: 22pt; border: 2px dashed #E3E4FA;
	     letter-spacing: -2px;}
a.nav:link, a.nav:visited, a.nav:active {font-family: times new roman; color: #808080; font-size: 22pt;
	border-bottom: 1px solid #E3E4FA; background-color: transparent;}

a:link, a:visited, a:active {font-family: tahoma; color: #E3E4FA; background-color: #808080;}
a:hover {font-family: tahoma; color: #808080; background-color: transparent;}

.conte {
	background-color: white;
	border: 2px dashed #808080;
	width: 100%;
	padding: 10px;}

h1 {
	background-color: #808080;
	border: 2px solid #E3E4FA;
	font-family: georgia;
	font-size: 18pt;
	color: #E3E4FA;
	text-align: center;}

</style>

<div class="conte">

<a class="nav" href="#">Home</a>
<a class="nav" href="#">Site</a>
<a class="nav" href="#">Content</a>
<a class="nav" href="http://wackyonion.com/">Credit</a>

<h1>Header.</h1>
Text here. xD<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!">
    </a>
</p>
     
	 <a href="http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwackyonion.com%2FOld%2Fpreviews%2Flay4.html&warnings=yes">
	 HTML</a>
</div>

Khaki CSS Layout
Download
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Welcome to Site Name!</title>
<style type="text/css">
 body {	
	background-color: #ADA96E;
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-size: 20pt;
	color: #EDE275;
	font-family: "times new roman";}

 a.nav:active, a.nav:link, a.nav:visited {color: #827839; font-size: 22pt; font-family: tahoma;}
 a.nav:hover {color: #FFFFFD;}

 a:link, a:active, a:visited {
 font-size: 20pt; 
 color: #827839; 
 font-family: "times new roman";}
 a:hover {font-size: 20pt; font-family: "times new roman"; color: #FFFFFD;}

 #containder {
	margin-left: 25%;
	margin-right: 25%;
	background-color: white;
	width: 600px;
	margin: 2px auto;}

 #sitename {
	background-color: #696565;
	font-size: 42pt;
	font-family: tahoma;
	color: #ADA96E;
	width: 100%;
	padding: 1px;}

 #navbar {
	background-color: #4C4646;
	width: 602px;
	text-align: center;}

 #content {
	width: 602px;
	text-align: center;
	background-color: #696565}

 #other {
	width: 602px;
	text-align: center;
	background-color: #CCCCCC;
	font-size: 16pt;
	color: white;}

 h1 {
	background-color: #C0C0C0;
	font-family: tahoma;
	font-size: 22pt;
	color: #EDE275;}

 b {
	font-size: 22pt;
	color: #ADA96D;}

 u {
	color: #FFFFFD;
	font-size: 20pt;
	border-bottom: 2px solid gray;}

 i {
	color: #4C4645;
	font-size: 20pt;}

 blockquote {
	background-color: #CCCCCC;
	color: white;
	border: 2px dashed white;}
	
</style>

<div id="containder">
<div id="sitename">
Site Name
</div>
<div id="navbar">
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Linky</a>
<a class="nav" href="#">Link</a>
</div>
<div id="content">
<h1>This is a header.</h1>
Thanks for using one of Wacky Onion's weblayouts!
Woo! This layout is chunky! :D
If you don't want it to be chunky, change the font sizes to
something smaller. To make it align to the left, erase the "margin: 2px auto;" in the
containder section...thingy.<br>
<b>bold</b> <i>italic</i> <u>underline</u>
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!">
    </a>
</p>
    HTML {http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwackyonion.com%2FOld%<br>2Fpreviews%2Fkhakicssprev.html&warnings=yes}
</div>
<div id="other">
Affies, credit, or other such things here.<br>
Coding by <a href="http://wackyonion.com/" target="_blank">Tee.</a> Content by you.
</div>
</div>

Blue/grey tables layout

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Welcome to the Wacky Onion!</title>
<style type="text/css">
body {
background-color: #646D7E; 
background-repeat: no-repeat;
font-family: "century gothic"; 
font-size: 10px; 
color: #307D7E;
margin: 0px; 
padding: 0px;
}

a:link, a:active, a:visited {text-decoration: none; color: #736F6E; font-size: 14px;}
a:hover {color: #ffffff;
font-size: 14px;}

.head {color: #98AFC7; font-size: 8pt; font-weight: bold; padding-left:2px; background-color: #ffffff; 
display:block; text-transform: lowercase; width:130px; text-align: center;}
.h1 {color: #98AFC7; font-size: 10pt; font-weight: bold; padding-left:2px; background-color: #ffffff; 
display:block; text-transform: lowercase; width: 100%;}

b {color:#cccccc;}
i {color:#98AFC7;}
u {color:#999999; border-bottom: #cccccc}

textarea{
color:#000000;
background:#ffffff;
border:1px dashed #000000;
font-family:arial, sans-serif; 
font-size:11px;
}
</style>

<div align="center">
<center>
<table border="0" cellspacing="2" width="800" id="AutoNumber1" style="border-collapse: collapse" cellpadding="0">
<tr>
<td width="150" rowspan="2" valign="top" bgcolor="#FFFFFF">
<center>
<p align="center">
<p class="head">Sitely</p>

<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>

<p class="head">Credit</p>

Layout by <a href="http://wackyonion.awardspace.us/" target="_blank">Wacky Onion</a>.
And some other stuff here.


</center>
</td>
<td width="600" height="300" align="center" valign="top" bgcolor="#FFFFFF">
<img src="http://i252.photobucket.com/albums/hh36/teeshrox/bannah1.png" border="1" alt="Bananas~"></td>
<td width="150" rowspan="2" valign="top" bgcolor="#FFFFFF">
<center>
<p align="center">
<p class="head">Sitely</p>

<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>

<p class="head">Code~</p>
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!">
    </a>
</p>
<a href="http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwackyonion.com%2FOld%2Fpreviews%2Flayoutprev3.html&warnings=yes">
HTML</a>
            


</center>
</td>

</tr>
<tr>
<td width="700" valign="top" bgcolor="#FFFFFF">
<p align="center">
<font size="2">

<b>About the Layout</b><br><br>
<b>Bold</b> <i>Italic</i> <u>Underline</u><br>
I found out that I like blue/grey layouts. That's why this one is blue and grey.
Although the banner is a picture of ocean waves, it's not the main theme so you
can change the pic. If you do, I recommend setting the width to 600px.
The text is <b>centered</b> but you can change it to however
you want. As always, edit to your heart's content but keep the credit on! You can
elect to place the credit on your credits page, that's fine with me as long as you keep
it on. =P Happy using!<br>
-Tee (7/20/09), edited on 8/14/10<br>
http://wackyonion.com/

</font>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#ffffff">
<center>
Credits, Affies, marquee messages, or whatever can go here. =]</center>

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

Blue/grey div layout
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Site Title Here!</title>
<style type="text/css">
body {
background-color: black; 
font-size: 12px; 
color: #ffffff; 
font-family: "century gothic";
}

a.nav:link, a.nav:visited, a.nav:active {
font-family: "century gothic"; 
font-size: 12px; 
line-height: 9pt; 
color: #ffffff;
background-color: transparent; 
display: block; 
text-align: center;
 margin-bottom: 1px;
 }

 a.nav:hover {
font-family: "century gothic"; 
font-size: 10px;
line-height: 9pt; 
color: #ffffff; 
background-color: gray; 
display: block;
text-transform: lowercase; 
margin-bottom:1px;
}

a:link, a:visited {
color: #FFFFFD;
}

A:active, A:hover {
color: #67BF56; 
background-color: white;
}

b, strong {
color: #666666; 
background-color: #ffffff; 
text-decoration: none;
}

u {
color: #666667;
}

i {
color: #666667; 
text-decoration: none; 
font-weight: bold;
}

h1 {
font-family: arial, serif; 
font-size: 14px; 
background-color: #666666;
color: #CCCCCC; 
letter-spacing: 1px; 
text-align: center; 
text-transform: lowercase;
padding: 4px;
}

</style>


<center>
<table border="0" width="800">
<tr>
<td colspan="3" valign="top" align="center">
<img src="http://i252.photobucket.com/albums/hh36/teeshrox/banner.png" border="0" alt="Banner here">
</td></tr>
<tr>
<td width="25%" valign="top" bgcolor="#6D7B8D">
<h1>Code~</h1>
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!">
    </a>
</p> 

<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></a>
  </p> 



<h1>Sitely</h1>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<h1>Content</h1>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
</td>
<td width="75%" valign="top" bgcolor="#6D7B8D">
<h1>Header</h1>

<b>Bold</b> <i>Italic</i> <u>Underline</u> text
</td>
</tr>
</table> 
</center>

Simple Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Welcome to Site Name!</title>
<style type="text/css">
body 
{background-color: #ffffff;
}

a:link, a:active, a:visited {
text-decoration: none; 
color: #736F6E; 
font-size: 14px;
}

a:hover {
color: #cccccc; 
background-color: #ffffff;
font-size: 14px;
}

a.nav, a.nav:active, a.nav:link, a.nav:visited {
text-decoration: none; 
color: gray; 
font-size: 22px;
font-family: "times new roman";
}

a.nav:hover {
text-decoration: none; 
color: black; 
font-size: 22px;
}

h2 {
border-bottom: 2px solid gray; 
margin-right: 30px; 
margin-left: 20px; color: gray;
font-size: 14px; 
font-family: courier; 
text-align: center; 
width: 110px;
}

h1 {
border-bottom: 2px solid gray; 
color: gray;
font-size: 16px; 
font-family: courier; 
text-align: center; 
width: 100%;
}

#maincontent {
position:absolute; 
top: 0px; 
left: 170px; 
width: 600px; 
border: 1px dotted gray;
}

#sidecontent {
position:absolute; 
top: 0px; 
left: 223px; 
width: 150px; 
border: 1px dotted gray;
}

</style>

<div id="sidecontent">
<h1>Code~</h1>
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></a>
  </p>
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!">
    </a>
</p>

  
<h1>Credits</h1>
Coding by <a href="http://wackyonion.awardspace.us" target="_blank">Wacky Onion</a>
Content by you.. Add disclaimer here. And other credit-ly stuff.

<div id="maincontent">
<center>
<a class="nav" href="#">Home</a> | <a class="nav" href="#">Site</a> | <a class="nav" href="#">Content</a> 
</center>
<h1>Dadumdadum</h1>
Thanks for using one of Wacky Onion's web layouts! Keep credit on, or else Tee'll hunt
you down and mount you on her Wall of Shame! -gasp- This layout is pretty simple. You
can add a background image if you like. Just replace "http://imageurl" with your actual
image URL. :) Feel free to change colors, adjust stuff, or just whatever. :P Replace the
link *points up* with your own URL.
</div>
</div>

Top
<--Back | Reload | Forward-->