:: 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: Eithne
Type: Tables

<title> Title Here</title>

</HEAD>

.:Stats:.

# Lookups: 3 
# Layouts: 5 
# Banners: 2 
# Avatars: 6

.:Affiliates:.

<a href="#"># Affiliate 1</a> 
<a href="#"># Affiliate 2</a> 
<a href="#"># Affiliate 3</a> 
<a href="#"># Affiliate 4</a> 
<a href="#"># Affiliate 5</a>

.:Staff:.

# Owner: NAME 
# Graphics: NAME 
# News: NAME 
# Guides: NAME

</center></TD>

<table width="95%">
<tr><td class="head">.:About this Layout:.</td></tr>
<tr><td>

This layout has a Fire Faerie theme, with a more specific detail of Ethine. I was going to make it kind of an orangy color scheme, but I thought black would be a better color, considering that Ethine did get eaten by a Moltenore.

</td></tr>
<tr><td class="head">.:Using this Layout:.</td></tr>
<tr><td>

It's really easy, I'm sure you'll figure it out. Just copy and paste the preceding paragraph if you wish to make a heading and content underneath. It's also the same with the navigation and stats bar.

</td></tr>
<tr><td class="head">.:Copyrights and Credits:.</td></tr>
<tr><td>

I couldn't have made this without the help of Neopets.com and their wonderful images. Make sure you keep our credit at the bottom if you are going to change the images of the layout, otherwise it's straight off to the Wall of Shame for you.

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

</center></TD>

.:Header:. 
<a href="#"># link</a> 
<a href="#"># link</a> 
<a href="#"># link</a> 
<a href="#"># link</a> 
<a href="#"># link</a>

</center>
</TD></TR><TR>
<TD COLSPAN=5 style="border-top: #CC0000 1px solid;">
<center>Site owned by YOU | Designed by <a href="http://www.neo-reality.org">Neo-Reality</a> | Images (c) Neopets.com</center>
</TD></TR></TABLE>
</center>
</body>
</html>

Version: Fyora
Type: Dropdown 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='#CD69C9'
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>

<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tr><td width="500" colspan="5" style="border-bottom: 1px solid #000000;"><img src="http://img.photobucket.com/albums/v479/pnextra/websites/fyoratop.gif" width="501" height="350"></td></tr>
<tr><td valign="top" width="100" style="border-left:1px solid #000000;border-right:1px solid #000000;background-color:#CC99CC;">
<center><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '100px')" onMouseout="delayhidemenu()">Section 1</a></center>
</td><td valign="top" width="100" style="border-right:1px solid #000000; background-color:#CC99CC;">
<center><a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '100px')" onMouseout="delayhidemenu()">Section 2</a></center>
</td><td valign="top" width="100" style="border-right:1px solid #000000; background-color:#CC99CC;">
<center><a href="default3.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '100px')" onMouseout="delayhidemenu()">Section 3</a></center>
</td><td valign="top" width="100" style="border-right:1px solid #000000; background-color:#CC99CC;">
<center><a href="default4.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '100px')" onMouseout="delayhidemenu()">Section 4</a></center>
</td><td valign="top" width="100" style="border-right:1px solid #000000; background-color:#CC99CC;">
<center><a href="default5.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '100px')" onMouseout="delayhidemenu()">Section 5</a></center>
</td></tr><tr><td valign="top" width="500" colspan="5" style="background-color:#FFFFFF; border:1px solid #000000; padding:3px;">

<div class="head">About this Layout</div>
This is the first ever drop down menu website layout that Neo-Reality offers. I seriously do not suggest using this layout if you are still unfamiliar with web design, especially if you plan on editing it. The color scheme is all over the place, and I apologize for that, but having too many CSS attributes could ruin the layout if people are viewing it on firefox.

It features the faerie queen Fyora, obviously, but the one thing I like is that it doesn't have any overused images in it. I absolutely adore the headers, they are so cute and go extremely well with the layout.

<div class="head">Using this Layout</div>
Like I've said before, 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.

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 menu1[3]='<a href="index.html">My Page 4</a>' 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 menu1[4]='<a href="avatar.html">Avatars</a>' and that should appear as a new link under section one.

Headings should be self-explanatory. Just copy and paste the previous heading to generate a new one.

<div class="head">Credits and Copyrights</div>
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.

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.

<div class="head">Affiliates</div>
In this type of layout, the best way to list your affiliates would be to scroll it horizontally. Of course, it would be slower and stop when you hover over it, but then you'll have to find that code yourself ;)

</td></tr><tr><td colspan="5" width="500" bgcolor="#CC99CC" style="border-right:1px solid #000000;border-left:1px solid #000000;border-bottom: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: Illusen
Type: Div Layers

