s2 flexible squares: Q
Q
Layout Style: S2 - Flexible Squares
Browsers: chrome, IE
Credit: abellalayouts
Live Preview | IMG | Instructions
Note: this layouts looks best when you change your journal ads to "in between entries"
FYI: the cool font only works in chrome and IE, not firefox
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
Add a button:
http://community.livejournal.com/abellalayouts/">
http://i51.tinypic.com/2gy6j9u.jpg" />
Credit:
Layout by
Code:
/****************************************
Layout by http://community.livejournal.com/abellalayouts/
Style: Flexible Squares, S2
Layout: Q
****************************************/
/* Colors
brown: #231600
blue: #59afd5
white: #fff
yellow: #fdfdd7
pink: #ef1c5b
*/
*{margin: 0; padding: 0;}
body{ background: #231600; font-family: Verdana, sans-serif; font-size:12px; color: #fff; }
a, a:link, a:visited , a:active { color: #ef1c5b; font-size: 10px; text-decoration: none;}
a:hover{color: #59afd5;}
h2 {display: none;}
.title, .subtitle {color: #ef1c5b; font-size: 38px; line-height: 1.0; text-align: center; margin: 0 auto; font-family: 'HVDPeaceRegular';}
#content{ margin: 0 auto; }
#maincontent{ width: 700px; margin: 20px auto; background: url(http://i56.tinypic.com/2r3b0qr.jpg) left bottom no-repeat #231600; padding-left: 90px; padding-right: 20px; height: 470px; overflow-x: hidden; overflow-y: auto;}
.lj-view-archive #maincontent {}
.lj-view-tags #maincontent {}
.subcontent{ padding: 5px; }
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 11px; line-height: 1.3; padding: 0 15px}
#header{ color:#fff; font-size: 18px; text-transform: lowercase; margin: 10px 0}
.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }
div#header li { }
div#header li.view { font-family: HVDPeaceRegular}
div#header a, div#header a:link, div#header a:visited { color: #fff; font-size: 18px; font-family: HVDPeaceRegular}
div#header a:hover { color: #59afd5;}
ul.navheader{ color: #59afd5; text-align: center; margin: 5px 0}
ul.navheader li{ list-style: none; display: inline; }
ul.navheader li:hover {}
#sidebar{ font-size: 10px; text-transform: lowercase; float: left; position: relative; width: 175px; text-align: left; padding: 5px; margin-left: 30px}
.defaultuserpic {text-align: center; margin: 10px 0}
.defaultuserpic img {-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); padding: 5px; background: #59afd5}
.sbarbody2 {font-size: 11px; padding: 5px; height: 150px; overflow-y: auto; margin: 5px 0}
li.sbartitle {display: none;}
table.calendar {text-align: center; color: #fff; margin: 0 auto}
.sbarcalendar, .sbarcalendarposts { padding: 3px 4px;}
.sbarcalendar:hover, .sbarcalendarposts:hover {}
.sbarcalendarposts a, .sbarcalendarposts {color: #ef1c5b }
ul.sbarlist{ list-style: none; margin: 10px 0}
li.sbaritem{ list-style: none; border-bottom: 1px solid #ef1c5b; padding-top: 3px; padding-left: 5px}
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 11px; color: #fff; letter-spacing: 1px}
li.sbaritem a:hover {color: #ef1c5b}
.userpic, .userpicfriends{ float: right; text-align:center; padding: 5px; background: transparent !important}
.userpicfriends font, .userpicfriends a {color: #fff}
.userpic img, .userpicfriends img { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); padding: 5px; background: #59afd5; width: 85px; height: 85px }
.subject{ }
.subject a, .subject {color: #59afd5; font-size: 28px; letter-spacing: -1px; line-height: 1.0; font-family: 'HVDPeaceRegular'}
.subject a:hover {color: #ef1c5b;}
.date{ line-height: 1; font-size:10px; color:#fff; letter-spacing: 2px}
.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; border-bottom: 1px solid #59afd5; margin-left: 20px; padding-bottom: 2px}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 11px; letter-spacing: 1px }
div.comments a:hover{ color: #59afd5}
#footer{ text-align: center; color: #fff; 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: 12px; color: #ef1c5b; font-weight: bold;}
div.ljtags a {color: #fff; font-size: 11px; font-weight: normal;}
.currents{ color: #fff; font-size: 11px; margin-top: -32px; margin-left: 11px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #fff;}
.currentlocation a {color: #fff;}
.currents strong {font-weight: 900; color: #ef1c5b; font-size: 12px}
blockquote {font-size: 10px; padding: 10px; margin: 15px auto; width: 80%; color: #ef1c5b; text-indent: 25px; text-align: justify; line-height: 1; border-left: 1px solid #59afd5; border-right: 1px solid #59afd5}
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip { background: #231600}
#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #ef1c5b}
.separator {}
.box {padding: 30px}
.commentbox { border-bottom: 1px solid #59afd5; margin: 15px 0; padding: 10px}
.datesubjectcomment {color: #ef1c5b; margin-bottom: 10px}
.userpiccomment {float: left; width: 60px; height: 60px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); padding: 5px; background: #ef1c5b; margin: 10px}
.commentreply {font-size: 11px}
.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: 'HVDPeaceRegular';
src: url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.eot');
src: local('HVDPeaceRegular'), url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.woff') format('woff'), url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.ttf') format('truetype'), url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HVDPeaceRegular';
font-style: normal;
font-weight: normal;
src: url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.ttf') format('truetype');
}
Layout Style: S2 - Flexible Squares
Browsers: chrome, IE
Credit: abellalayouts
Live Preview | IMG | Instructions
Note: this layouts looks best when you change your journal ads to "in between entries"
FYI: the cool font only works in chrome and IE, not firefox
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
Add a button:
http://community.livejournal.com/abellalayouts/">
Credit:
Layout by
Code:
/****************************************
Layout by http://community.livejournal.com/abellalayouts/
Style: Flexible Squares, S2
Layout: Q
****************************************/
/* Colors
brown: #231600
blue: #59afd5
white: #fff
yellow: #fdfdd7
pink: #ef1c5b
*/
*{margin: 0; padding: 0;}
body{ background: #231600; font-family: Verdana, sans-serif; font-size:12px; color: #fff; }
a, a:link, a:visited , a:active { color: #ef1c5b; font-size: 10px; text-decoration: none;}
a:hover{color: #59afd5;}
h2 {display: none;}
.title, .subtitle {color: #ef1c5b; font-size: 38px; line-height: 1.0; text-align: center; margin: 0 auto; font-family: 'HVDPeaceRegular';}
#content{ margin: 0 auto; }
#maincontent{ width: 700px; margin: 20px auto; background: url(http://i56.tinypic.com/2r3b0qr.jpg) left bottom no-repeat #231600; padding-left: 90px; padding-right: 20px; height: 470px; overflow-x: hidden; overflow-y: auto;}
.lj-view-archive #maincontent {}
.lj-view-tags #maincontent {}
.subcontent{ padding: 5px; }
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 11px; line-height: 1.3; padding: 0 15px}
#header{ color:#fff; font-size: 18px; text-transform: lowercase; margin: 10px 0}
.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }
div#header li { }
div#header li.view { font-family: HVDPeaceRegular}
div#header a, div#header a:link, div#header a:visited { color: #fff; font-size: 18px; font-family: HVDPeaceRegular}
div#header a:hover { color: #59afd5;}
ul.navheader{ color: #59afd5; text-align: center; margin: 5px 0}
ul.navheader li{ list-style: none; display: inline; }
ul.navheader li:hover {}
#sidebar{ font-size: 10px; text-transform: lowercase; float: left; position: relative; width: 175px; text-align: left; padding: 5px; margin-left: 30px}
.defaultuserpic {text-align: center; margin: 10px 0}
.defaultuserpic img {-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); padding: 5px; background: #59afd5}
.sbarbody2 {font-size: 11px; padding: 5px; height: 150px; overflow-y: auto; margin: 5px 0}
li.sbartitle {display: none;}
table.calendar {text-align: center; color: #fff; margin: 0 auto}
.sbarcalendar, .sbarcalendarposts { padding: 3px 4px;}
.sbarcalendar:hover, .sbarcalendarposts:hover {}
.sbarcalendarposts a, .sbarcalendarposts {color: #ef1c5b }
ul.sbarlist{ list-style: none; margin: 10px 0}
li.sbaritem{ list-style: none; border-bottom: 1px solid #ef1c5b; padding-top: 3px; padding-left: 5px}
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 11px; color: #fff; letter-spacing: 1px}
li.sbaritem a:hover {color: #ef1c5b}
.userpic, .userpicfriends{ float: right; text-align:center; padding: 5px; background: transparent !important}
.userpicfriends font, .userpicfriends a {color: #fff}
.userpic img, .userpicfriends img { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); padding: 5px; background: #59afd5; width: 85px; height: 85px }
.subject{ }
.subject a, .subject {color: #59afd5; font-size: 28px; letter-spacing: -1px; line-height: 1.0; font-family: 'HVDPeaceRegular'}
.subject a:hover {color: #ef1c5b;}
.date{ line-height: 1; font-size:10px; color:#fff; letter-spacing: 2px}
.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; border-bottom: 1px solid #59afd5; margin-left: 20px; padding-bottom: 2px}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 11px; letter-spacing: 1px }
div.comments a:hover{ color: #59afd5}
#footer{ text-align: center; color: #fff; 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: 12px; color: #ef1c5b; font-weight: bold;}
div.ljtags a {color: #fff; font-size: 11px; font-weight: normal;}
.currents{ color: #fff; font-size: 11px; margin-top: -32px; margin-left: 11px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #fff;}
.currentlocation a {color: #fff;}
.currents strong {font-weight: 900; color: #ef1c5b; font-size: 12px}
blockquote {font-size: 10px; padding: 10px; margin: 15px auto; width: 80%; color: #ef1c5b; text-indent: 25px; text-align: justify; line-height: 1; border-left: 1px solid #59afd5; border-right: 1px solid #59afd5}
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip { background: #231600}
#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #ef1c5b}
.separator {}
.box {padding: 30px}
.commentbox { border-bottom: 1px solid #59afd5; margin: 15px 0; padding: 10px}
.datesubjectcomment {color: #ef1c5b; margin-bottom: 10px}
.userpiccomment {float: left; width: 60px; height: 60px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); padding: 5px; background: #ef1c5b; margin: 10px}
.commentreply {font-size: 11px}
.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: 'HVDPeaceRegular';
src: url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.eot');
src: local('HVDPeaceRegular'), url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.woff') format('woff'), url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.ttf') format('truetype'), url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HVDPeaceRegular';
font-style: normal;
font-weight: normal;
src: url('http://dl.dropbox.com/u/11736761/HVDPeace/HVD_Peace-webfont.ttf') format('truetype');
}