With You Around

May 29, 2011 10:06



Live Preview | IMG | 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, IE
Browser Compatible: tested in chrome, firefox, IE
Custom fonts don't work in 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:
Layout by

Button:
http://community.livejournal.com/abellalayouts/">http://i51.tinypic.com/2gy6j9u.jpg" />



Code:

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

Layout by http://community.livejournal.com/abellalayouts/
Style: Flexible Squares, S2
Layout: With You Around

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

/* Colors
white: #ffffff
pink: #ed585d
brown: #4f413c
blue: #bae6d8
yellow: #fcecb1
grey: #f5f5f5
*/

*{margin: 0; padding: 0;}

body{ background: url(http://i51.tinypic.com/2yyqddw.jpg) no-repeat 10px bottom #ffffff fixed; font-family: 'Amaranth', Gill Sans, sans-serif; font-size:12px; color: #f5f5f5; }

a, a:link, a:visited , a:active { color: #bae6d8; text-decoration: none;}

a:hover{color: #ed585d;}

h2 {display: none;}

#content{ margin: 0 auto; }

#maincontent{ width: 700px; margin: 20px 50px 0 auto; }
.lj-view-archive #maincontent {width: 650px; background: #4f413c; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; webkit-box-shadow: 5px 5px 15px #362c29;-moz-box-shadow: 5px 5px 15px #362c29; box-shadow: 5px 5px 15px #362c29; padding: 20px; }
.lj-view-tags #maincontent {width: 650px; background: #4f413c; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; webkit-box-shadow: 5px 5px 15px #362c29;-moz-box-shadow: 5px 5px 15px #362c29; box-shadow: 5px 5px 15px #362c29; padding: 20px; }

.lj-view-entry #sidebar {top: 210px}
.lj-view-archive #sidebar {top: 210px}
.lj-view-tags #sidebar {top: 210px}

.subcontent{ padding:10px; background: #4f413c; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; webkit-box-shadow: 5px 5px 15px #362c29;-moz-box-shadow: 5px 5px 15px #362c29; box-shadow: 5px 5px 15px #362c29; margin-bottom: 10px;}

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

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

#header{ background: #4f413c; color:#f5f5f5; font-size: 18px; text-transform: lowercase; width: 430px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; webkit-box-shadow: 5px 5px 15px #362c29;-moz-box-shadow: 5px 5px 15px #362c29; box-shadow: 5px 5px 15px #362c29; position: fixed; left: 20px; padding: 20px}

.title, .subtitle {color: #fcecb1; font-size: 20px; line-height: 0.7; text-align: left; margin: 0 auto;}

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

div#header li { }

div#header li.view { }

div#header a, div#header a:link, div#header a:visited { color: #bae6d8; font-size: 18px; }

div#header a:hover { color: #ed585d;}

ul.navheader{ color: #ed585d}

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

ul.navheader li:hover {}

#sidebar{ font-size: 10px; text-transform: lowercase; text-align: left; padding: 20px; position: fixed; top: 190px; background: #4f413c; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; webkit-box-shadow: 5px 5px 15px #362c29;-moz-box-shadow: 5px 5px 15px #362c29; box-shadow: 5px 5px 15px #362c29; width: 430px; left: 20px}

.defaultuserpic {text-align: right; float: right; -webkit-transform: rotate(10deg) ; -moz-transform: rotate(10deg) ; -o-transform: rotate(10deg) ;}

.defaultuserpic img {padding: 5px; background: #fcecb1}

.sbarbody2 {font-size: 11px; padding: 5px; height: 60px; width: 400px; overflow-y: auto; float: left}

#sidebar_tags, #sidebar_tags ul, .sbarbody #sidebar_tags {float: right}

li.sbartitle {display: none;}

table.calendar {text-align: center; color: #f5f5f5; float: right;}

.sbarcalendar, .sbarcalendarposts { padding: 2px 2px; border: 1px solid #ed585d;}

.sbarcalendar:hover, .sbarcalendarposts:hover {}

.sbarcalendarposts a, .sbarcalendarposts {color: #bae6d8 }

ul.sbarlist{ list-style: none; float: right; margin: 0 5px}

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

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 14px; color: #bae6d8}

li.sbaritem a:hover {color: #ed585d}

.userpic, .userpicfriends{ float: right; text-align:center; padding: 10px; background: transparent !important}
.userpicfriends font, .userpicfriends a {color: #f5f5f5}

.userpic img, .userpicfriends img {padding: 5px; background: #fcecb1 }

.userpic img:hover, .userpicfriends img:hover { background: #ed585d}

.subject{ }

.subject a, .subject {color: #bae6d8; font-size: 32px; letter-spacing: -2px; line-height: 0.5}

.subject a:hover {color: #ed585d;}

.date{ line-height: 1; font-size:12px; color:#fcecb1; }

.datesubject{ text-align: left; margin-left: 15px}

.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: right; color:transparent; margin-right: 20px}

div.comments a, div.comments a:visited, div.comments a:active{font-size: 16px; }

div.comments a:hover{ color: #ed585d}

#footer{ text-align: center; color: #ed585d; font-size: 15px; text-transform: lowercase}

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

div#footer a:hover {}

#footer .viewing { }

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: 13px; color: #bae6d8; font-weight: bold; }

div.ljtags a {color: #fcecb1; font-size: 12px; font-weight: normal;}

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

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

.currentlocation a {color: #fcecb1;}

.currents strong {font-weight: 900; color: #bae6d8; font-size: 13px}

blockquote {font-size: 11px; padding: 10px; margin: 0 auto; width: 90%; color: #bae6d8; font-style: italic; text-indent: 25px; text-align: justify; line-height: 1}}

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

.w-cs {background: #4f413c; color: #fcecb1 !important;}

.w-cs a:link, .w-cs a:visited, .w-cs a:hover, .w-cs a:active { color: #bae6d8 !important; }

/* User info */
.w-cs .w-cs-userinfo { background: #4f413c; border-color: #ed585d;}

/* Summary */
.w-cs .w-cs-summary { background: #4f413c; }

.w-cs .w-cs-summary LI.w-cs-i-tokens { border-color: #ed585d; }

.separator {}

.box {padding: 30px}

.commentbox {background: #4f413c; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; webkit-box-shadow: 5px 5px 15px #362c29;-moz-box-shadow: 5px 5px 15px #362c29; box-shadow: 5px 5px 15px #362c29; padding: 20px; margin: 10px 0}

.datesubjectcomment {color: #ed585d; margin-bottom: 10px}

.userpiccomment {float: left; border: 5px solid #fcecb1; margin: 0 20px}

.commentreply {}

.skiplinks a { }
.skiplinks {text-align: center;}

table.yeartable {margin: 0 auto; font-size: 13px}

ul.year {padding: 10px 30px }

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

@font-face {
font-family: 'Amaranth';
font-style: normal;
font-weight: normal;
src: local('Amaranth'), url('http://themes.googleusercontent.com/font?kit=RvdVaxHTnYbJDko8dLi4zvesZW2xOQ-xsNqO47m55DA') format('woff');
}

type: layouts, layout: flexible squares

Previous post Next post
Up