s2 flexible squares: Homesick
Live Preview | IMG | Instructions
Homesick
Layout Style: S2 - Flexible Squares
Browsers: chrome, firefox
Credit: abellalayouts
Note: this layouts looks best when you change your journal ads to "in between entries"
Background Credit: http://www.gomediazine.com/design-tip/freebie-seamless-swirls/
Tiny Icons: Dry Icons
Rules:
- you must credit abellalayouts in your Profile or Sidebar
- please comment if you're downloading my layout
- feel free to change around the background and colors --> as long as you ask and credit me!
- i love feedback! let me know what you think!
- please add me for updates
Please join my community for exclusive access to members only layouts like these:
Credit:
Layout by
Code:
/****************************************
Layout by http://community.livejournal.com/abellalayouts/
Style: Flexible Squares, S2
Layout: Homesick
****************************************/
/* Colors
red: #ef4136
light blue: #70cafc
blue: #1976bc
yellow: #fff64a
green: #009342
orange: #f4941c
*/
*{margin: 0; padding: 0;}
body{ background: url(http://i37.tinypic.com/14kz7z9.jpg) -40px bottom fixed no-repeat #fff; font-family: Century Gothic, sans-serif; font-size:12px; color: #1976bc; }
a, a:link, a:visited , a:active { color: #ef4136; text-decoration: none; border-bottom: 1px dashed #fff64a}
a:hover{color: #fff64a; border-bottom: 1px dashed #f4941c}
h2 {display: none;}
.title, .subtitle {color: #ef4136; font-size: 38px; line-height: 0.7; text-align: center; margin: 0 auto; position: fixed; left: 40px; width: 300px}
.title {top: 100px}
.subtitle {top: 155px}
#content{ margin: 15px 5% 15px auto; width: 800px}
#maincontent{ width: 500px; margin: -90px 0 0 auto; }
.lj-view-entry #header {margin-top: 150px}
.subcontent{ padding: 5px; border-left: 2px solid #009342; border-top: 2px solid #f4941c; border-right: 2px solid #009342; border-bottom: 2px solid #f4941c; margin: 10px 0}
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 12px; line-height: 1.3; padding: 0 15px}
#header{ color:#1976bc; font-size: 18px; text-transform: lowercase;}
.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }
div#header li { }
div#header li.view {font-size: 0px; border: none; list-style: none; display: inline-block; width: 0px; height: 128px; margin: 0 10px; padding: 0 }
div#header a, div#header a:link, div#header a:visited { color: #fff64a; font-size: 0px; border: none}
div#header a:hover, div#footer a:hover{ color: #ef4136; border: none}
ul.navheader{ color: #ef4136; margin: 0 auto; width: 800px; text-align: center}
ul.navheader li{ list-style: none; display: inline-block; width: 128px; height: 128px; margin: 0 20px }
ul.navheader li:hover {}
body.lj-view-recent div#header li.view { background:transparent url(http://i37.tinypic.com/2vbka40.jpg) no-repeat scroll 0 0; padding:128px 68px 0; }
body.lj-view-archive div#header li.view{ padding:128px 68px 0; background:transparent url(http://i38.tinypic.com/k00kdj.jpg) no-repeat scroll 0 0}
body.lj-view-friends div#header li.view{ padding:128px 68px 0; background:transparent url(http://i37.tinypic.com/2natzwz.jpg) no-repeat scroll 0 0}
div#header a[href*=".livejournal.com/"] {
background:url("http://i37.tinypic.com/2vbka40.jpg") no-repeat scroll 0 0 transparent;
padding:128px 128px 0; }
div#header a[href*="/calendar"] {
background:transparent url(http://i38.tinypic.com/k00kdj.jpg) no-repeat scroll 0 0; padding:128px 128px 0; }
div#header a[href*="/friends"] {
background:transparent url(http://i37.tinypic.com/2natzwz.jpg) no-repeat scroll 0 0; padding:128px 128px 0; }
div#header a[href*="/profile"] {
background:transparent url(http://i34.tinypic.com/o73yhi.jpg) no-repeat scroll 0 0; padding:128px 128px 0; }
#sidebar{ font-size: 10px; text-transform: lowercase; float: left; width: 200px; text-align: left; padding: 20px 5px; margin-top: -80px; border-right: 1px solid #fff64a; border-left: 1px solid #fff64a; border-top: 1px solid #70cafc; border-bottom: 1px solid #70cafc}
.defaultuserpic {text-align: center; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5)}
.defaultuserpic img {padding: 10px; background: #009342}
.sbarbody2 {font-size: 11px; padding: 10px 5px; height: 150px; overflow-y: auto}
li.sbartitle {color: #f4941c; font-size: 24px; text-align: center; letter-spacing: 2px}
table.calendar {text-align: center; color: #009342; margin: 0 auto}
.sbarcalendar, .sbarcalendarposts { padding: 3px 6px; background: #fffcc6; }
.sbarcalendar:hover, .sbarcalendarposts:hover {}
.sbarcalendarposts a, .sbarcalendarposts {color: #ef4136 }
ul.sbarlist{ list-style: none; margin: 10px 0}
li.sbaritem{ list-style: none; padding: 3px 5px; text-align: center }
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 12px; color: #ef4136; border-bottom: 1px dashed #009342}
li.sbaritem a:hover {color: #ef4136}
.userpic, .userpicfriends{ float: right; text-align:center; margin: 10px; padding: 5px; background: transparent !important; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); }
.userpicfriends font, .userpicfriends a {color: #f4941c}
.userpic img, .userpicfriends img {width: 70px; height: 70px; padding: 5px; background: #70cafc }
.userpic img:hover, .userpicfriends img:hover { background: #fff64a}
.subject{ }
.subject a, .subject {color: #70cafc; font-size: 16px; line-height: 0.5}
.subject a:hover {color: #1976bc;}
.date{ line-height: 1; font-size:20px; color:#ef4136; letter-spacing: 3px}
.datesubject{ text-align: center; }
.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; margin: 0px auto;}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 16px; color: #70cafc}
div.comments a:hover{ color: #1976bc}
#footer {text-transform:lowercase; z-index:10; margin: 25px auto 10px auto; text-align: center }
ul.navfooter{ margin:0 auto; text-align:center;}
div#footer a, div#footer a:link, div#footer a:visited {color:#d44461; font-size:0; letter-spacing:-1px; padding:40px 60px 60px 70px; margin: 0 10px 10px 10px}
div#footer a:hover {font-size:0; letter-spacing:-1px}
ul.navfooter li { background:url("http://i35.tinypic.com/30ddjki.jpg") no-repeat scroll 0 0 transparent; display: inline; list-style:none outside none; padding:100px 0px; }
ul.navfooter li + li {background:url("http://i34.tinypic.com/53wwpc.jpg") no-repeat scroll 0 0 transparent; padding:100px 0px; }
#footer .viewing { display:none; }
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: #ef4136; font-weight: bold; }
div.ljtags a {color: #1976bc; font-size: 11px; font-weight: normal;}
.currents{ color: #1976bc; font-size: 11px; margin-top: -33px; margin-left: 11px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #1976bc;}
.currentlocation a {color: #1976bc;}
.currents strong {font-weight: 900; color: #ef4136; font-size: 12px}
blockquote {font-size: 11px; padding: 10px; margin: 0 auto; width: 80%; color: #ef4136; font-style: italic; text-indent: 25px; text-align: justify; line-height: 1}}
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip { background: #fff}
#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #ef4136}
.separator {}
.box {padding: 30px}
.commentbox {border-left: 1px solid #70cafc; border-right: 1px solid #70cafc; border-top: 1px solid #009342; border-bottom: 1px solid #009342; padding: 10px; margin: 10px 0}
.datesubjectcomment {margin-bottom: 5px; color: #f4941c}
.userpiccomment {float: left; margin-left: -130px; width: 80px; height: 80px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); border: 10px solid #fff64a}
.commentreply {font-size: 12px}
.skiplinks, .skiplinks a {text-align: center}
table.yeartable {margin: 0 auto}
ul.year {padding: 10px 30px }
table.yeartable td.yearday {padding-left: 0px;}