About the design
Gah, this design took me all night and all day to make -.- I've used the beautiful brushes from
The fifth muse, my own brushes
and a few others mentioned in the credits. It is fully controlled with CSS, and must not be altered. That violated the terms of use.
Use only the tags and classes used in this example in order to keep the layout intact.
Other information
I used Macromedia dreamweaver MX 2004 to code this layout and Adobe photoshop CS to make the layout images. Font used to write
"Whisperers of time" is called "Hilda Sonnenschein" (found at DaFont.com) The
layout has been tested in Mozilla firefox 1.5, Opera 8.5 and Internet explorer 6, and works fine in all of them.
Terms of use
- Do not remove the credits or copyrights at the bottom of this page
- Do not claim that you've made this layout
- Do not visually alter the graphics or layout (code) in any way (except for adding a title to the icon and button)
- Do not redistribute this layout
- Do not sell it
- Do not use it on commercial and/or profitable websites. Personal use only
body {
background: #FDEFB7 url('bggreen.gif') bottom repeat-x;
color: #73614D;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0;
text-align: center;
}
a:link, a:visited {
background: transparent;
color: #EB750A;
font-weight: bold;
text-decoration: none;
}
a:hover { color: #C74B00; }
a:active {
color: #EB750A;
background: transparent;
font-weight: bold;
text-decoration: none;
}
h1 {
color: #7C7242;
display: block;
float: left;
font-family: georgia, serif;
font-size: 50px;
font-style: normal;
margin: 0;
padding: 15px 0 0 0;
width: 360px;
}
h2 {
background: #F6E0AB;
color: #7CA54D;
font-family: georgia, serif;
font-size: 18px;
margin: 5px 0 5px 0;
padding: 5px 0 4px 8px;
}
h3 {
color: #878164;
font-family: georgia, serif;
font-size: 18px;
margin: 20px 0 0 0;
padding: 0;
}
#containerc h2 { margin: 0; padding: 0; }
span#titleL {
color: #8C813C;
float: left;
font-style: italic;
text-align: right;
width: 138px;
height: 40px;
}
p { margin: 10px 0; }
p.gallery { text-align: center; }
.gallery img {
border: 1px #73614D solid;
margin: 5px;
}
#title p {
margin: 0;
text-align: center;
}
div#page { background: url('bgorange.gif') top repeat-x; }
div#wrap {
background: url('bgmain.gif') repeat-y;
margin: 0 auto 0 auto;
text-align: justify;
width: 741px;
}
div#top {
background: url('top.gif') top no-repeat;
height: 60px;
}
div#title {
color: #F9EFC8;
font-style: italic;
padding: 0 15px 10px 0;
margin: 0 0 25px 0;
}
div#navigation {
background: url('navigationtop.gif') top right no-repeat;
float: right;
padding: 3px 0 0 0;
width: 146px;
}
#navigation ul {
margin: 0;
padding: 0 0 0 30px;
list-style: none;
}
div#containerglobal { background: url('navigationbot.gif') bottom right no-repeat; }
div#content {
background: url('contenttop.gif') top left no-repeat;
margin: 0 146px 0 0;
}
div#containerc {
background: url('contentbot.gif') bottom left no-repeat;
padding: 2px 10px 40px 45px;
}
div#clear { clear: both; }
How to use?
First of all you should know the basics of HTML in order to use this premade. But if you don't, try to do a little self-tutoring
at W3Schools and read the readme.txt included in the zip file.
- Download zip file and extract the contents
- Read the readme.txt and follow the instructions there
- Upload all the files to your webhost (keep all the files in their respective folders, meaning; don't move files to other folders)
- Lastly, enjoy your new layout =)
Additional box
Maybe use it for updates? The background repeats downwards so you can write as much as you'd like in this box.
Additional graphics
