Poison

Dec 17, 2011 14:37



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:Poison

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

/* Colors
grey: #2e3638
blue: #899ca1
pink: #c17d6e
dark: #111a1c
*/

*{margin: 0; padding: 0;}

body{ background: url(http://www.sadmuffin.net/cherrybam/myspacelayouts/flowers/140.gif) repeat; font-family: 'Marmelad', Gill Sans, sans-serif; font-size:12px; color: #f4f4f4; }

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

a:hover{color: #899ca1;}

h2 {display: none;}

#content{ margin: 0 auto; width: 60%}

#maincontent{ width: 70%; margin: 20px 0 0 auto; padding-left: 20px;}
.lj-view-archive #maincontent {padding: 10px; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */}
.lj-view-tags #maincontent {padding: 10px; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */}

.subcontent{ padding: 10px; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */
}

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

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

#header{margin-top: 10px; color:#f4f4f4; font-size: 19px; text-transform: lowercase; font-family: 'Bad Script', arial, sans-serif; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */
}

.title, .subtitle {color: #899ca1; font-size: 28px; line-height: 0.7; text-align: right; margin: 0 auto; font-family: 'Bad Script', arial, sans-serif; }
.title {padding: 15px 10px 0 10px}
.subtitle {padding: 0 10px 15px 10px}

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

div#header li { }

div#header li.view:before {content:"-"; }
div#header li.view:after {content:"-"; }

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

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

ul.navheader{ color: #c17d6e; float: left; margin: 15px 15px 15px }

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

ul.navheader li:hover {}

#sidebar{text-transform: lowercase; float: left; position: relative; width: 25%; margin: 20px 0 0 0; text-align: left; padding: 5px; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */}

.defaultuserpic {text-align: center; background: #899ca1; padding-bottom: 20px;}

.defaultuserpic img {border: 2px solid #c17d6e; margin-bottom: -17px;}
.defaultuserpic:before {content: "("; font-size: 115px; color: #fff;}
.defaultuserpic:after {content: ")"; font-size: 115px; color: #fff;}

.sbarbody2 {font-size: 12px; padding: 5px; height: 250px; overflow-y: auto; margin: 10px 5px;}

.sbarbody2::-webkit-scrollbar {
width: 12px;
}

.sbarbody2::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

.sbarbody2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

li.sbartitle {display: none;}

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

.sbarcalendar, .sbarcalendarposts { padding: 2px 9px; background: #c17d6e;}

.sbarcalendar:hover, .sbarcalendarposts:hover {}

.sbarcalendarposts a, .sbarcalendarposts {color: #899ca1 }
.sbarcalendarposts:before, .sbarcalendarposts a:before {content:"("; color: #fff; margin-left: -3px;}
.sbarcalendarposts:after, .sbarcalendarposts a:after {content:")"; color: #fff; margin-right: -3px;}

ul.sbarlist{ list-style: none; text-align: center; padding: 10px 0;}

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

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

li.sbaritem a:hover {color: #c17d6e}
li.sbaritem a:hover:before {content: "-"}
li.sbaritem a:hover:after {content: "-"}

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

.userpicfriends {padding: 10px;}

.userpic:before { content: "("; color: #899ca1; font-size:84px }
.userpic:after { content: ")"; color: #899ca1; font-size:84px }

.userpic img, .userpicfriends img {width: 60px; height: 60px; margin-bottom: -5px; border: 2px solid #c17d6e}

.userpic img:hover, .userpicfriends img:hover { background: #899ca1}

.subject{ }

.subject a, .subject {color: #c17d6e; font-size: 22px; letter-spacing: 0px; line-height: 0.8}

.subject a:hover {color: #899ca1;}

.date{ line-height: 1; font-size:28px; color:#899ca1; }

.datesubject{ text-align: right; font-family: 'Bad Script', arial, sans-serif; margin: 15px 0 0 0; border-bottom: 1px solid #2e3638; padding-bottom: 35px;}

.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: 0px auto; font-family: 'Bad Script', arial, sans-serif;}

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

div.comments a:hover{ color: #899ca1}

#footer{ text-align: center; color: #f4f4f4; font-size: 15px; padding: 10px 0; text-transform: lowercase; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */}

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

div#footer a:hover {}

#footer .viewing:before {content: "- " }
#footer .viewing:after {content: " -" }

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: 14px; color: #899ca1; font-weight: bold; }

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

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

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

.currentlocation a {color: #f4f4f4;}

.currents strong {font-weight: 900; color: #899ca1; font-size: 12px}

blockquote {font-size: 13px; padding: 10px; margin: 0 auto; width: 90%; color: #899ca1; text-indent: 25px; text-align: justify; line-height: 1}}

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

.w-cs {background: #c17d6e; color: #020001;}

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

/* User info */
.w-cs .w-cs-userinfo { background: #c17d6e; border-color: #111a1c;}

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

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

.separator {}

.box {padding: 30px 0 30px 30px}

.commentbox {margin: 10px 0; padding: 10px; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */}

.datesubjectcomment {color: #899ca1; font-size: 14px; margin-bottom: 10px;}

.userpiccomment {float: right; margin-left: 10px; width: 60px; height: 60px; border: 2px solid #c17d6e}

.commentreply {}

.skiplinks a { }
.skiplinks {text-align: center; padding: 5px 0; background: #111a1c; /* Old browsers */
background: -moz-linear-gradient(top, #111a1c 0%, #2e3638 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111a1c), color-stop(100%,#2e3638)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111a1c 0%,#2e3638 100%); /* IE10+ */
background: linear-gradient(top, #111a1c 0%,#2e3638 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111a1c', endColorstr='#2e3638',GradientType=0 ); /* IE6-9 */}

table.yeartable {margin: 0 auto}

ul.year {padding: 10px 30px; }

table.yeartable td.yearday {padding-left: 0px; text-align: right; color: #899ca1}

.yearmonth {font-family: 'Bad Script'; font-size: 24px;}
.yearmonth a {font-family: 'Marmelad'; font-size: 12px; }

@font-face {
font-family: 'Bad Script';
font-style: normal;
font-weight: 400;
src: local('Bad Script Regular'), local('BadScript-Regular'), url('http://themes.googleusercontent.com/static/fonts/badscript/v1/rL_b2ND61EQmMOJ8CRr1fhsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}

@font-face {
font-family: 'Marmelad';
font-style: normal;
font-weight: 400;
src: local('Marmelad'), local('Marmelad-Regular'), url('http://themes.googleusercontent.com/static/fonts/marmelad/v2/HM9p0JaHv5-HhbhN_csF8vesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

Hello! Sorry I have been away for so long! I've started college, but now I have some time to create more layouts :)

type: layouts, layout: flexible squares

Previous post Next post
Up