Simple Pink Oli Sykes layout. His picture can be changed to anyone of your liking really. If you want it in a different color or have trouble switching out the picture just PM me.
Top Bottom
CSS
body {
background-image: url(http://s228.photobucket.com/albums/ee192/keryn295/polkadots.png);
background-repeat:repeat;
background-attachment: fixed;
background-position: bottom right;
background-color: #FFFFFF;
scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-3dlight-color :#FFFFFF;
scrollbar-shadow-color :#FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color :#FFFFFF;
font-family: trebuchet ms;
font-size: 8pt;
color: #000000;
line-height: 15px;
text-align: center;
margin: 0px;
}
.sidebar{
padding:5px;
background:#FFFFFF;
font-family:small fonts;
color:#666666;
font-size:7pt;
line-height:10pt;
text-decoration:;
text-align: left;
}
.header{
padding: 1px;
font-family:century gothic;
color:#FF66B3;
font-size:9pt;
font-weight: bold;
line-height:10pt;
text-decoration:;
text-transform:uppercase;
text-align: center;
background: #FFFFFF;
}
.title{
font-family: small fonts;
font-size: 6pt;
text-transform: uppercase;
text-align: center;
color: #FF9DBE;
background-color: #FFE5EE;
border-bottom: 3px double #000000;
line-height: 4px;
padding: 3px;
}
.post{
padding:5px;
background:#FFFFFF;
font-family:arial;
color:#0000000;
font-size:8pt;
line-height:10pt;
text-decoration:;
text-align: left;
}
.quote{
font-family: small fonts;
font-size: 7pt;
font-weight: bold;
text-align: center;
color: #FFFFFF;
background-color: #000000;
border-bottom: 3px double #FFE5EE;
padding: 3px;
line-height: 7px;
}
blockquote{
font-family: small fonts;
font-size: 7pt;
color: #000000;
background-color:#f5f5f5;
padding: 4px;
border: 1px dashed #FF9DBE;
}
A:link,A:visited,A:active{
text-decoration:none;
font:7px small fonts;
color:#666666;
background:none;
line-height:11px;
text-transform:uppercase;
border: 0px #000000;
}
A:hover{
font:7px small fonts;
color: #FF9DBE;
text-transform:uppercase;
}
#navbar-iframe { height: 0px; visibility: hidden; display: none; }
u {
text-decoration:underline; border-bottom: 2px double #F76E89;}
b {
text-decoration: bold; color:#F76E89; background:#FFE5EE;}
i {
text-decoration: italic; color: #FF9DBE;}
strong, bold {
text-decoration: strong; color: #FF9DBE;}
s {
text-decoration: strikeout; color: #8d8d8d;}
#menu,#menu a
{
background-color:#FFFFFF;
color:black;
left: -75px;
top: -5px;
width: 590px;
}
#options
{
background-color:#FFFFFF;
color:black;
left: -75px;
top: -5px;
width: 590px;
}
#poems li,#stories li,#articles li,#info dd,#info dt,#articles img,#photos .photo,#friends img,#about li,#journals li, #image img,#articles li img
{
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #000000;
}
#friends a:hover img
{
background-color:#FFE5EE;
border-style: solid;
}
#friends img
{
padding: 0px;
}
#photos .photo div{
background-color: transparent;
}
#poems,#stories,#articles,#photos,#friends,#about ,#journals, #image
{
background-color: transparent;
}
#friends div
{
font-size: 0em;
color: black;
}
HTML
<div style="position: absolute; top: 59px; left: 120px; width:220px; height="320" background-color: none; filter:alpha(opacity=100);">
<div class="sidebar"><div class="quote"></div>
<div class="title">
Hottie of the Week
</div><center>
<img src="http://i148.photobucket.com/albums/s39/leaping_lightning_rods/oliver%20sykes/Oli_Sykes____So_Cute--large-msg-116.jpg" width="200" height="311">
<br>
<div class="quote"></div>
</div></div>
<div style="position: absolute; top: 59px; left: 345px; width:385px; height: 500px; overflow: auto; background-color: #FFFFFF;">
<div class="post">
<div class="quote"></div>
<div class="title">
About Me
</div><br><center>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
<br><br></center>
<div align="right"> <a href="http://member.mibba.com/57873/" title=" designer" target="_blank">designer</a> <a href="http://member.mibba.com/57873/" title=" designer" target="_blank">LilyRayStays</a></div></div>
<div class="quote"></div><br>
</div></div></div>
<div style="position: absolute; top: 564px; left: 345px; width:385px; overflow: auto; background-color: #FFFFFF;">
<div class="post"> <div class="quote"></div>
<div class="title">
Comments
</div><br>
<!-- comments_start -->
<div id="comment-area">
{COMMENTS}
</div>
<!-- comments_end -->
<br>
<div class="quote"></div>
</div></div></div>
<div style="position: absolute; top: 419px; left: 120px; width:220px; overflow: auto; background-color: #ffffff; ">
<div class="sidebar">
<div class="quote"></div>
<div class="title"> Friends </div>
<!-- friends_start -->
<!-- friends_start -->
<div id="friends">
{FRIENDS}
</div>
<!-- friends_end -->
<br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Photos </div>
<!-- photos_start -->
<div id="photos">
{PHOTOS}
</div>
<!-- photos_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Stories </div>
<!-- stories_start -->
<div id="stories">
{STORIES}
</div>
<!-- stories_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Journals </div>
<!-- journals_start -->
<div id="journals">
{JOURNALS}
</div>
<!-- journals_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Poems </div>
<!-- poems_start -->
<div id="poems">
{POEMS}
</div>
<!-- poems_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Articles </div>
<!-- articles_start -->
<div id="articles">
{ARTICLES}
</div>
<!-- articles_end -->
<br><br>
<div class="quote"></div><br>
<br><br>
</div></div></div>
Top Bottom
CSS
body {
background-image: url(http://s228.photobucket.com/albums/ee192/keryn295/polkadots.png);
background-repeat:repeat;
background-attachment: fixed;
background-position: bottom right;
background-color: #FFFFFF;
scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-3dlight-color :#FFFFFF;
scrollbar-shadow-color :#FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color :#FFFFFF;
font-family: trebuchet ms;
font-size: 8pt;
color: #000000;
line-height: 15px;
text-align: center;
margin: 0px;
}
.sidebar{
padding:5px;
background:#FFFFFF;
font-family:small fonts;
color:#666666;
font-size:7pt;
line-height:10pt;
text-decoration:;
text-align: left;
}
.header{
padding: 1px;
font-family:century gothic;
color:#FF66B3;
font-size:9pt;
font-weight: bold;
line-height:10pt;
text-decoration:;
text-transform:uppercase;
text-align: center;
background: #FFFFFF;
}
.title{
font-family: small fonts;
font-size: 6pt;
text-transform: uppercase;
text-align: center;
color: #FF9DBE;
background-color: #FFE5EE;
border-bottom: 3px double #000000;
line-height: 4px;
padding: 3px;
}
.post{
padding:5px;
background:#FFFFFF;
font-family:arial;
color:#0000000;
font-size:8pt;
line-height:10pt;
text-decoration:;
text-align: left;
}
.quote{
font-family: small fonts;
font-size: 7pt;
font-weight: bold;
text-align: center;
color: #FFFFFF;
background-color: #000000;
border-bottom: 3px double #FFE5EE;
padding: 3px;
line-height: 7px;
}
blockquote{
font-family: small fonts;
font-size: 7pt;
color: #000000;
background-color:#f5f5f5;
padding: 4px;
border: 1px dashed #FF9DBE;
}
A:link,A:visited,A:active{
text-decoration:none;
font:7px small fonts;
color:#666666;
background:none;
line-height:11px;
text-transform:uppercase;
border: 0px #000000;
}
A:hover{
font:7px small fonts;
color: #FF9DBE;
text-transform:uppercase;
}
#navbar-iframe { height: 0px; visibility: hidden; display: none; }
u {
text-decoration:underline; border-bottom: 2px double #F76E89;}
b {
text-decoration: bold; color:#F76E89; background:#FFE5EE;}
i {
text-decoration: italic; color: #FF9DBE;}
strong, bold {
text-decoration: strong; color: #FF9DBE;}
s {
text-decoration: strikeout; color: #8d8d8d;}
#menu,#menu a
{
background-color:#FFFFFF;
color:black;
left: -75px;
top: -5px;
width: 590px;
}
#options
{
background-color:#FFFFFF;
color:black;
left: -75px;
top: -5px;
width: 590px;
}
#poems li,#stories li,#articles li,#info dd,#info dt,#articles img,#photos .photo,#friends img,#about li,#journals li, #image img,#articles li img
{
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #000000;
}
#friends a:hover img
{
background-color:#FFE5EE;
border-style: solid;
}
#friends img
{
padding: 0px;
}
#photos .photo div{
background-color: transparent;
}
#poems,#stories,#articles,#photos,#friends,#about ,#journals, #image
{
background-color: transparent;
}
#friends div
{
font-size: 0em;
color: black;
}
HTML
<div style="position: absolute; top: 59px; left: 120px; width:220px; height="320" background-color: none; filter:alpha(opacity=100);">
<div class="sidebar"><div class="quote"></div>
<div class="title">
Hottie of the Week
</div><center>
<img src="http://i148.photobucket.com/albums/s39/leaping_lightning_rods/oliver%20sykes/Oli_Sykes____So_Cute--large-msg-116.jpg" width="200" height="311">
<br>
<div class="quote"></div>
</div></div>
<div style="position: absolute; top: 59px; left: 345px; width:385px; height: 500px; overflow: auto; background-color: #FFFFFF;">
<div class="post">
<div class="quote"></div>
<div class="title">
About Me
</div><br><center>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
WRITE ABOUT YOURSELF HERE<br>
<br><br></center>
<div align="right"> <a href="http://member.mibba.com/57873/" title=" designer" target="_blank">designer</a> <a href="http://member.mibba.com/57873/" title=" designer" target="_blank">LilyRayStays</a></div></div>
<div class="quote"></div><br>
</div></div></div>
<div style="position: absolute; top: 564px; left: 345px; width:385px; overflow: auto; background-color: #FFFFFF;">
<div class="post"> <div class="quote"></div>
<div class="title">
Comments
</div><br>
<!-- comments_start -->
<div id="comment-area">
{COMMENTS}
</div>
<!-- comments_end -->
<br>
<div class="quote"></div>
</div></div></div>
<div style="position: absolute; top: 419px; left: 120px; width:220px; overflow: auto; background-color: #ffffff; ">
<div class="sidebar">
<div class="quote"></div>
<div class="title"> Friends </div>
<!-- friends_start -->
<!-- friends_start -->
<div id="friends">
{FRIENDS}
</div>
<!-- friends_end -->
<br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Photos </div>
<!-- photos_start -->
<div id="photos">
{PHOTOS}
</div>
<!-- photos_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Stories </div>
<!-- stories_start -->
<div id="stories">
{STORIES}
</div>
<!-- stories_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Journals </div>
<!-- journals_start -->
<div id="journals">
{JOURNALS}
</div>
<!-- journals_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Poems </div>
<!-- poems_start -->
<div id="poems">
{POEMS}
</div>
<!-- poems_end -->
<br><br>
<div class="quote"></div><br>
<div class="quote"></div>
<div class="title"> Articles </div>
<!-- articles_start -->
<div id="articles">
{ARTICLES}
</div>
<!-- articles_end -->
<br><br>
<div class="quote"></div><br>
<br><br>
</div></div></div>
July 22nd, 2008 at 07:06am