(layout 031 →) flexi sqs: hard wood, harder will.
Entitled: Hard wood, Harder will.
Account Types: Paid, Basic and Plus.
Preview: static | live
INSTALLATION 101
Go to Customize -> Select a Flexible Squares stylesheet -> choose Customize your theme -> then click on Custom CSS in the menu on the left. Set all the dropdown menus to no and paste the css in the textbox, then save.
For Plus accounts the ads can be set anywhere, but between entries should look better.
/* entitled: wooden philosophy */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color:white;
background-image: url("http://i50.tinypic.com/2r2os9u.png");
background-attachment:fixed;
margin: 35px 0 0px 0;
}
body, td, th {
font: normal 11px "Arial", sans-serif;
color: #404040;
line-height: 1.5em;
text-align:justify;
}
/* PARENT LINKS, BLOCK QUOTE ---------------- */
a, a:link, a:visited, a:active {
color: #545454;
text-decoration: none;
}
b, strong {
color: #C1305F;
}
i, em {
color:#9FC6A1;
font:italic 12px georgia, serif;
}
a:hover {
color: #AED2B1;
text-decoration: none;
}
blockquote {
padding: 15px;
border: 1px dotted #999999;
background-color: #fcfcfc;
}
input, textarea, select {
background-color: #ffffff;
font: normal 11px "Courier New", monospace;
border:1px dotted #EFEFEF;
}
/* CONTENT FORMATTING ---------------- */
#content {
margin:auto;
}
#maincontent {
margin:auto;
position:relative;
color: #999999;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:white;
border: 1px dotted #999999;
width:800px;
margin:auto;
z-index: 12; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 150px;
position:fixed;
background-color:#ffffff;
margin-left:-610px;
left:50%;
z-index: 13;
padding: 10px;
text-align: center;
font: bold 16px "Century Gothic", sans-serif;
color:#DBDBDB;
border:1px dotted #999999;
}
#footer {
width:800px;
font: normal 12px "Courier New", sans-serif;
text-transform: Uppercase;
border:1px dotted #999999;
background-color: #ffffff;
margin:auto;
text-align: center;
letter-spacing: 0px;
color: #404040;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #9FC6A1;
}
#footer a:hover {
color: #999999;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #F5A142;
text-transform:uppercase;
background-color:#F7F0B4;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
margin:0px;
list-style:none;
display:block;
}
div#header a:hover {
text-decoration: none;
color: #D0D893;
background-color:#EEF2B8;
margin:0px;
}
ul.navheader {
padding: 0px 0px 0px 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
ul.navheader li.view {
padding: 0px 10px 0px 10px;
text-decoration: bold;
color:#999999;
background-color:#f9f9f9;
text-transform:uppercase;
display:block;
}
.title {font-family:; text-transform:uppercase;position: fixed; z-index: 13; margin-left:-610px;margin-top:40px;
left:50%;text-align:right; color:#C1305F; text-shadow: 0px 0px #ffffff; width:150px;background:white; padding:10px; border:1px dotted #999999; }
.subtitle
{
display:none;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
padding: 5px;
color: #404040;
font: normal 12px "arial", sans-serif;
line-height:1.5em;
text-align: left;
margin-bottom:5px;
}
.lj-view-recent .entry_text {
min-height:105px; }
.entry_text {
background: white;
padding:5px 5px 5px 5px;
}
.entry_text a:link, a:visited, a:active {
color:e3e3e3; }
.entry_text a:hover {
color:e3e3e3; }
.entry_text img {
border: 1px dotted #CCCCCC;
padding:5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 5px;
}
.entry ol li {
padding-left: 5px;
margin-left: 5px;
}
/* USER PIC CRAP ---------------- */
.userpic {
position: relative;
float: right;
padding: 0px;
margin: 10px;
z-index: 15;
margin-left: 10px !important;
border: 0px solid #946063;
}
.userpicfriends {
position: relative;
float: right;
padding: 0px;
margin-right: 10px;
margin-left: 10px !important;
margin-top: 10px;
z-index: 15;
text-align: right;
font-family: "arial", sans-serif;
font-size: 8pt;
}
.userpic img, .userpicfriends img, .defaultuserpic img{
background: #fff;
padding: 3px;
width: 100px;
height: 100px;
border: 1px solid #efefef;}
.userpic font {
color: #404040 !important;
text-transform: uppercase;
}
.userpicfriends font {
color: #404040 !important;
text-transform: uppercase;
}
.userpicfriends {font-size: 3; align: right;}
.userpicfriends a{ display: yes;}
.userpicfriends br {
display: block;
height: 0;
}
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font: normal 9px "Courier New", sans-serif;
color: #545454;
letter-spacing: 1px;
text-align: left;
padding: 3px;
}
.subject {
text-align: left;
text-transform: uppercase;
margin-top:-13px;
background-image:url("");
padding: 3px;
font: 25px "gabriola", sans-serif;
}
.subject a, .subject, subject a:link {
color: #F5A142;
}
.subject a:hover {
color: #F4AA5A;
}
.datesubject {
width: 100%;
background-image: url("");
margin: 0px 0px 0 0px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar {
font: normal 12px "Arial", sans-serif;
color: #404040; }
.sbarbody { }
.sbarbody2 {
position:fixed;
margin-right:-610px;
right:50%;
z-index: 13;
width: 150px;
background-color:#ffffff;
border:1px dotted #999999;
padding: 10px;
line-height: 1.5em;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color:#D0D893;
font: bold 12px "Century Gothic", sans-serif;
text-transform:uppercase;
}
div#sidebar a:hover {
color: #9FC6A1;
}
li.sbartitle, .defaultuserpic, table.calendar, .sbarcalendar, .sbarcalendarposts, #sidebar_summary li.sbaritem, #sidebar_summary, .sbarheader {
display:none;
}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding: 2px 2px 2px 2px;
list-style: none;
margin: 2px 0 2px 0;
background-color:#fcfcfc;
}
li.sbaritem a{}
li.sbaritem:hover {
font: bold 12px "Century Gothic", sans-serif;
line-height: 10px;
padding: 2px 2px 2px 2px; }
#sidebar_linklist {
text-align:left;position:fixed;
margin-right:-610px;
right:50%;
z-index: 13;
width: 150px;
margin-top:270px;
background-color:#ffffff;
border:1px dotted #999999;
padding: 10px; }
/* TAGS ------------------ */
.ljtags {
background: white;
margin-top: 15px;
padding:5px;
font: normal 9px "Verdana", sans-serif;
text-transform: lowercase; }
.ljtags a {
color: #C0C683;
}
.ljtags a:hover {
color: #9FC6A1; }
ul.ljtaglist {
width: 800px;
background-color:white;
border:1px dotted #999999;
padding: 5px;
padding-top:20px;
font-size:12px;
list-style:none;
margin:auto;}
/* CURRENTS INFO ---------------- */
.currents {padding:6px;background:white;margin-top:-20px;font: normal 9px "trebuchet ms", sans-serif;text-transform: uppercase; color: #606060;}.currentmood {background: url('http://img219.imageshack.us/img219/4487/044z.png') no-repeat left center; padding-left: 14px;}.currentmusic {background: url('http://img850.imageshack.us/img850/3669/060.png') no-repeat left center; padding-left: 14px;}.currentlocation {display:none;}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background-image:url("");
padding-right:6px;
text-align:right;
text-transform:uppercase;
}
div.comments a, div.comments a:link, div.comments a:visited {
text-align:center;
font: normal 11px "Courier New", sans-serif;
color: #404040;
padding-bottom:5px;
letter-spacing: 1px;
text-transform:uppercase;
padding:0;
}
div.comments a:hover {
color: #9FC6A1;
background-color: white;
text-decoration: none;
}
/* COMMENT-PAGE ---------------- */
.datesubjectcomment {
width:600px;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border: 1px solid #efefef;
padding: 5px;
width: 100px;
height: 100px;
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
clear: left;
width:800px;
margin:auto;
}
input, textarea {
background-color: #ffffff;
border: 1px solid #e3e3e3;
padding: 3px;
font-family: arial;
color: #b5b5b5;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 11px;
line-height: 125%;
color: #b5b5b5;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Arial", sans-serif;
color: #404040;
}
.commentbox {
background-color: #ffffff;
border:1px dotted #999999;
padding: 10px;
margin: 10px;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
border: 1px solid #e3e3e3;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
color: #ffffff;
text-align: left;
text-transform: uppercase;
padding-bottom: 20px;
}
.commentbox > div > div > a > img {width: 14px; height: 14px;}
/* ARCHIVE PAGE ---------------- */
ul.year {
text-align: center;
padding-bottom: 20px;
}
ul.year li {
display: inline;
}
table.yeartable {
width: 625px;
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
padding:10px;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* FOOTER ---------------- */
ul.navfooter{
padding: 5px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
height:0;
}
/* MISC, SPACE SEPARATOR ----------------*/
.clear {
height: 5px;
}
.skiplinks {
text-align: center;
text-transform:uppercase;
}
.separator{
height: 5px;
}
form#qrform table {
border-width: 0px !important;
}
/* LJ USER IMG ICONS ---------------- */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img
[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img
[src*="openid-profile.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url("http://img19.imageshack.us/img19/2576/160w.png") !important;
padding: 15px 11px 0 0 !important;
text-decoration: none !important;
}
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image:url("http://img807.imageshack.us/img807/3271/159j.png") !important;
padding: 15px 11px 0 0 !important;
width:0 !important;
height: 0 !important;
text-decoration: none !important;
}
img[src*="icon_protected.gif"] {
display:none;
}
img[src*="icon_private.gif"] {
display:none;
}
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif") !important;
background-repeat:no-repeat !important;
height:0 !important;
padding:18px 18px 0 0 !important;
width:0 !important;
}
img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg") !important;
background-repeat:no-repeat !important;
height:0 !important;
padding:18px 18px 0 0 !important;
width:0 !important;
}
SETUP DETAILS
Design: This layout features fixed elements on both the left and right hand side of the main blog. The color scheme is predominately orange and off-set with some blue greens. Feel free to change the colors if you feel inclined!
Active: Header links, Title, Blurb, Links list
Appearance: Since this layout has fixed elements the height of the side boxes matter. The default is set to appear about even on both sides provided the proper amount of text is in the blurb box. If you want to adjust the size and positioning of the side elements you will have to fiddle with the margin portion under #sidebar_linklist, .sbarbody2, .title and #header which are the enabled elements. Or you could always go for display:none; to get rid of something if you don't like the way it looks. This particular layout, in my humble opinion, would look good with some kind of header. The width of the blog is 800px, so something in that ballpark. Direct yourself towards this entry for some assistance of that nature. Enjoy!
It would be greatly appreciated if you credit fleeting_days, leave feedback in comments, and watch the community!