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: Amber Lynn
****************************************/
/* Colors
pink: #ffdcd1
light pink: #ffe7df
white: #fff ... opacity 76%
http://i52.tinypic.com/15mic5s.jpgblue: #cee9f6
slate: #8b8e95
brown: #553b23
*/
*{margin: 0; padding: 0;}
body{ background: #ffdcd1; font-family: Arial, sans-serif; font-size:12px; color: #553b23; }
a, a:link, a:visited , a:active { color: #8b8e95; text-decoration: none; text-transform: uppercase}
a:hover{color: #cee9f6;}
h2 {display: none;}
#content{ margin: 0 auto; }
#maincontent{ width: 615px; margin: 50px auto 10px auto; background: url(
http://i54.tinypic.com/2iw56j7.jpg) repeat; padding: 35px}
.lj-view-archive #maincontent {}
.lj-view-tags #maincontent {}
.subcontent{ margin: 0; padding: 10px; background: url(
http://i52.tinypic.com/15mic5s.jpg) repeat}
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 11px; line-height: 1.2; padding: 0 15px}
#header{ color:#553b23; font-size: 18px; text-transform: lowercase; background: #ffe7df; padding: 10px}
.title, .subtitle {color: #8b8e95; font-size: 28px; line-height: 0.7; text-align: center; margin: 0 auto; font-family: 'Special Elite';}
.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }
div#header li { }
div#header li.view {text-transform: uppercase; font-size: 14px; color: #8b8e95; border-bottom: 1px solid #553b23}
div#header a, div#header a:link, div#header a:visited { color: #8b8e95; font-size: 14px; }
div#header a:hover { color: #553b23;}
ul.navheader{ color: #8b8e95; text-align: center; margin-bottom: 10px}
ul.navheader li{ list-style: none; display: inline;}
ul.navheader li:hover {}
#sidebar{ font-size: 10px; text-transform: lowercase; float: left; position: relative; width: 225px; text-align: left; padding: 5px; margin-top: 50px; background: #ffe7df}
.defaultuserpic {text-align: center; margin: 20px 0; -webkit-transform: rotate(353deg) ; -moz-transform: rotate(353deg) ; -o-transform: rotate(353deg) ;}
.defaultuserpic img {padding: 5px; background: #cee9f6; }
.sbarbody2 {font-size: 11px; padding: 5px; height: 200px; overflow-y: auto}
li.sbartitle {background: url(
http://i54.tinypic.com/2iw56j7.jpg) repeat; padding: 2px 3px 2px 35px; margin: 20px 0 5px -5px; text-transform: uppercase; font-weight: bold; text-shadow:1px 1px 4px #cee9f6;}
table.calendar {text-align: center; color: #553b23; margin: 0 auto; font-size: 12px}
.sbarcalendar, .sbarcalendarposts { padding: 2px 8px; background: #cee9f6;}
.sbarcalendar:hover, .sbarcalendarposts:hover {}
.sbarcalendarposts a, .sbarcalendarposts {color: #8b8e95 }
ul.sbarlist{ list-style: none; }
li.sbaritem{ list-style: none; padding: 2px 5px }
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 10px; color: #553b23}
li.sbaritem a:hover {color: #8b8e95}
.userpic, .userpicfriends{ float: right; text-align:center; padding: 5px; background: transparent !important; margin: 0 0 10px 10px}
.userpicfriends font, .userpicfriends a {color: #553b23; font-size: 10px !important}
.userpic img, .userpicfriends img { border: 5px double #cee9f6; background: url(
http://i54.tinypic.com/2iw56j7.jpg) repeat; padding: 5px }
.userpic img:hover, .userpicfriends img:hover { background: #ffdcd1}
.subject{ }
.subject a, .subject { font-family: 'Special Elite'; color: #8b8e95; font-size: 22px; line-height: 1.1}
.subject a:hover {color: #553b23;}
.date{ line-height: 1; font-size:14px; color:#553b23; letter-spacing: -1px }
.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: right; color:transparent; margin: 0px auto;}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 16px; font-family: 'Special Elite';}
div.comments a:hover{ color: #cee9f6}
#footer{ text-align: center; color: #553b23; font-size: 15px; text-transform: lowercase; width: 100%; background: #ffe7df; margin-bottom: -20px; padding: 20px 0}
#footer a:link, #footer a:visited {font-size:16px; font-family: 'Special Elite';}
div#footer a:hover {}
#footer .viewing { font-size: 10px; text-transform: uppercase}
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: #8b8e95; font-weight: bold; }
div.ljtags a {color: #553b23; font-size: 10px; font-weight: normal;}
.currents{ color: #553b23; font-size: 10px; margin-top: -33px; margin-left: 11px; }
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #553b23; text-transform: uppercase}
.currentlocation a {color: #553b23;}
.currents strong {font-weight: 900; color: #8b8e95; font-size: 12px; text-transform: capitalize }
blockquote {font-size: 11px; padding: 10px; margin: 0 auto; width: 90%; color: #8b8e95; font-style: italic; text-indent: 25px; text-align: justify; line-height: 1}
code, kbd, pre, tt { font-family: sans-serif; }
.w-cs {background: #ffe7df; color: #553b23;}
.w-cs a:link, .w-cs a:visited, .w-cs a:active { color: #8b8e95 !important; }
.w-cs a:hover { color: #cee9f6 !important; }
/* User info */
.w-cs .w-cs-userinfo { background: #ffe7df; border-color: #ffe7df;}
/* Summary */
.w-cs .w-cs-summary { background: #ffe7df; }
.w-cs .w-cs-summary LI.w-cs-i-tokens { border-color: #ffe7df; }
.separator {}
.box {padding: 30px}
.commentbox {background: url(
http://i52.tinypic.com/15mic5s.jpg) repeat; margin: 10px 0; padding: 10px}
.datesubjectcomment {text-transform: uppercase; font-size: 10px; margin-bottom: 10px}
.userpiccomment {float: left; margin: 0 10px 10px 0; border: 5px solid #cee9f6 }
.commentreply {font-size: 12px}
.skiplinks a { }
.skiplinks {text-align: center; background: url(
http://i52.tinypic.com/15mic5s.jpg) repeat}
table.yeartable {margin: 0 auto; background: url(
http://i52.tinypic.com/15mic5s.jpg) repeat; width: 500px; padding: 10px}
ul.year {padding: 10px 0 10px 30px; background: url(
http://i52.tinypic.com/15mic5s.jpg) repeat; width: 470px; margin-left: 57px}
.yearmonth { text-transform: uppercase; color: #8b8e95}
table.yeartable td.yearday {padding-left: 0px;}
@font-face {
font-family: 'Special Elite';
font-style: normal;
font-weight: normal;
src: local('Special Elite'), local('SpecialElite-Regular'), url('
http://themes.googleusercontent.com/font?kit=9-wW4zu3WNoD5Fjka35Jm_n8qdNnd5eCmWXua5W-n7c') format('woff');
}