Post by Romany on Aug 27, 2010 2:55:59 GMT -8
Thats the preview image. Here is the link to the image: img52.imageshack.us/img52/7262/screenshot20100827at849.png
Code edited... 11/11/10
CODE:
Header:
<!-- Header Stuff. DON'T EDIT.-->
<html>
<head>
<title>{SiteName}</title>
<grab:css>
</head>
<!-- You can edit from here down... At your own risk. Better to not edit code.-->
<body>
<center>
<div id="all">
<div id="left">
<div id="box">Navigation</div><br>
{Navigation}
</div>
<div id="right">
<div id="box">User</div><br>
Hi, {Username}!<br>
{Money} {Currency}<br>
<small>{NewMsgs}</small><br>
<hr>
{ActivePet}<hr>
{PoweredBy}
</div>
<div class="header">
<div class="headertext">{SiteName}</div>
</div>
<div id="center">
<!-- Start Content -->
Footer:
<!-- End Content -->
</div>
<div id="footer">
<small><i>Copyright {SiteName} 2010. </i></small>
<center>{Advert}</center>
</div></center>
</body></html>
CSS:
/*Mains*/
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
margin-top: ;
}
/*Header Stuff.*/
.headertext{
color: darkturquoise;
font-family: comics sans ms, chalkboard;
text-align: center;
font-size: 50px;
}
.header{
background: url(http://i36.tinypic.com/2jai0lz.png);
height: 100px;
width: 600px;
color: white;
font-family: comics sans ms, chalkboard;
}
/*Nav, User, Content & Footer*/
#center {
margin-left: 0px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
margin-right: 200px;
margin-top: 10px;
width: 600px;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-family: arial, verdana;
font-size: 14px;
text-align: left;
background: white;
}
#left {
position: absolute;
left: 180px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
top: 10px;
width: 150px;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: aliceblue;
font-family: arial, verdana;
font-size: 12px;
background: aliceblue;
}
#right {
position: absolute;
right: 180px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
top: 10px;
width: 150px;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: aliceblue;
font-family: arial, verdana;
font-size: 12px;
background: aliceblue;
}
/*Boxes*/
#box{
font-family: arial, verdana;
color: darkskyblue;
background: skyblue;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
font-size: 16px;
text-align: center;
}
#errorBox{
border: 1px solid #FF0000;
background: #FF7E75;
color: #FF0000;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/*Buttons, Links & Drop-downs*/
.button{
background: ; repeat-x;
padding: 2px;
color: turquoise;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.button:hover{
background: white; repeat-x;
padding: 2px;
color: turquoise;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
a:link {
color: blue;
text-decoration:
}
a:visited {
color: blue;
text-decoration:
}
a:active {
color: blue;
text-decoration:
}
a:hover {
color: darkblue;
text-decoration:
cursor: help;
}
/*Chatboard Stuff*/
#quote{
border: 1px solid black;
color: blue;
background: #DCEFF5;
padding: 2px;
text-indent: 2px;
}
th.chatboard{
font-family: arial, verdana;
color: darkskyblue;
background: skyblue;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
font-size: 16px;
}
tr.chatboard:hover{
background: turquoise;
}
td.chatboard_side{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background: #AFD3DE;
color: #575757;
padding: 9px;
}
td.chatboard_post{
padding: 2px;
}
#siggy{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
color: #2D8C7C;
background: white;
padding: 5px;
}
/*Exploration Stuff for Map*/
.gotoMsg{
border: 1px solid black;
background: white;
padding: 1px;
}
Hope you like the layout. Its very simple, but hopefully a HTML newbie will find it useful.