:: Neo-Reality :: Website Layouts

Website Layouts

To copy the coding, simply press the "ctrl" key and the "C" key on the keyboard at the same time. Do not ask us to email you the code as we are not very likely to do so.

These website layouts can be used for your guild website, neopets help site or even just a random personal site. To use them, copy and paste the code into your web host and voila! You are allowed to alter some images to your liking as long as our credit (full link back to Neo-Reality) is visible on every single page.

Version: Books
Type: Tables

<html>
<head>
<title>New Page 1</title>
<style type="text/css">
body{font-size: 8pt;font-family: verdana, tahoma, arial, helvetica, sans-serif;color: #000000;
  scrollbar-face-color:#ECC8EC;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-3dlight-color:#FFFFFF;
  scrollbar-darkshadow-color:#FFFFFF;
  scrollbar-shadow-color:#FFFFFF;
  scrollbar-arrow-color:#A48D95;
  scrollbar-track-color:#F5F5DC;}
td, p {font-size: 8pt;font-family: verdana, tahoma, arial, helvetica, sans-serif;color: #000000;}
h1 {color: #000000; font-size: 14px; font-weight: bold; text-align: center; font-family: arial, verdana; background-color:#EED2EE;}
.nav {background-color: #FFF8DC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; margin:0; padding:2px;}
.nav2 {background-color: #FFF8DC; border: 1px solid #000000; margin:0; padding:2px;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
.side {width:170; height:30; color: #000000; font-size: 14px; font-weight: bold; background-image: url('http://img.photobucket.com/albums/v285/neoreality1/websites/booknav.gif'); padding: 6px;}
.main {width: 400px; border: 1px solid #000000; padding: 3px; text-align: justify; background-color:#FFFAF0;}
a.nav, a.nav2 {width:165; color: #4F2F4F; text-decoration: none; font-weight: none; cursor: default;}
A:link, A:visited, A:active {color: #4F2F4F; text-decoration: none; font-weight: none; cursor: default;}
A:hover {color: #A48D95; text-decoration: none; font-weight: bold; cursor: default;}
</style>
</head>

<br><div class="side">Heading</div>

<br><br><div class="side">Heading</div>

<h1>About this Layout</h1>
<p>
There's so many book guilds out there that I thought that I would make a layout that they could use, should they ever have a guild website. Unfortunately, the coding is a little messy. Ok, fine, that was an under-statement, the coding is very messy.
<p>
I have to say, the CSS in this table layout is stuffed, and matches the amount in my Hasee web layout, but I think the effect is really nice so I'll let it be. The color scheme was decided after I made the images, so if you think it looks weird.... tough.

</div></center>
<p>

<center><div class="main">
<h1>Using this Layout</h1>
<p>
Ok, I've separated all sections quite clearly so just copy and paste if you want to add another content box or another navigation section to this layout.
<p>
The link system on the other hand is a little unique. All links in the navigation should be classed as "nav" BUT the last one needs to be classed as "nav2" for the box to close itself. If you don't change the last link to that, then the link sections won't close itself off.
<p>
Do note that all the colors are placed in the CSS with the exception of the background color, which is embedded in the body tag.

</div></center>
<p>

<center><div class="main">
<h1>Credits and Copyrights</h1>
<p>
To add everything up, this layout took me just over an hour to code so hands off the coding! I will allow you to edit anything you want as long as the credit (full link back to Neo-Reality) remains visible on every page that you have this layout on. Credit will only be needed on the index page if your entire website is based on frames.
<p>
Sites found without credit, and trust me I will find you, will have their sites frozen without warning. I am actually not going to give them a warning unless the problem is minor. So if you steal this, you can kiss your site goodbye.

</div></center>
<p>

</td></tr><tr><td colspan="2" width="600" background="http://img.photobucket.com/albums/v285/neoreality1/websites/bookbottom.gif" height="30">

<center><b>Site Content by YOU | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Most Images from <a href="http://www.neopets.com">Neopets.com</a></b></center>

</td></tr>
</table>
<p>

</body>
</html>

Version: Chocolate
Type: Div Layers

<html>
<head>
<title>Title here</title>

<p align="right" class="head">Heading</p>
<p align="right">
<a href="index.html">Link 1</a><br>
<a href="index.html">Link 2</a><br>
<a href="index.html">Link 3</a><br>
<a href="index.html">Link 4</a><br>
</p>

<p align="right" class="head">Credits</p>
<p align="right">
Site Content<br>
YOUR SITE<br>
Images from<br>
<a href="http://www.neopets.com" target="_blank">Neopets.com</a><br> 
Layout Code<br> 
<a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a>

<p class="head">About this Layout</p>
<p>
Yummy! A new layout featuring the crumptious chocolate theme! This layout is different to all other layouts I have made becaus it's a Div Layered code rather than a tables layout.

</p>

<p class="head">Using this Layout</p>
<p>
Be very very very careful when you edit the content because you might accidently erase a whole layer! To get a new heading, just copy the code above and paste it wherever you want. This is the same for the navigation as well.
<p>
If you find the text a little hard to read, I suggest making the text a little lighter, and the contrast should make everything more visible :)

</p>

<p class="head">Copyrights and Credits</p>
<p>
You must absolutely NOT remove my credit for making this layout. There must be a link back to Neo-Reality on all pages, even if you have changed the top banner. The Credit section of the navigation is not allowed to be removed, and you may only edit the part where it says "YOUR SITE". 
Images are from Neopets.com, and failure to put that up might mean a big lawsuit.
</p>

Version: Desert
Type: Div Layers

<html>
<head>
<title>¡им¡им YOUR WEBSITE NAME HERE ¡им¡им</title>
<style type="text/css">
body {color: #000000; background-color: #EBCA8E; font-size: 10px; font-family: verdana; background-attachment:fixed;
scrollbar-track-color: ##EBCA8E; 
scrollbar-base-color: #EBCA8E; 
scrollbar-face-color:#EBCA8E; 
scrollbar-highlight-color: #EBCA8E; 
scrollbar-3dlight-color: #EBCA8E;
scrollbar-shadow-color: #EBCA8E; 
scrollbar-darkshadow-color: #EBCA8E;
scrollbar-arrow-color: #FCE92F;}
a:link, a:visited  {color:#EFBB10; text-decoration:none; font-weight: bold;}
a:hover {color:#FCE92F; text-decoration: none;}
background-repeat:no-repeat;}
body, td {font-family: verdana; font-size: 10px; color: #000000;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
.head {text-decoration: none;font-weight:bold;color: #FFFFFF;border: 1px solid #AD312A;letter-spacing:2px;padding-top:3px;padding-left:1px;font-family: verdana;height:20px;text-align: center; margin.height: 5px; background-color: #EE7347;}
</style>
</head>

<p class=head><b>Navigation</b></p>
<p>
<b>-</b> <a href="http://">Link Here</a><br>
<b>-</b> <a href="http://">Link Here</a><br>
<b>-</b> <a href="http://">Link Here</a><br>
<b>-</b> <a href="http://">Link Here</a></p>

</p>
</div><div  style="index: 2; left: 205; overflow: visible; width: 300; position: absolute; top: 330; height: 650"><b>

<p class="head" align="left">About this Layout</p></b> 
<p>

Very simple layout and it shouldn't be too hard to use :) The coding (base) is done by Jen, the codeing (editing) and all graphics are done by Kathrin. Layout and codeing are copyrighted to Neo-Reality. Stealing, editing, redistributeing ect is strictly against our rules. By useing this web layout you agree to Neo-Reality's rules.

<b><p class="head" align="left">Using this Layout</p></b> 
<p>
Ok, it's not so hard to use. Just don't touch the codes where it says "div" and you'll be all sweet. Only touch the div tags to make your blog bigger in size by making the number after "height:" bigger by another hundred.
<p>
Other than that, edit as much as you want - go nuts, I don't mind.
<p>
<center><b>BUT YOU MUST KEEP MY CREDIT OR ELSE!</b></center>
<p>
Thieves be warned: WE WILL track you down and your site <b>WILL</b> get frozen.
<p>

</b></div>

<p class=head><b>Affiliates</b></p>
<p>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>
<center>button</center><br>

<p class=head><b>More Links</b></p>
<p>
<b>-</b> <a href="http://">Link Here</a><br>
<b>-</b> <a href="http://">Link Here</a><br>
<b>-</b> <a href="http://">Link Here</a><br>
<b>-</b> <a href="http://">Link Here</a></p>

</p>

<p class=head><b>Credits</b></p>
<p>
<b>-</b> Layout by <a href="http://www.neo-reality.org" target="_blank>Neo-Reality</a><br>
<b>-</b> Some images by Neopets.com<br>
<b>-</b> Your host<br>
<b>-</b> Other credits<br>

</p>
</div>
</BODY>
</HTML>

Version: Dr Sloth
Type: Tables

<p class="head">heading</p>
<div class="n">
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a>
</div>

<p class="head">Credits & Copyrights</p>
<div class="n">
Thank You <a href="http://neo-reality.org">Neo-Reality</a><br>
for the website layout

</div>

</td>
<td width="450" valign="top">

<p class="head">Using this Layout</p>
<div class="k">
This layout is very easy to use, actually. Simpley copy and paste the entire code onto all the pages that you need it on. Then change the links to your liking. Remember, this is a <b>Website</b> layout,
the code is not ment to be used on a Neopets Petpage. Removing the credit will result in your site being reported. Remeber that the code is copyrighted too! If your confused on something about this layout
or want more information about the copyright, please contact Kathrin at Kathrin433@yahoo.com
</div>

<p class="head">About this Layout</p>
<div class="k">
Wow, good question. I made this layout mainly out of bordom and because theres quite a few sloth images out there. That, and finally, of course, I wanted to do something a little less "girly" so that our main 
visitors out there won't be scared off by the never ending wave of pinkness :). I think it turned out rather nice, and quite simple which I preffer in web layouts :P

</div>

</td><td width="150" valign="top" cellspacing="25">
<p class="head">heading</p>
<div class="n">
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a><br>
~ <a href="http://">Link Here</a>
</div>

</body></html>

Version: Evil Fuzzless
Type: Div Layers

<html>
<head>
<title>- - Title here -</title>

</div><div style="position:absolute; left:18px; top:20px; width:151px;">

<h2 align="center">[Heading]</h2>

<h2 align="center">[Heading]</h2>

<h2 align="center">[Credits]</h2>

Site by YOU<br>
Images from <a href="http://www.neopets.com" target="_blank">Neopets</a><br> 
Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a>

<h1 align="right">[About this Layout]</h1>
A collaboration between Jen and Kathrin results in the scariest website layout around, lol. It started off with an underlying template idea and all we needed was a theme to go with it. Unfortunately, Kathrin didn't want an overused theme so out came the fuzzle idea.
<p>
The color scheme is amazing because you see just about every color of the spectrum and yet it actually works out pretty well. The main color is red-brown followed with a dash of light blue, an unsual combination, but I think it's very original.
<p>

<h1 align="right">[Using this Layout]</h1>
It's another div layer web layout so be sure not to delete any of the div codes when you're adding content. There are 3 div boxes, the very first is the scrolling affiliates (you'll have to find the slower and stopping version of the marquee code yourself), the second is the navigation which is extremely long to compensate for the fact that there's only one sidebar, and last but not least, the main content section, which is what you're staring at now.
<p>
Headings are easy, they're not CSS classed, in fact, they're simple heading tags that I've modified a bit. You can just copy and paste if you're not sure how they work. Do note that te content headings and the navigation headings are not the same.
<p>

<h1 align="right">[Copyrights and Credits]</h1>
<p>
If you're thinking "by golly gosh, this is a great layout, I wonder how it would look if I took off the credit", <b>DON'T</b>! This layout was made by two people who absolutely do not tolerate theft and by stealing this layout, you would be invoking the wrath of two people as opposed to just one.
<p>
Credit needs to be seen on <i>every</i> page that this layout is displayed. Only the index page is needed if you add frames into this layout. Lack of credit will be taken as theft. You may NOT redistribute this layout or claim it as your own.
<p>

Version: Meridell
Type: Tables

<html>
<head>
<title>.: your title here :.</title>

<b>About this Layout</b><br><hr align="left" width="400"><br>

Meridell was definitely not the theme I was going for when I made this layout, I was actually thinking about something to do with spring. But since there are just about zero neopets images of spring, I thought I would move on to the next closest thing to a spring layout.
<p>
The entire layout is a little too simple for my taste, but it would be extremely easy to edit for people new to HTML and CSS. The navigation siebar is smaller than average so be sure to shorten your link names down. But all in all, it's a very neat layout and people will find it easy to navigate around it.
<p>

<b>Using this Layout</b><br><hr align="left" width="400"><br>

This is probably the only layout that doesn't have a proper CSS classed heading. It's pretty easy to figure out how to use them, but if you're stuck, just copy and paste a previous heading. Do note that the headers for the main content and navigation are different.
<p>
The affiliates section is at the bottom. You might want to change the marquee tags to slow down and stop when you hover over it but that's up to you to find out the code.
<p>

<b>Cedits and Copyrights</b><br><hr align="left" width="400"><br>

Despite it's simplicity, I really do love this layout. You if dare remove the link back to Neo-Reality, you will be in big trouble. I don't take kindly to thieves, never have, never will. Even my affiliates have been persecuted in the past for theft so don't think you can get away with it.
<p>
You are free to edit anything you want on this layout provided that a full link back to Neo-Reality is given on every page that the layout is displayed on. Credit only needs to be shown on the index page if the layout uses iframes for all pages.
<p>
A link back to Neopets needs to be shown if you use any neopets images at all. We will not take any responsibility if you decide to break their terms and conditions.
<p>

</td><td width="140" style="padding-right:63px;" valign="top">

<b>Navigation</b><br><hr align="left"><br>

<b>Navigation</b><br><hr align="left"><br>

<b>Credits</b><br><hr align="left"><br>

Content by YOU<br>
Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
Images by <a href="http://www.neopets.com" target="_blank">Neopets</a><br>
Hosted by YOUR HOST<br>
<p>

</td></tr>
<tr><td style="padding-left:55px; padding-right:55px;" colspan="2">

Version: Mystery Island
Type: Div Layers

<html>
<head>
<title>--- Your site name</title>
<style type="text/css">
body {background-image:url('http://img.photobucket.com/albums/v357/neoreality3/websites/islandbg.gif'); background-color: #06D3FF; background-repeat: repeat-y; font-size:10pt; font-family: arial, verdana; color:#000000;scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#06D3FF; scrollbar-face-color:#71C2CE; scrollbar-highlight-color:#9CE3EE; scrollbar-3dlight-color:#9CE3EE; scrollbar-darkshadow-color:#3693A1; scrollbar-shadow-color:#3693A1;}
td {font-size:10pt; font-family: arial, verdana; color:#000000;}
h1 {font-size:14pt; font-family: courier new; color:#465B5D; letter-spacing:3px; font-weight:bold;}
.nr {width:220px; border:2px solid #0294B3; background-color:#FFFFFF;}
.jk {width:150px; border:2px solid #01A436; background-color:#FFFFFF;}
#nav {display:block; background-color:#FBF3EB; font-size:12pt; font-family: century gothic, verdana; color:#9E6504; border-bottom: 1px dashed #C78739; text-decoration: none;}
.head {font-size:14pt; font-family: arial, century gothic; color:#C78739; letter-spacing:2px; font-weight:bold; background-color:#EFD2B1; text-align:right;}
.head2 {font-size:14pt; font-family: arial, century gothic; color:#C78739; letter-spacing:2px; font-weight:bold; background-color:#EFD2B1; text-align:left;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify;}
.extra {font-size:14pt; font-family: arial, century gothic; color:#239420; letter-spacing:2px; font-weight:bold; background-color:#B6F0B5; text-align:center;}
a:link, a:active, a:visited {font-size:10pt; font-family: arial, verdana; color:#106375; text-decoration:none;}
a:hover {border-bottom: 1px dashed #106375; color:#F3FEFF; cursor: ne-resize;}
</style>
</head>
<body bgcolor="#06D3FF">

<table class="nr" align="center"><tr><td class="head">graphics</td></tr><tr><td>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
</td></tr><tr><td class="head2">site name</td></tr></table><p>

<table class="nr" align="center"><tr><td class="head">tutorials</td></tr><tr><td>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
<a id="nav" href="http://">Link here</a>
</td></tr><tr><td class="head2">site name</td></tr></table><p>

</div><div style="position:absolute; width:390; height:35; left:295; top:83; font-size:20pt; font-family: verdana, times, century gothic;letter-spacing:2px;color:#06758D;">

</div><div style="position:absolute; width:385; left:295; top:160;">

<h1>//About this Layout//</h1>

Pretty simple layout... or is it? The coding is pretty intense since I didn't take many shortcuts to achieve this layout, but I think the overall effect is quite nice.
<p>
I made this layout mostly because I found the picture and because I could. That's probably why the layout itself is quite simple when you look at it. It features a picture of Mystery Island, and then the rest is just pure water.
<p>
I have made this layout as customizable as I possibly could. If you notice to the left, you will see spaces on the navigation for your site name. Don't forget to edit that part when you're adding in your information.
<p>

<h1>//Using this Layout//</h1>

If you are unfamiliar with CSS, I strongly recommend you stay away from editing this layout. I would suggest you brush up on your classes and ids before attempting to model this layout on your own.
<p>
<center><img src="http://images.neopets.com/new_shopkeepers/t_755.gif"></center>
<p>
To make long story short, this layout is a div layout, featuring some tables in the side navigation. I have also taken the liberty to make a space for your site name for those of you who like to customize your layout as much as possible.
<p>

<h1>//Credits and Copyright//</h1>

Yes you are free to edit this layout to your liking BUT our credit must remain on every page that this layout is used on. If you are using iframes, then only the index page needs to be credited. Please do not take portions of this layout to make your own layout - that is still considered stealing under international law.
<p>
Giving credit just on the credits page is not enough. This is <i>our</i> coding, and if you don't wish to respect our copyright, then don't use this layout. We value originality, not theft.
<p>

</div><div style="position:absolute; width:220; left:690; top:25;">

<table class="jk" align="center"><tr><td class="extra">advertise</td></tr><tr><td style="padding:3px;">

advertisements here

</td></tr></table><p>

<table class="jk" align="center"><tr><td class="extra">affiliates</td></tr><tr><td style="padding:3px;">

affiliates here

</td></tr></table><p>

<table class="jk" align="center"><tr><td class="extra">topsites</td></tr><tr><td style="padding:3px;">

topsites here

</td></tr></table><p>

chat box here
<p>
you can get it from cbox or shoutbox or wherever.

</td></tr></table><p>

<table class="jk" align="center"><tr><td class="extra">credits</td></tr><tr><td style="padding:3px;">

<b>Site ©</b> YOU<br>
<b>Layout ©</b> <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
<b>Images ©</b> <a href="http://www.neopets.com" target="_blank">Neopets</a><br>
<b>Hosted by</b> HOST<br>

</td></tr></table><p>

</div>
</body>
</html>

Version: Soaring High
Type: Div Layers

<html>
<head>
<title>~ Title Here ~</title>
<style type="text/css">
body {color: #6768D0; background-color: #C7D9F3; font-size: 10px; font-family: verdana; background-image: url('http://i83.photobucket.com/albums/j305/Neoreality6/WebLayouts/Sky2.gif'); background-repeat: repeat-y;}
scrollbar-track-color: #BBD1F1;  
scrollbar-face-color: #6973D5; 
scrollbar-highlight-color: #949BE2; 
scrollbar-3dlight-color: #AEB3E8;
scrollbar-shadow-color: #2E3ED2; 
scrollbar-darkshadow-color: #2632A0;
scrollbar-arrow-color: #FFFFFF;}
a:link, a:visited  {color:#6973D5; text-decoration:none; font-weight: bold;}
a:hover {color:#8CA6D0; text-decoration: underline-dashed; font-weight: bold;}
body, td {font-family: verdana; font-size: 10px; color: #000000;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #6768D0; text-align: justify}
.head {font-family: Comic Sans MS; font-size: 16px; color: #4C5BE8; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #6973D5;}
</style>
</head>
<body>
<div style="position:absolute; left:0px; top:0px; width:580px; height:400px;">
<img src="http://i83.photobucket.com/albums/j305/Neoreality6/WebLayouts/Sky.gif" width="580" height="400"></div>

<p class="head"><b>Using this Layout</b></p>

This layout is based on div layers, which is relatively easy to code compared to table layouts. You shouldn't really encounter any problems with it.

<p class="head"><b>About this Layout</b></p>

This layout is actually quite old. I love its simplicity. However, I would only recommend this for tiny sites or blog style sites. Larger sites may have trouble with the lack of room. I think its quite cozy, however :P.

<br></div>
<div style="position: absolute; left:416px; top:72px; width:145">
<p class="head"><b>Links</b></p>
<a href="http://www.neo-reality.org">Link One Here</a> <br>
<a href="http://www.neo-reality.org">Link Two Here</a> <br>
<a href="http://www.neo-reality.org">Link Three Here</a> <br>
<a href="http://www.neo-reality.org">Link Four Here</a> <br>
<a href="http://www.neo-reality.org">Link Five Here</a> <br>

<p class="head"><b>Links</b></p>
<a href="http://www.neo-reality.org">Link One Here</a> <br>
<a href="http://www.neo-reality.org">Link Two Here</a> <br>
<a href="http://www.neo-reality.org">Link Three Here</a> <br>
<a href="http://www.neo-reality.org">Link Four Here</a> <br>
<a href="http://www.neo-reality.org">Link Five Here</a> <br>

<p class="head"><b>Credits</b></p>

Site by YOU<br>
Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
Images from <a href="http://www.neopets.com">Neopets.com</a><br>

Version: Snow
Type: Dropdowm Menu

<title>** Your title Here **</title>

var menu1=new Array()
menu1[0]='<a href="index.html">My Page 1</a>'
menu1[1]='<a href="index.html">My Page 2</a>'
menu1[2]='<a href="index.html">My Page 3</a>'
menu1[3]='<a href="index.html">My Page 4</a>'

var menu2=new Array()
menu2[0]='<a href="index.html">My Page 1</a>'
menu2[1]='<a href="index.html">My Page 2</a>'
menu2[2]='<a href="index.html">My Page 3</a>'
menu2[3]='<a href="index.html">My Page 4</a>'

var menu3=new Array()
menu3[0]='<a href="index.html">My Page 1</a>'
menu3[1]='<a href="index.html">My Page 2</a>'
menu3[2]='<a href="index.html">My Page 3</a>'
menu3[3]='<a href="index.html">My Page 4</a>'

var menu4=new Array()
menu4[0]='<a href="index.html">My Page 1</a>'
menu4[1]='<a href="index.html">My Page 2</a>'
menu4[2]='<a href="index.html">My Page 3</a>'
menu4[3]='<a href="index.html">My Page 4</a>'

var menu5=new Array()
menu5[0]='<a href="index.html">My Page 1</a>'
menu5[1]='<a href="index.html">My Page 2</a>'
menu5[2]='<a href="index.html">My Page 3</a>'
menu5[3]='<a href="index.html">My Page 4</a>'
 
var menuwidth='100px'
var menubgcolor='#94e4fc'
var disappeardelay=250
var hidemenu_onclick="yes"

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>  
</head>

<p class="side">Heading</p>

Whatever you want to put here like chat boxes, affiliates, topsites, page counts, stats, or even extra links.

<p class="side">Heading</p>

Whatever you want to put here like chat boxes, affiliates, topsites, page counts, stats, or even extra links.

<p class="side">Heading</p>

Whatever you want to put here like chat boxes, affiliates, topsites, page counts, stats, or even extra links.

<p class="side">Heading</p>
Whatever you want to put here like chat boxes, affiliates, topsites, page counts, stats, or even extra links.

</td><td width="10" rowspan="4" valign="top"> </td><td width="500" colspan="5" style="border-bottom: 1px solid #000000;"><img src="http://i101.photobucket.com/albums/m80/neoreality7/websites/snowtop.gif" width="503" height="300"></td></tr>
<tr><td valign="top" width="90" style="border-left:1px solid #000000;border-right:1px solid #000000;background-color:#bcecfc;">
<center><b><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '100px')" onMouseout="delayhidemenu()">Section 1</a></b></center>
</td><td valign="top" width="90" style="border-right:1px solid #000000; background-color:#bcecfc;">
<center><b><a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '100px')" onMouseout="delayhidemenu()">Section 2</a></b></center>
</td><td valign="top" width="90" style="border-right:1px solid #000000; background-color:#bcecfc;">
<center><b><a href="default3.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '100px')" onMouseout="delayhidemenu()">Section 3</a></b></center>
</td><td valign="top" width="90" style="border-right:1px solid #000000; background-color:#bcecfc;">
<center><b><a href="default4.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '100px')" onMouseout="delayhidemenu()">Section 4</a></b></center>
</td><td valign="top" width="90" style="border-right:1px solid #000000; background-color:#bcecfc;">
<center><b><a href="default5.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '100px')" onMouseout="delayhidemenu()">Section 5</a></b></center>
</td></tr><tr><td valign="top" width="500" colspan="5" style="background-color:#FFFFFF; border:1px solid #000000; padding:3px;">

<p class="head">About this Layout</p>
This snow layout was originally just a table layout and was made earlier on in Neo-Reality's history. I found it to be really plain in the sense that it contained overused images and didn't offer much originality in its design. So this is why I chose to remake the layout into a new table and drop down menu website layout.
<p>
When I was designing this layout, the dropdown menu was the main navigation system and the sidebar was to put stuff like chat boxes or affiliates or topsite buttons etc. But you are also free to add links or other navigation stuff there as well.

<p class="head">Using this Layout</p>
The color scheme is all over the place. If you plan on editing the color scheme, then try and spot the hash symbols in the layout. They should be self-explanatory as to what colors they specify, but I do suggest brushing up on your CSS a little before attempting anything.
<p>
The drop down menu is a bit harder to edit. To add more pages to a drop down section, go to the javascript part at the top and choose the menu that you wish to edit. Say it was the first section, which is called "menu1", and you want to add an Avatar page (avatar.html), you do the following:
<ol>
<li>Scroll up the the beginning of the javascript coding and search for menu1.
<li>Copy <i>menu1[3]='<i><</i>a href="index.html"<i>></i>My Page 4<i><</i>/a<i>></i>'</i> and paste beneath it.
<li>Change the number in between the [] brackets to 4
<li>Add the page URL (avatar.html) and the page name (Avatars).
</ol>
So in the end you get something like <i>menu1[4]='<i><</i>a href="avatar.html"<i>></i>Avatars<i><</i>/a<i>></i>'</i> and that should appear as a new link under section one.
<p>
Headings should be self-explanatory. Just copy and paste the previous heading to generate a new one.
<p>

<p class="head">Credits and Copyrights</p>
The drop down menu code was supplied by dynamicdrive.com and their notice needs to stay in tact for legal use. We won't be held responsible if you take off the notice and legal action is taken against you, that's your fault if you refuse to credit them.
<p>
As for the layout, you must link back to Neo-Reality on every page that this layout is used on. The credit has already been made at the bottom, you just have to keep it there. Failure to keep a visible link to Neo-Reality will be taken as theft and all thieves will receive severe punishments. This literally took hours to code and I will not let some rotten little thief who doesn't have the talent to code his or her own work steal my work. You have been warned.
<p>

</td></tr><tr><td colspan="5" width="500" bgcolor="#bcecfc" style="border-right:1px solid #000000;border-left:1px solid #000000;padding:3px;"><center>
Site Content by YOU | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Images from Neopets.com
</center></td></tr></table>
</body>
</html>

Version: Sophie
Type: Tables

<html>
<head>
<title>--> Title Here</title>

<p class="head">--> heading</p>
<div class="box">
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a>
</div>
	
<p class="head">--> heading</p>
<div class="box">
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a><br>
{ - } <a href="http://">Link Here</a>
</div>

</td>	<td width="10">бб</td>
<td width="458" valign="top">

<p class="head">--> About this Layout</p>
<div class="box">

Well what can I say? A layout dedicated to Neopia's slimiest witch is one of the best themes I could think of for Halloween, as people who don't celebrate Halloween can also use it.
<p>
For those who can't read the little "spell" properly on the top banner, it says:
<p>
<center><i>Bubble bubble toil and trouble<br>Sophie will turn your house to rubble<br>Be it large or be it small<br>Sophie's magic will scare you all</i></center>
<p>
It's not the best rhyme, but it'll suffice since most people won't notice it anyway without you telling them about it.

</div>

<p class="head">--> Using the layout </p>
<div class="box">

Obviously, this is a tables layout because of all the over-riding table tags surrounding everything on the page. It's pretty simple to use because I've pretty much put everything into the CSS so that the HTML part is a lot shorter.
<p>
To make a new text box and heading, just copy and paste the previous one then edit. It's as simple as saying one, two, three ^^

</div>

<p class="head">--> Credits and Copyrights </p>
<div class="box">

This part is always the one where people just delete without reading, and then end up stealing the layout (whether or not they are aware of it). I really don't want to freeze your site, but if worst comes t worst, I will do everything in my power to make sure you never steal again. This includes blacklisting you with every website host out there and maybe even cutting your internet connection off. Don't think I won't do it, just ask some of the poeple on our Wall of Shame and see just how close they've come to having no internet connection.
<p>
<b><u>LEAVE THE CREDIT THERE!</B></U> It's not a hard thing to do. Just don't touch it and I won't have to take action against you and your site. Got it?
<p>
I will allow you to edit this layout as much as you want to customize the look of your site <i>as long as</i> our full credit remains intact. No visible credit will be taken as theft and excuses will not be accepted.
</div>

</td><td width="20">бб</td></tr></table>
</td></tr><tr><td height="50" background="http://i101.photobucket.com/albums/m80/neoreality7/websites/sophiebottom.gif">
<span><center><b>Site content by YOU | Layout from <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Some images from Neopets.com| Hosted by your host</b></center></span>
</td></tr></table>
</body>
</html>