s2 flexible squares: Hell Song
Live Preview | Instructions
Hell Song
Layout Style: S2 - Flexible Squares
Browsers: chrome, firefox, IE
(font might look different in IE or Safari)
Credit: abellalayouts
Note: this layouts looks best when you change your journal ads to "in between entries"
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:
Code:
/* Colors
green: #15D180
light blue: #DAF0E1
light gray: #575757
dark grey: #2a2a2a
*/
*{margin: 0; padding: 0;}
@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: normal;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=n6RTCDcIPWSE8UNBa4k-DFFvkgauTbNF96NzJdlwv7E') format('truetype');
}
body { background: url(http://i37.tinypic.com/a4bg21.jpg) fixed #000; font-family: Gill Sans, sans-serif; font-size:12px; color: #15D180; }
a, a:link, a:visited , a:active { color: #DAF0E1; font-size: 12px; text-decoration: none;}
a:hover{color: #575757;}
h2 {display: none;}
.title, .subtitle {color: #2a2a2a; font-size: 28px; line-height: 0.7; text-align: center; margin: 0 80px;}
#content{ margin: 0 auto; width: 698px; background: url(http://i25.tinypic.com/25kpm6w.jpg) top center repeat-y fixed #fff; border-left: 2px solid #2a2a2a; border-right: 2px solid #2a2a2a}
#maincontent{ width: 575px; margin: 0 auto; }
.subcontent{ padding: 5px; }
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 12px; line-height: 1.3; padding: 0 25px}
#header{ color:#15D180; font-size: 18px; *font-size: 15px; text-transform: lowercase; font-family: Old Standard TT, Times New Roman; margin-top: -5px; margin-bottom: 20px}
.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }
div#header li { }
div#header a, div#header a:link, div#header a:visited { color: #DAF0E1; font-size: 18px; display: inline-block; padding: 5px 30px}
div#header a:hover, div#footer a:hover{ color: #DAF0E1;}
ul.navheader{ color: #DAF0E1; margin: 0 80px; text-align: center;}
ul.navheader li{ list-style: none; display: inline; background: #575757; text-align: center; padding: 2px 0; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; *margin: 0 5px}
ul.navheader li:hover, div#header li.view {background: #2a2a2a;}
div#header li.view {padding: 2px 30px; *padding: 5px 30px 10px 30px; *margin-top: -10px}
#sidebar{display: none;}
.userpic, .userpicfriends{ float: right; text-align:center; padding: 5px; background: transparent !important; margin-top: -5px}
.userpic img, .userpicfriends img {padding: 10px; background: #DAF0E1;}
.userpic img:hover, .userpicfriends img:hover { background: #15D180}
.subject{ text-align: left; }
.subject a, .subject {color: #2a2a2a; font-size: 18px; line-height: 0.5; font-family: Old Standard TT;}
.subject a:hover {color: #15D180;}
.date{ line-height: 1; font-size:11px; color:#15D180; text-align: left; letter-spacing: 4px}
.datesubject{margin-left: 15px; background: #DAF0E1; width: 430px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 5px 10px; *width: 400px}
.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: -5px auto; clear:right; margin-right: 15px; font-size:12px; line-height:0.2; position:relative; *line-height: 0.8}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 14px; background: #DAF0E1; display: block; color: #2a2a2a; margin:0 -10px 0 auto; padding:8px 15px 5px 15px; width:90px; font-family: Old Standard TT; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
div.comments a:hover{ background: #15D180}
#footer{ text-align: center; color: #15D180; font-size: 15px; font-family: Old Standard TT}
#footer a:link, #footer a:visited, #footer:active {font-size:15px; text-transform: lowercase; color: #2a2a2a}
div#footer a, div#footer a:link, div#footer a:visited {}
div#footer a:hover {color: #15D180}
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: #575757; font-weight: bold; }
div.ljtags a {color: #15D180; font-size: 11px; font-weight: normal;}
.currents{ color: #15D180; font-size: 11px; margin-top: -33px; margin-left: 11px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 19px; color: #15D180;}
.currentlocation a {color: #15D180;}
.currents strong {font-weight: 900; color: #575757; font-size: 12px}
blockquote { font-size: 11px; padding: 10px; margin: 10px 20px; color: #575757; font-style: italic; text-indent: 25px; text-align: justify; line-height: 1; border-left: 5px solid #DAF0E1}
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip {background: #2a2a2a }
#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #DAF0E1}
.separator {}
.box {padding: 30px; width: 500px}
.commentbox {}
.datesubjectcomment {background: #DAF0E1; width: 430px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 5px 10px;}
.userpiccomment {}
.commentreply {}
.skiplinks, .skiplinks a {text-align: center}
table.yeartable {margin: 0 auto}
ul.year {padding: 10px 30px }
table.yeartable td.yearday {padding-left: 0px;}