Lose It

Jul 15, 2010 16:59



Live Preview | S2 Flexible Squares

Instructions
Note: this layouts looks best when you change your journal ads to "in between entries"

Best view: best viewed in chrome, firefox
Browser Compatible: tested in chrome, firefox, and IE

Rules:
- place the following credit code, or credit abellalayouts, in your Profile or Sidebar
- please comment if you're taking my layout
- feel free to change around the background and colors --> as long as you credit me!
- feel free to ask any questions
- i love feedback! let me know what you think!
- please add me for updates



Credit:
Stylesheet by @

Code:

/****************************************

Layout by http://community.livejournal.com/abellalayouts/
Style: Flexible Squares, S2
Layout: Lose It

****************************************/

/* Colors
green: #80c31c
darker green: #6ba218
dark green: #5e8f15
*/

*{margin: 0; padding: 0;}

body{ background: url(http://www.dreamstime.com/seamless-floral-pattern-vector-thumb8500281.jpg) #efe0cd; font-family: Georgia, serif; font-size:12px; color: #000; overflow: hidden}

a, a:link, a:visited , a:active { color: #80c31c; font-size: 10px; text-decoration: none;}

a:hover{color: #6ba218;}

h2 {display: none;}

.title, .subtitle {color: #6ba218; font-size: 24px; line-height: 0.7; text-align: center; }
.title {font-style: italic}
.title:first-letter {color: #5e8f15}
.subtitle {font-size: 18px; letter-spacing: 2px}

#content{ margin: 20px auto; width: 800px; height: 630px; background: #80c31c}

#maincontent{ width: 580px; height: 510px; margin: 0 10px 0 auto; background: url(http://www.dreamstime.com/seamless-floral-pattern-vector-thumb8500281.jpg); overflow: hidden; overflow-y: auto; overflow-x: hidden;}

.subcontent{ margin: 3px 3px 3px 80px; background: #fff; }

.entry { margin: 20px 0 auto 0; }

.entry_text{ font-size: 11px; line-height: 1.3; padding: 0 15px}

#header{ color:#000; font-size: 20px; text-transform: lowercase; margin-bottom: 20px}

.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }

div#header li { }

div#header li.view { font-style: italic}

div#header a, div#header a:link, div#header a:visited { color: #fff; font-size: 20px; font-style: italic}

div#header a:hover, div#footer a:hover{ color: #6ba218;}

ul.navheader{ color: #6ba218; padding: 10px 0; text-align: center}

ul.navheader li{ list-style: none; display: inline }

ul.navheader li:hover {}

#sidebar{ font-size: 10px; text-transform: lowercase; float: left; position: relative; width: 200px; text-align: left; padding: 5px; margin-top: -80px; height: 630px; overflow: hidden; overflow-y: auto; overflow-x: hidden}

.defaultuserpic {text-align: center; padding: 5px; background: url(http://www.dreamstime.com/seamless-floral-pattern-vector-thumb8500281.jpg); width: 105px; margin: 0 auto}

.defaultuserpic img {border: 2px solid #fff}

.sbarbody2 {margin: 5px 0; padding: 0 10px; color: #fff}

li.sbartitle {margin: 5px 20px; color: #6ba218; font-size: 20px; font-style: italic}
li.sbartitle:first-letter {color: #5e8f15}

table.calendar {text-align: center; color: #000; margin: 0 auto}

.sbarcalendar, .sbarcalendarposts { padding: 2px 6px; background: #fff;}

.sbarcalendar:hover, .sbarcalendarposts:hover {}

.sbarcalendarposts a, .sbarcalendarposts {color: #6ba218 }

ul.sbarlist{ list-style: none; margin-left: 5px}

li.sbaritem{ list-style: none; padding: 4px 5px }

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 12px; padding: 5px 0; color: #fff}

li.sbaritem a:hover {color: #6ba218}

.userpic, .userpicfriends{ float: left; text-align:center; padding: 5px; background: transparent !important; margin-left: -80px}
.userpicfriends font {color: #fff; background: #80c31c}

.userpic img, .userpicfriends img { width: 70px; height: 70px; padding: 1px; background: #fff }

.subject{ }

.subject a, .subject {color: #80c31c; font-size: 22px; font-style: italic; line-height: 0.5}

.subject a:hover {color: #6ba218;}

.date{ line-height: 1; font-size:10px; color:#5e8f15; letter-spacing: 5px }

.datesubject{text-align: left; }

.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; }

.comments{ text-align: center; color:transparent; clear:right; font-size:12px; line-height:0.2; position:relative; *line-height: 0.8; padding-bottom: 5px}

div.comments a, div.comments a:visited, div.comments a:active{font-size: 12px; background: #80c31c; display: inline-block; color: #fff; margin: 0 auto; padding:8px 15px 5px 15px; width:90px;}

div.comments a:hover{ background: #6ba218}

#footer{ text-align: center; color: #5e8f15; font-size: 15px; text-transform: lowercase; font-style: italic; margin-top: -60px}

#footer a:link, #footer a:visited, #footer:active {font-size:15px; color: #fff}

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; display: inline; }

.clearfoot{ clear: both; }

div.ljtags {margin-top: 15px; padding: 3px 5px; font-size: 12px; color: #6ba218; font-weight: bold; font-style: italic}

div.ljtags a {color: #000; font-size: 10px; font-weight: normal; font-style: normal}

.currents{ color: #000; font-size: 10px; margin-top: -33px; margin-left: 11px}

.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #000;}

.currentlocation a {color: #000;}

.currents strong {font-weight: 900; color: #6ba218; font-size: 12px; font-style: italic}

blockquote { font-size: 11px; padding: 10px; margin: 10px 0; color: #80c31c; font-style: italic; text-indent: 25px; text-align: justify; line-height: 1}

code, kbd, pre, tt { font-family: sans-serif; }

#lj_controlstrip {background: #80c31c }

#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #fff}

.separator {}

.box {padding: 30px}

.commentbox {background: #fff; margin: 10px 0; padding: 5px; width: 90%; float: right}

.datesubjectcomment {color: #80c31c; margin-bottom: 5px; }

.userpiccomment {width: 50px; height: 50px; margin-left: -65px; padding-right: 15px}

.commentreply {}

.skiplinks, .skiplinks a {text-align: center; color: #fff}
.skiplinks a {background: #80c31c}

table.yeartable {margin: 0 auto; background: #80c31c; width: 500px; height: 400px; padding: 10px; color: #fff}

ul.year {padding: 10px 30px; color: #fff}
ul.year a {color: #fff; font-size: 12px}

table.yeartable td.yearday {padding-left: 0px;}

/* other */

.lj-view-archive #content {height: 600px}

.lj-view-archive #maincontent {height: 500px}

.lj-view-entry #content {margin-top: -10px}

type: layouts, layout: flexible squares

Previous post Next post
Up