Blue Pinwheel Layout.
Click for a bigger preview.
If you want to replace the story or journal section with another section, message me.
CSS:
body {
background-color: #8abff1;
background: url(http://i243.photobucket.com/albums/ff94/darkness-dawns/Layout%20Site%20Pictures/Pinwheelbackground.png);
background-position: center;
background-repeat: repeat;
font-family: times new roman;
font-size: 12px;
color:#000000;
margin: 0px;
padding-bottom:20px;
}
#banner {position:absolute;
top: 70px;
left:100px;
width: 500px;
height: 334px;
background:url(http://i243.photobucket.com/albums/ff94/darkness-dawns/Layout%20Site%20Pictures/PinwheelBanner.png);
background-position: center;
background-repeat: no-repeat;
background-color: #ffffff;
}
#about { position:absolute;
top:350px;
left:10px;
width:450px;
background:#ffffff;
color:#000000;
border:0px solid #000000;
}
#storiesetc { position:absolute;
top:0px;
left:520px;
width:350px;
background:#ffffff;
color:#000000;
border:0px solid #000000;
}
#info {background-color: #ffffff; }
#info dt { font-family: times new roman; font-size:12px; text-align:center; background-color: #4698A4; color: #ffffff; }
#info dd { font-family: times new roman; font-size:12px; text-align:center; background-color: #7FCCD2; color: #ffffff; }
#stories h2 {background-color: #ffffff; color: #7FCCD2; font-size: 20px; font-family: times new roman; text-align: left; border-bottom: 3px solid #7FCCD2; }
#stories {background-color: #ffffff; color: #000000; }
#stories ul li h3 a { color: #4698A4; font-family: times new roman; font-size:14px; text-align:left; }
#stories ul li span { color: #4698A4; font-family: times new roman; font-size: 11px; text-align: left; }
#stories ul li span a { color: #4698A4; font-family: times new roman; font-size: 11px; }
#stories li { background-color: #ffffff; }
#stories ul li span a:hover, #stories ul li h3 a:hover {text-decoration:underline;}
#journals h2 {background-color: #ffffff; color: #7FCCD2; font-size: 20px; font-family: times new roman; text-align: left; border-bottom: 3px solid #7FCCD2;}
#journals {background-color: #ffffff; color: #7FCCD2; }
#journals ul li h3 a { color: #4698A4; font-family: times new roman; font-size:14px; text-align:left; }
#journals ul li span { color: #4698A4; font-family: times new roman; font-size:11px; text-align:left; }
#journals li { background-color: #ffffff; }
#journals ul li h3 a:hover {text-decoration:underline;}
#h1 {
font-size:30px;
border-bottom: 5px solid #4698A4;
line-height: 26px;
font-family: times new roman;
font-weight: bold;
color: #4698A4;
letter-spacing: -2px;
background-color: none;
text-align: center;
padding-top: 0px; padding-bottom: 0px;
}
html body div #menu, html body div #menu a, html body div #menu span, html body div
#menu span a {
background-color: transparent;
color: #ffffff;
font-size: 11px;
font-weight:bold;
}
html body div #options, html body div #options a, html body div #options span a, html body div
#options span {
background-color: transparent;
color: #ffffff;
font-size: 10px;
font-weight:bold;
}
html body div
#menu a:hover {
color: #ffffff;
font-weight:bold;
font-size: 13px;
}
html body div
#options a:hover {
color: #ffffff;
}
HTML/Layout:
<div id="banner"><br />
<div id="about">
<center> <br />
{ABOUT}</center>
</div>
<div id="storiesetc">
<div id="h1">
<center>{USERNAME}</center>
</div>
<!-- info_start -->
<div id="info"><br />
<center>{INFO}</center>
</div>
<!-- info_end -->
<!-- stories_start -->
<div id="stories">
<h2>Stories</h2>
{STORIES}</div>
<!-- stories_end -->
<!-- journals_start -->
<div id="journals">
<h2>Journals</h2>
{JOURNALS:3}</div>
<!-- journals_end -->
<center><a href="http://member.mibba.com/28178/"><img src="http://i243.photobucket.com/albums/ff94/darkness-dawns/Layout%20Site%20Pictures/credit-1-1.png" /></a></center>
</div>
</div>
Click for a bigger preview.
If you want to replace the story or journal section with another section, message me.
CSS:
body {
background-color: #8abff1;
background: url(http://i243.photobucket.com/albums/ff94/darkness-dawns/Layout%20Site%20Pictures/Pinwheelbackground.png);
background-position: center;
background-repeat: repeat;
font-family: times new roman;
font-size: 12px;
color:#000000;
margin: 0px;
padding-bottom:20px;
}
#banner {position:absolute;
top: 70px;
left:100px;
width: 500px;
height: 334px;
background:url(http://i243.photobucket.com/albums/ff94/darkness-dawns/Layout%20Site%20Pictures/PinwheelBanner.png);
background-position: center;
background-repeat: no-repeat;
background-color: #ffffff;
}
#about { position:absolute;
top:350px;
left:10px;
width:450px;
background:#ffffff;
color:#000000;
border:0px solid #000000;
}
#storiesetc { position:absolute;
top:0px;
left:520px;
width:350px;
background:#ffffff;
color:#000000;
border:0px solid #000000;
}
#info {background-color: #ffffff; }
#info dt { font-family: times new roman; font-size:12px; text-align:center; background-color: #4698A4; color: #ffffff; }
#info dd { font-family: times new roman; font-size:12px; text-align:center; background-color: #7FCCD2; color: #ffffff; }
#stories h2 {background-color: #ffffff; color: #7FCCD2; font-size: 20px; font-family: times new roman; text-align: left; border-bottom: 3px solid #7FCCD2; }
#stories {background-color: #ffffff; color: #000000; }
#stories ul li h3 a { color: #4698A4; font-family: times new roman; font-size:14px; text-align:left; }
#stories ul li span { color: #4698A4; font-family: times new roman; font-size: 11px; text-align: left; }
#stories ul li span a { color: #4698A4; font-family: times new roman; font-size: 11px; }
#stories li { background-color: #ffffff; }
#stories ul li span a:hover, #stories ul li h3 a:hover {text-decoration:underline;}
#journals h2 {background-color: #ffffff; color: #7FCCD2; font-size: 20px; font-family: times new roman; text-align: left; border-bottom: 3px solid #7FCCD2;}
#journals {background-color: #ffffff; color: #7FCCD2; }
#journals ul li h3 a { color: #4698A4; font-family: times new roman; font-size:14px; text-align:left; }
#journals ul li span { color: #4698A4; font-family: times new roman; font-size:11px; text-align:left; }
#journals li { background-color: #ffffff; }
#journals ul li h3 a:hover {text-decoration:underline;}
#h1 {
font-size:30px;
border-bottom: 5px solid #4698A4;
line-height: 26px;
font-family: times new roman;
font-weight: bold;
color: #4698A4;
letter-spacing: -2px;
background-color: none;
text-align: center;
padding-top: 0px; padding-bottom: 0px;
}
html body div #menu, html body div #menu a, html body div #menu span, html body div
#menu span a {
background-color: transparent;
color: #ffffff;
font-size: 11px;
font-weight:bold;
}
html body div #options, html body div #options a, html body div #options span a, html body div
#options span {
background-color: transparent;
color: #ffffff;
font-size: 10px;
font-weight:bold;
}
html body div
#menu a:hover {
color: #ffffff;
font-weight:bold;
font-size: 13px;
}
html body div
#options a:hover {
color: #ffffff;
}
HTML/Layout:
<div id="banner"><br />
<div id="about">
<center> <br />
{ABOUT}</center>
</div>
<div id="storiesetc">
<div id="h1">
<center>{USERNAME}</center>
</div>
<!-- info_start -->
<div id="info"><br />
<center>{INFO}</center>
</div>
<!-- info_end -->
<!-- stories_start -->
<div id="stories">
<h2>Stories</h2>
{STORIES}</div>
<!-- stories_end -->
<!-- journals_start -->
<div id="journals">
<h2>Journals</h2>
{JOURNALS:3}</div>
<!-- journals_end -->
<center><a href="http://member.mibba.com/28178/"><img src="http://i243.photobucket.com/albums/ff94/darkness-dawns/Layout%20Site%20Pictures/credit-1-1.png" /></a></center>
</div>
</div>
February 13th, 2011 at 05:10am