Live Preview |
IMG | S2 Flexible Squares
InstructionsNote: 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: Pretend.Relive.Regret
****************************************/
/* Colors
grey green: #b3bb97
dark magenta: #451637
cyan: #84ddc1
*/
*{margin: 0; padding: 0;}
body{ background: #b3bb97; font-family: Cabin, Gill Sans, sans-serif; font-size:12px; color: #451637;}
a, a:link, a:visited , a:active { color: #84ddc1; text-decoration: none; text-shadow: 1px 1px 2px #58625d; filter: dropshadow(color=#58625d, offx=1, offy=1);}
a:hover{color: #451637;}
h2 {display: none;}
#content{ margin: 0 auto; width: 500px}
#maincontent{ width: 500px; margin: 10px auto; }
.lj-view-archive #maincontent {background: #ddd;}
.lj-view-tags #maincontent {background: #ddd}
.subcontent{ padding: 5px; background: #ddd}
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 12px; line-height: 1.3; padding: 0 15px}
.entry_text a{ text-shadow: 1px 1px 2px #000; filter: dropshadow(color=#000, offx=1, offy=1); font-weight: bold; letter-spacing: 0px}
#header{ color:#451637; font-size: 18px; text-transform: lowercase; margin-left: 15px}
.title, .subtitle {color: #84ddc1; font-size: 28px; line-height: 0.7; text-align: left; margin: 0 auto; text-shadow: 1px 1px 2px #58625d; filter: dropshadow(color=#58625d, offx=1, offy=1);}
.headerimage {background: url(
http://i51.tinypic.com/jux3eu.jpg) no-repeat center bottom; margin: 0 auto; width: 500px; height: 345px; }
div#header li { }
div#header li.view {text-shadow: 1px 1px 2px #58625d; filter: dropshadow(color=#58625d, offx=1, offy=1); }
div#header a, div#header a:link, div#header a:visited { color: #fff; font-size: 18px; }
div#header a:hover { color: #84ddc1;}
ul.navheader{ color: #84ddc1; margin-top: -70px; }
ul.navheader li{ list-style: none; display: inline }
ul.navheader li:hover {}
#sidebar{ font-size: 10px; text-transform: lowercase; position: relative; width: 500px; text-align: left; height: 140px; margin: 20px auto 0 auto; background: #ddd}
.defaultuserpic {text-align: center; float: left; padding: 10px}
.defaultuserpic img {background: #84ddc1; padding: 5px}
.sbarbody2 {font-size: 11px; padding: 5px; height: 110px; overflow-y: auto; float: left; width: 120px; margin-top: 10px}
li.sbartitle {display: none;}
table.calendar {text-align: center; color: #451637; float: left; margin-top: 10px; margin-right: 10px}
.sbarcalendar, .sbarcalendarposts { padding: 4px 2px; background: #f2f2f2;}
.sbarcalendar:hover, .sbarcalendarposts:hover {}
.sbarcalendarposts a, .sbarcalendarposts {color: #84ddc1 }
ul.sbarlist{ list-style: none; float: left; margin-right: 5px; margin-top: 10px}
li.sbaritem{ list-style: none; }
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 14px; color: #451637}
li.sbaritem a:hover {color: #84ddc1}
.userpic, .userpicfriends{ float: right; text-align:center; padding: 5px; background: transparent !important}
.userpicfriends font, .userpicfriends a {color: #451637}
.userpic img, .userpicfriends img {padding: 5px; background: #84ddc1 }
.userpic img:hover, .userpicfriends img:hover { background: #451637}
.subject{ }
.subject a, .subject {color: #84ddc1; font-size: 28px; letter-spacing: -1px; line-height: 0.5}
.subject a:hover {color: #451637;}
.date{ line-height: 1; font-size:13px; color:#451637; }
.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: 24px; font-weight: bold; letter-spacing: -1px}
div.comments a:hover{ color: #451637}
#footer{ text-align: center; color: #451637; font-size: 15px; text-transform: lowercase; width: 500px; background: #ddd; padding: 10px 0; margin-top: -30px;}
#footer a:link, #footer a:visited {font-size:22px;}
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: 12px; color: #451637; font-weight: bold; }
div.ljtags a {color: #451637; font-size: 11px; font-weight: normal; text-shadow: none}
.currents{ color: #451637; font-size: 11px; margin-top: -33px; margin-left: 11px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #451637;}
.currentlocation a {color: #451637;}
.currents strong {font-weight: 900; color: #451637; font-size: 12px; }
blockquote { padding: 10px; margin: 0 auto; width: 90%; color: #451637;text-indent: 25px; text-align: justify; line-height: 1; display: block; background: #84ddc1; margin: 10px; }
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip {background: #451637 background: -moz-linear-gradient(top, #451637 0%, #B3BB97 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#451637), color-stop(100%,#B3BB97)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#451637', endColorstr='#B3BB97',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #451637 0%,#B3BB97 100%); /* opera */}
#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #84ddc1}
.separator {}
.box {padding: 30px}
.commentbox {background: #DDDDDD; /* old browsers */
background: -moz-linear-gradient(top, #DDDDDD 0%, #DDDDDD 57%, #B3BB97 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DDDDDD), color-stop(57%,#DDDDDD), color-stop(100%,#B3BB97)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DDDDDD', endColorstr='#B3BB97',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #DDDDDD 0%,#DDDDDD 57%,#B3BB97 100%); /* opera */
width: 480px; padding: 10px; margin: 10px 0; float: left}
.datesubjectcomment {margin-bottom: 10px; font-size: 13px; }
.userpiccomment {float: right; margin-left: 10px; margin-bottom: 10px; border: 5px solid #84ddc1}
.commentreply {}
.skiplinks a { }
.skiplinks {text-align: center;}
table.yeartable {margin: 0 auto}
ul.year {padding: 10px 30px }
table.yeartable td.yearday {padding-left: 0px;}
@font-face {
font-family: 'Cabin';
font-style: normal;
font-weight: 400;
src: local('Cabin Regular'), local('Cabin-Regular'), url('
http://themes.googleusercontent.com/font?kit=JEgmtEDzc-IH8jBshQXrYA') format('woff');
}