<html>
<head>
<title>~ Title Here ~</title>
<style type="text/css">
body {color: #000000; background-color: #FFFFFF; font-size: 10px; font-family: verdana; background-attachment:fixed;
scrollbar-track-color: #FFFFFF; 
scrollbar-base-color: #3D5436; 
scrollbar-face-color:#527709; 
scrollbar-highlight-color: #7DA828; 
scrollbar-3dlight-color: #527709;
scrollbar-shadow-color: #527709; 
scrollbar-darkshadow-color: #334A07;
scrollbar-arrow-color: #7DA828;}
a:link, a:visited {color:#3D5436; text-decoration:none; font-weight: bold;}
a:hover {color:#3D5436; text-decoration: underline;}
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: #3D5436;border: 1px solid #30A44F;letter-spacing:2px;padding-top:3px;padding-left:1px;font-family: verdana;height:20px;text-align: center; margin.height: 5px; background-color: #C0D9AF;}
</style>
</head>

Navigation

+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a>

</div>
<div style="index: 2; left: 223; overflow: visible; width: 426; position: absolute; top: 220; height: 650">

About this Layout 

Well what can I say? Illusen is such a popular faerie that it was impossible not to make a web layout based on her and only her =P

<center><img src="http://images.neopets.com/template_images/illusen_weapons.gif"></center>

Anyway, this is a Div layer layout that is very easy to use. Basically, there's three sections: one for navigation, one for your main content and one for any other stuff you want on your site such a affiliates or shoutboxes or even a space all about you ^^

Whatever your site is about, this is definitely the perfect match. I can't believe I didn't make this sooner! =3

Using this Layout 

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.

Other than that, edit as much as you want - go nuts, I don't mind.

<center>BUT YOU MUST KEEP MY CREDIT OR ELSE!</center>

I am in no mood to tolerate thieves and I won't hesitate to remove this layout. Got it? I don't care if you don't credit your host, neopets or anybody else; if my credit is not on there and I catch you stealing my layout, don't count on your site to stay alive for much longer. I am sick and tired of thieves and I will freeze your site completely.

</div>

Affiliates

<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center> 
<center>button</center>

More Links

+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a> 
+ <a href="http://">Link Here</a>

Credits

+ Content by You 
+ Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> 
+ Images from <a href="http://www.neopets.com">Neopets</a> 
+ Hosted by Your host

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

Version: Jhudora
Type: Div Layers

<html>
<head>
<title>// Title Here \\</title>
<style type="text/css">
body {background-image: url('http://img.photobucket.com/albums/v285/neoreality1/websites/jhudorabg.gif'); font-family: tahoma; font-size: 11px; line-height: 150%; color: #000000; background-color: #5C246E;
	scrollbar-face-color: #207907;
	scrollbar-shadow-color: #207907;
	scrollbar-highlight-color: #3FA223;
	scrollbar-3dlight-color: #207907;
	scrollbar-darkshadow-color: #124C02;
	scrollbar-track-color: #5C246E;
	scrollbar-arrow-color: #FFFFFF}
.header {text-align:left; font-family: tahoma; font-size: 11px; font-weight: bold; color: #2E0854; padding-left: 5%}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
A:link, A:visited, A:active {color:#4B0082; text-decoration:none;} 
A:hover{color: #49E20E; text-decoration: underline; cursor: help;}
</style>
</head>

// Heading \\
# <a href="http://">Link Here</a> 
# <a href="http://">Link Here</a> 
# <a href="http://">Link Here</a> 
# <a href="http://">Link Here</a> 
# <a href="http://">Link Here</a>

// Credits \\

# Site Content by YOU 
# Layout by <a target="_blank" href="http://www.neo-reality.org">Neo-Reality</a> 
# Images from <a target="_blank" href="http://www.neopets.com">Neopets</a> 
# Hosted by Your Host
# Any other credits

</div>

// About the Layout \\

Well since I made an Illusen web layout, it only seemd fair if I made a Jhudora one as well. Personally, I don't think this layout is as good as the Illusen one, but it's still pretty awesome so no stealing!

<center><img src="http://images.neopets.com/new_shopkeepers/t_888.gif"></center>

This is a simple Div layout and pretty much fits every type of website. What I really love about this layout is the fact that it didn't require as much image-slicing as my previous Div layer layouts and it was so bandwidth efficient too ^^

// Using the Layout \\

Same thing as every Div layer layout, try not to edit the div tags if you don't need to, they are positioned as is for a reason.

If you need more help with Div layer layouts, please read the tutorial in the Webmasters section before contacting me because I hate repeating myself.

As for the Credits, you are NOT allowed to remove the link back to Neo-Reality no matter how much you've edited it! This is still MY coding and I have complete claim to copyrighting it. All thieves will be persecuted!

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

Version: Soup Faerie
Type: Tables

<html>
<head>
<title>...site title...</title>

About this Layout

Mmmm.... soup... Originally, this was a custom request by someone but since I didn't have the time to code this for one person (and it wouldn't be fair to everyone else), I made it for public use.

The layout turned out quite nice, considering how over-used the soup faerie images are. Personally, I think the colors are the best, but then again, I always think by color schemes are cool ^^

Using this Layout

It's a simple table layout so if you're not familiar with tables, then you better go search for an HTML help site and brush up on your coding skills. 

You can make new headings by copying the heading before and pasting it, then editing it - simple as. The CSS is really simple so if you want to edit the xolors, then it's all there in black and white =)

Credits and Copyrights

Same old principles - DO NOT STEAL AND CLAIM IT AS YOUR OWN CODING! I've watermarked this layout so deleting my credit is futile. You will be reported to us and your site will be frozen and I will make sure that your IP number is blacklisted.

But if you're a nice, honest person, feel free to edit to your own tastes as long as a full link back is on every page you display this layout on.

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

Heading

@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>

Heading

@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>

Heading

@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>

Heading

@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>
@ <a href="http://">Link here</a>

</td></tr>
</table>
</td></tr>
<tr><td bgcolor="#FFEFD5" background="http://i5.photobucket.com/albums/y160/neoreality4/websites/soupbottom.gif" height="40">
<center>Site by YOU | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Images from <a href="http://www.neopets.com">Neopets</a>. Used with Permission</center>
</td></tr>
</table>

</body>
</html>