s2 flexible squares: Memories That Fade Like Photographs
Live Preview | Instructions
Memories That Fade Like Photographs
Layout Style: S2 - Flexible Squares (Free Account)
Browsers: chrome, firefox, IE
Credit: abellalayouts
Rules:
- you must credit abellalayouts in your Profile or Sidebar
- please comment if you're downloading my layout
- do not change anything in my layouts
- feel free to ask any questions
- i love feedback! let me know what you think!
- please add me for updates
Code:
/****************************************
Layout by http://community.livejournal.com/abellalayouts/
Style: Flexible Squares, S2
Layout: Memories that Fade Like Photographs
Image Credit: http://misslouisexo.tumblr.com/page/7
****************************************/
/* Colors
purple: #bc629f
black purple: #3e3145
margenta: #b53566
teal: #2a5e73
grey: #c1c3c0
*/
*{margin: 0; padding: 0;}
body{ background: url('http://i40.tinypic.com/mrzr7t.jpg') repeat top left; font-family: Gill Sans, sans-serif; font-size:12px; color: #c1c3c0; }
a, a:link, a:visited , a:active { color: #bc629f; font-size: 10px; text-decoration: none;}
a:hover{color: #2a5e73; border-bottom: 1px dashed #fff}
.title, .subtitle {display: none;}
#content{ margin: 0 auto; }
#maincontent{ width: 500px; margin: 0 auto; }
.subcontent{ margin-top: 20px; padding-top: 10px; background: url('http://i40.tinypic.com/9h3vnt.jpg') repeat top left; -moz-border-radius: 20px; -webkit-border-radius: 20px;}
.entry { margin: 20px 0 auto 0; }
#header{ color:#c1c3c0; font-size: 18px; text-transform: lowercase; position: absolute; left: 250px; text-align: right; top: 50px}
.headerimage {background: url('http://i42.tinypic.com/2pynt53.jpg') no-repeat top center; width: 500px; height: 400px; margin: 0 auto;}
div#header li {padding-left: 7px; padding-right: 5px}
div#header a, div#header a:link, div#header a:visited { color: #fff; font-size: 18px; }
div#header a:hover, div#footer a:hover{ color: #bc629f; }
ul.navheader{ color: #bc629f}
ul.navheader li{ list-style: none; padding: 10px 5px 10px 0; margin: 3px 0; background: #3e3145; filter:alpha(opacity=60); opacity: 0.6; -moz-border-radius: 10px; -webkit-border-radius: 10px }
ul.navheader li:hover {opacity: 0.7; filter:alpha(opacity=70)}
#sidebar{ font-size: 10px; text-transform: lowercase; float: right; position: absolute; width: 150px; text-align: left; right: 200px; top: 60px; text-align: center; height: 500px; overflow: auto; overflow-x: hidden; padding-right: 10px}
.defaultuserpic {text-align: center; padding-bottom: 5px}
.defaultuserpic img {background: url('http://i40.tinypic.com/9h3vnt.jpg') repeat top left; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;}
h2, .title, .subtitle { display:none;}
li.sbartitle {font-variant: small-caps; color: #bc629f}
table.calendar {text-align: center; color: #3e3145; padding: 10px 5px; background: url('http://i40.tinypic.com/9h3vnt.jpg') repeat top left; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0 auto; margin-left: -20px}
.sbarcalendar { padding: 5px 2px; background: #f2f2f2; -moz-border-radius: 2px; -webkit-border-radius: 2px; opacity: 0.6; filter:alpha(opacity=60)}
.sbarcalendar:hover, .sbarcalendarposts:hover {opacity: 0.7; filter:alpha(opacity=70)}
.sbarcalendarposts { background: #f2f2f2; color:#2a5e73; padding: 5px 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; opacity: 0.6; filter:alpha(opacity=60)}
ul.sbarlist{ list-style: none; padding: 10px 20px; margin: 5px 0; background: url('http://i40.tinypic.com/9h3vnt.jpg') repeat top left; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-weight: bold;}
li.sbaritem{ list-style: none; padding: 4px 0 4px 5px; }
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 14px; padding: 5px 0; color: #c1c3c0}
li.sbaritem a:hover {color: #bc629f}
.sbarbody2 {background: url('http://i40.tinypic.com/9h3vnt.jpg') repeat top left; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px 20px; margin: 5px 0;}
.userpic, .userpicfriends{ float: left; text-align:center; padding: 5px; position: absolute; margin-left: -130px; opacity: 1}
.userpic img, .userpicfriends img { background: url('http://i40.tinypic.com/9h3vnt.jpg') repeat top left; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding: 10px }
.userpic img:hover, .userpicfriends img:hover { background: #ffe7f1}
.subject{ text-align: center; }
.subject a {color: #bc629f; font-size: 32px; letter-spacing: -2px; line-height: 0.5}
.subject a:hover {color: #b7b7b7; border: none;}
.date{ line-height: 1; font-size:10px; color:#b7b7b7; text-align: center;}
.datesubject{ background: url('http://i44.tinypic.com/dc63xj.jpg') repeat; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px; margin-top: -5px}
.entry ol {padding: 5px 0}
.entry ul { list-style: circle; padding: 5px 0 }
.entry ol li{ padding-left: 5px; margin-left: 45px; }
.entry ul li {padding-left: 7px; margin-left: 43px; }
.entry_text{ font-size: 11px; line-height: 1.3; padding: 0 15px}
.comments{ text-align: right; color:transparent; margin: 0px auto; padding-right: 20px}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 16px; }
div.comments a:hover{ color: #c1c3c0}
#footer{ text-align: center; color: #c1c3c0; font-size: 15px; }
#footer a:link, #footer a:visited, #footer:active {font-size:18px;}
div#footer a, div#footer a:link, div#footer a:visited {}
ul.navfooter{ padding: 0; margin: 0; display: inline;}
ul.navfooter li{ margin: 0 5px 0 5px; display: inline; }
.clearfoot{ clear: both; }
div.ljtags {margin-top: 15px; padding: 3px 5px; font-size: 12px; color: #bc629f; font-weight: bold; }
div.ljtags a {color: #c1c3c0; font-size: 11px; font-weight: normal;}
div.ljtags a:hover { color: #ffe7f1}
.currents{ color: #c1c3c0; font-size: 11px; margin-top: -33px; margin-left: 11px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #c1c3c0;}
.currentlocation:hover, .currentmood:hover, .currentmusic:hover { color: #ffe7f1}
.currents strong {font-weight: 900; color: #bc629f; font-size: 12px}
.currentmood img{ display:none;}
blockquote { font-size: 11px; padding: 10px; margin: 10px 0; color: #bc629f; font-style: italic; text-indent: 25px; text-align: justify; line-height: 1; background: url('http://i44.tinypic.com/dc63xj.jpg') repeat; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
blockquote:hover { }
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip {opacity: 0.8; border: 1px dashed #bc629f}
Note: I was able to customize the LJ bar on top to make it look a little prettier
Image Credit: http://misslouisexo.tumblr.com/