hello. welcome to invicted. ♥

(layout) ∞ capsized

2011-11-30T18:47:18Z

(name) capsized
(style) flexi squares

/* ----------------------------------------
   (name): capsized
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #f5f5f5;
background-image: url("http://i53.tinypic.com/149nlhy.png");
text-align: justify; 
color: #777; 
font-size: 8pt;
font-family: sans-serif;
line-height: 22px;
margin: 20px 0 0 0;} 
#maincontent {
text-align: left;
margin: auto 280px auto auto;} 
#content {
width: 64%;
background: #efefef;
margin: auto;}
#content_inner {
background: #fff;}
blockquote {
text-align: justify;
border: 5px solid #f9f9f9;
padding: 10px; 
margin: 20px;
font-size: 10px;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #555; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
background: #7EE3D3;
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
float: right !important;
width: 270px;
background: #efefef;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #555; 
font-size: 9pt;
text-decoration: none;}
#sidebar a:hover {
background: transparent;
color: #7EE3D3;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
display: none;
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarbody, .sbarbody2 {padding: 5px;}

.sbarbody, .sbarbody2 {
margin: 0;
background: transparent;}
            
table.calendar {
margin: auto;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
font: normal 8pt helvetica;
display: block;
background: #dfdfdf;
text-align: left;
float: left;
padding: 8px;
color: #333;
width: 92%;
margin: 3px;
list-style: none;}
li.sbaritem:hover {
background: #444;}
li.sbartitle {
display: none;
margin-left: -5px;
width: 100% !important;
text-transform: uppercase;
padding: 5px;
color: #555;
font: normal 8pt arial;}

/*------ HEADER & FOOTER ------*/

#header {
background: #666;
color: #ffffff;
margin: 0; 
text-align: left; 
font-size: 10pt;
text-transform: lowercase;  
padding: 0;}

#footer { 
padding: 15px 0px 15px 15px;
text-align: right; 
text-transform: lowercase; 
background: #666; 
font-size: 10pt;
color: #FFFFFF;
z-index: 100;}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ffffff;
background: #666;
padding: 14px; 
margin: 0;}

div#header a:hover {
color: #7EE3D3;
background: #404040;}

div#footer a:hover {
color: #7EE3D3;
background: #222;}

ul.navheader, ul.navfooter { 
padding: 14px 0; 
margin: 0px;}

ul.navheader li, ul.navfooter li {
display: inline;
margin: 0; 
list-style-type: none;}

li.viewing {
background: #222;
padding: 14px;
margin-left: 5px;}

div#header li.view {
padding: 14px; 
border-left: 0px solid #232323;
margin: 0 -3px 0 0px;
background: #404040}

.clearfoot {
display: none;
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 500px;}
.entry {
min-height: 80px;
padding: 10px;
color: #777;
background-color: #fff; 
text-align: justify;} 
.entry_text {
margin-bottom: 15px;
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.ljcut-link {
font-weight: lighter;}

.userpic, .userpicfriends {
width: 80px;
height: 80px; 
margin-left: -5px;
position: inline;
border: 10px solid #efefef;
float: left;
margin-bottom: 0px;
margin: 5px;}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;}

.date {
text-align: left; 
color: #ddd;
text-transform: uppercase;
font: normal 7pt arial;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: normal 18px sans-serif;
letter-spacing: -1px;
color: #7EE3D3;
font-weight: normal;
text-transform: lowercase;
text-align: left;}
.subject a:hover {
background: transparent;
color: #222;}
.datesubject {
height: auto;
background: #444;
padding: 10px;}

.ljtags {
margin-top: 30px;
margin-left: 20px;
font-family: helvetica;
font-size: 8pt;
padding-left: 12px;
min-height: 18px;
color: #333;
font-weight: normal;
text-transform: lowercase;
background: url('http://cloud-shade.org/photos/tag3.png') no-repeat center left;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/
.currents {
font-family: helvetica;
font-size: 8pt !important;
width: 96%; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 20px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/earth.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.gif") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: left;
padding: 5px;
color: transparent;
background-color: #dfdfdf;
width: 98%;
position: relative;}
div.comments a {
text-transform: lowercase;
font-size: 12px;
padding: 8px;
font-weight: normal;
text-decoration: none;
color: #555;}  
div.comments a:hover {
background: #444;
color: #7EE3D3;}
.userpiccomment {
position: relative;
background-color: #efefef !important;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 8px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
text-align: left;}
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
background: #444;
text-align: left; 
color: #fcfcfc; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #fcfcfc;}
input, textarea, select {
font: normal 7pt verdana;
background-color: #fff;
color: #777;
border: 1px solid #f8f8f8;
padding: 5px;} 
textarea.textbox  {
width: 500px !important; 
background: #fff !important;
padding: 5px;}

.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #555;}
.commentbox {
width: 560px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background: #fff;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #7EE3D3;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #555;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
color: #7EE3D3;}

/*------ TINY ICONS ------*/

img[src*="img/userinfo.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i51.tinypic.com/vo2a1e.png) no-repeat !important;
 padding: 13px 0 0 16px !important;}
img[src*="img/community.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i52.tinypic.com/157j30w.png) no-repeat !important; 
padding: 13px 0 0 18px !important;}
img[src*="img/icon_protected.gif"] {
width: 0 !important; 
height: 16px !important;
background: transparent url(http://i55.tinypic.com/2ufek9w.png) no-repeat !important; 
padding: 0px 0 0 16px !important;}
img[src*='/img/btn_del.gif']{
width: 0 !important; 
height: 0 !important; 
padding: 0 16px 16px 0; 
background: transparent url(http://i55.tinypic.com/o86qtg.png) no-repeat !important;}
img[src='http://l-stat.livejournal.com/img/btn_scr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i51.tinypic.com/n1frbc.png');}
img[src='http://l-stat.livejournal.com/img/btn_unscr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/snjhqe.png');}
img[src='http://l-stat.livejournal.com/img/btn_freeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i53.tinypic.com/200wev8.png');}
img[src='http://l-stat.livejournal.com/img/btn_unfreeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i56.tinypic.com/244tlyg.png');}
img[src='http://l-stat.livejournal.com/img/btn_edit.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i52.tinypic.com/2008zgk.png');}
img[src='http://l-stat.livejournal.com/img/btn_track.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/e0jwbm.png');}

/*------ MISC. ------*/

.subtitle, .title {display: none;}

#lj_controlstrip td {
color: #777; 
font: normal 8pt garamond;
background: #f0f0f0;
border: none;
padding: 5px;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt garamond; 
text-transform:lowercase; 
color: #777; 
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, span#lj_controlstrip_user a:hover, td#lj_controlstrip_search a:hover, #lj_controlstrip td a:hover {
color: #555; 
text-decoration: none;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #555;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#555!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ synthesis

2011-11-28T00:46:58Z

(name) synthesis
(style) flexi squares
live // image

/* ----------------------------------------
   (name): synthesis
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
cursor: default;
background-color: #fff;
text-align: justify; 
color: #aaa; 
font: normal 8pt helvetica; 
line-height: 14px;
margin: 20px 0 0 0;} 
#maincontent {
margin: auto 270px auto auto;} 
#content {
width: 60%;
margin: auto;}
blockquote {
background: #fcfcfc;
text-align: justify;
border: 1px solid #eee;
padding: 10px; 
margin: 20px;
font: normal 7pt garamond;
text-transform: uppercase;}
code, kbd, pre, tt {
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
cursor: default;
color: #888;
text-transform: lowercase;
text-decoration: none;} 
a:hover {
cursor: default !important;
color: #000;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
float: right;
height: 100%;
width: 250px;
font: normal 7pt garamond;
text-transform: uppercase;
padding: 10px;
border-left: 1px dotted #eee;
border-bottom: 1px dotted #eee;
border-right: 1px dotted #eee;
background: #fcfcfc;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #777; 
font: normal arial 8pt;
text-decoration: none;}
#sidebar a:hover {
color: #000;
text-decoration: none;
background-color: yellow;}

.defaultuserpic {
text-align: center;}

.defaultuserpic img {
width: 90px;
height: 90px;
-moz-border-radius: 50px;}

.sbarbody, .sbarbody2 {padding: 5px;}

.sbarbody, .sbarbody2 {
margin: 0;
background: transparent;}
            
table.calendar {
display: none;
margin: auto;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbartitle, table.calendar {
display: none;}

li.sbaritem {
font: normal 7pt garamond;
text-transform: uppercase;
color: #ccc;
display: block;
border-bottom: 1px solid #eee;
margin-right: 5px;
width: 100%;
margin: 2px;}
li.sbaritem:hover {
background: yellow;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
border: 1px dotted #eee;
margin: 0;
background: #fcfcfc;
padding-top: 20px;
padding-bottom: 20px;
text-transform: lowercase;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
float: left;
font: normal 11px helvetica;
margin-left: 5px;
text-transform: lowercase;
color: #888;}

#footer {
padding-top: 10px;}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-right: 5px; 
width: 90px;
font: normal 11px helvetica;
margin-left: 5px;
height: 100%;}
div#header a:hover, div#footer a:hover {
background-color: yellow;
color: #000;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: block;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 500px;}
.entry {
min-height: 80px;
padding: 10px;
color: #777;
background: #fff;
text-align: justify;} 
.entry_text {
margin-bottom: 15px;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
background: #fcfcfc;
color: #999 !important;}
.userpic {
margin: 5px;
float: left;}
.userpicfriends {
margin: 5px;
padding: 3px;
float: left;
border: 1px dotted #eee;
background: #fcfcfc!important;
width: 100px;}
.userpicfriends a font:hover {
background-color: yellow;
color: #000;}
.userpicfriends img {
display: none;}
.userpic img {
display: none;}

.date {
text-align: left; 
color: #aaa;
font: normal 8pt helvetica;
text-transform: lowercase;}
.subject, .subject a, .subject a:link, .subject a:visited {
color: #666;
font: normal 8pt garamond;
text-transform: uppercase;
text-align: left;}
.subject a:hover {
background-color: yellow;
color: #000;
font-style: none;}
.datesubject {
height: auto;
padding: 10px;
background: #fff;}

.ljtags {
margin-top: 30px;
min-height: 18px;
color: #888;
margin-left: 3px;
padding-left: 20px;
margin-bottom: -12px;
font-weight: none;
text-transform: lowercase;
background: url(http://cloud-shade.org/photos/tags-gray.gif) no-repeat left;}
.ljtags b, .ljtags strong {
display: none;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.ljtags a:hover {
background-color: yellow;
color: #000;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/

.currents b, .currents strong {
display: none;}
.currents { 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
background-color: yellow;
color: #000;
text-transform: lowercase;}

.currentlocation {
background: url(http://cloud-shade.org/photos/earth.png) no-repeat left;
padding-left: 20px;}
.currentmood {
background: url(http://cloud-shade.org/photos/heart.gif) no-repeat left;
padding-left: 20px;}
.currentmusic {
background: url(http://cloud-shade.org/photos/music3.png) no-repeat left;
padding-left: 20px;}

.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
padding: 10px;
border-top: 1px dotted #eee;
text-align: right !important;
color: transparent;
position: relative;}
div.comments a {
text-transform: uppercase;
font: normal 7pt garamond;
letter-spacing: 1px;
font-style: none;
font-weight: normal;
text-decoration: none;
color: #777;}  
div.comments a:hover {
background: yellow;}
.userpiccomment {
position: relative;
z-index: 15;
width: 80px;
height: 80px;
float: left;
margin-right: 5px;
-moz-border-radius: 50px;}
.userpiccomment img {
-moz-border-radius: 50px;}
.box {
padding: 5px;
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
text-transform: uppercase !important;
background: #fcfcfc;
border: 1px dotted #eee;
padding: 2px;
font: normal 7pt garamond;
color: #777; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea {
font: normal 10px helvetica;
background-color: #fcfcfc;
border: 1px dotted #eee;
padding: 5px;} 
select {
font: normal 7pt garamond;
text-transform: uppercase;}
textarea.textbox  {
width: 450px !important; 
background: #fff !important;
padding: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
width: 515px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #000;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
background-color: yellow;
color: #000;}

/*------ TINY ICONS ------*/

img[src*="img/userinfo.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i56.tinypic.com/aokuhx.png) no-repeat !important;
 padding: 16px 0 0 18px !important;}
img[src*="img/community.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i56.tinypic.com/2wnuvd0.png) no-repeat !important; 
padding: 16px 0 0 18px !important;}
img[src*="img/icon_protected.gif"] {
width: 0 !important; 
height: 8px !important;
background: transparent url(http://cloud-shade.org/photos/key.png) no-repeat !important; 
padding: 0px 0 0 16px !important;}
img[src*='/img/btn_del.gif']{
width: 0 !important; 
height: 0 !important; 
padding: 0 16px 16px 0; 
background: transparent url(http://i55.tinypic.com/o86qtg.png) no-repeat !important;}
img[src='http://l-stat.livejournal.com/img/btn_scr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i51.tinypic.com/n1frbc.png');}
img[src='http://l-stat.livejournal.com/img/btn_unscr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/snjhqe.png');}
img[src='http://l-stat.livejournal.com/img/btn_freeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i53.tinypic.com/200wev8.png');}
img[src='http://l-stat.livejournal.com/img/btn_unfreeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i56.tinypic.com/244tlyg.png');}
img[src='http://l-stat.livejournal.com/img/btn_edit.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i52.tinypic.com/2008zgk.png');}
img[src='http://l-stat.livejournal.com/img/btn_track.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/e0jwbm.png');}

/*------ MISC. ------*/

.subtitle {display: none;}
.title {
display: none;
font: bold 42pt arial;
color: #eee;
letter-spacing: -2px;
margin-left: 20px;
text-align: left;
margin-bottom: -20px;}

#lj_controlstrip td {
color: #777; 
font: normal 8pt lucida sans unicode;
background: #f0f0f0;
border: none;
padding: 5px;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt lucida sans unicode; 
text-transform:lowercase; 
color: #777; 
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, span#lj_controlstrip_user a:hover, td#lj_controlstrip_search a:hover, #lj_controlstrip td a:hover {
color: #000; 
background-color: yellow;
text-decoration: none;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #98D1CD;}

.ljuser a:hover, .ljuser b:hover {
color: #000;
background-color: yellow;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#000!important;
background-color: yellow;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

suggestion free-for-all!

2011-07-18T02:24:10Z

As some of you may have noticed, the community's been a little quiet. I've been busy, yes, but I've also lacked inspiration. This post will be the designated spot for suggestions. I'm open to anything, so don't be shy. And keep in mind that you don't have to suggest ideas solely related to layouts. Think I should change the main layout? Think I should have more information posts? Tutorials? Let me know! Thanks guys!

(layout) ∞ utopia

2011-07-15T18:27:35Z

(name) utopia
(style) flexi squares
live // image

/* ----------------------------------------
   (name): utopia
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #fff;
text-align: justify; 
color: #777; 
font-size: 9pt;
font-family: serif;
line-height: 22px;
margin: 20px 0 0 0;} 
#maincontent {
text-align: left;
margin: auto 290px auto auto;} 
#content {
width: 68%;
margin: auto;}
blockquote {
text-align: justify;
border: 5px solid #f9f9f9;
padding: 10px; 
margin: 20px;
font-size: 10px;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #555; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
text-decoration: underline; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
float: right;
width: 270px;
background: transparent;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #555; 
font-size: 9pt;
text-decoration: none;}
#sidebar a:hover {
color: #555;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
display: none;
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarbody, .sbarbody2 {padding: 5px;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
font: normal 8pt helvetica;
display: block;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
background: #fafafa;
text-align: left;
float: left;
padding: 3px;
color: #333;
width: 95%;
margin: 3px;
list-style: none;}
li.sbartitle {
display: none;
margin-left: -5px;
width: 100% !important;
text-transform: uppercase;
padding: 5px;
color: #555;
font: normal 8pt arial;}

/*------ HEADER & FOOTER ------*/

div#footer li.view {
margin-right: 5px; 
margin-left: 15px;
text-transform: uppercase;
font: normal 8pt arial;
color: #eee;  
padding: 5px;}

div#header li.view {
display: none;}

#header, #footer {
text-align: left;
text-transform: lowercase;
border-bottom: 1px solid #eee;}

div#header a, div#header a:link, div#header a:visited {display: none;} div#footer a, div#footer a:link, div#footer a:visited {
text-transform: uppercase;
font: normal 8pt arial;
margin-left: 5px;
line-height: 10px;
margin-right: 5px;  
padding: 5px;} 
div#header a:hover, div#footer a:hover {
text-decoration: underline;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
text-decoration: underline; }
.userpic, .userpicfriends {
display: none;
width: 78px;
height: 78px;
text-align: center; 
position: relative;
border: 1px solid #f7f7f7;
float: left;
margin-left: -100px;
background-color: #fcfcfc !important;
padding: 10px;}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;}

.date {
text-align: left; 
color: #ddd;
text-transform: uppercase;
font: normal 7pt arial;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: normal 18px arial;
color: #ccc;
font-weight: normal;
text-transform: lowercase;
text-align: left;}
.datesubject {
height: auto;
border-left: 20px solid #fafafa;
background: #fff;
padding: 10px;}

/*------ CURRENTS ------*/
.currents {
font-family: helvetica;
font-size: 8pt !important;
width: 96%; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 20px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
text-decoration: underline; 
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/earth.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.gif") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: center;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
padding: 5px;
color: transparent;
background-color: transparent;
width: 98%;
position: relative;}
div.comments a {
text-transform: uppercase;
font-size: 12px;
font-family: serif;
font-weight: normal;
text-decoration: none;
color: #555;}  
div.comments a:hover {
text-decoration: underline; 
color: #555;}
.userpiccomment {
display: none;
position: relative;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
padding: 5px;
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
background: #fafafa;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
text-align: left; 
color: #888; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 7pt verdana;
background-color: #fff;
color: #777;
border: 1px solid #f8f8f8;
padding: 5px;} 
textarea.textbox  {
width: 400px !important; 
background: #fff !important;
padding: 5px;}

.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #555;}
.commentbox {
width: 515px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background: #fff;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #555;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
text-decoration: underline;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {
font: normal 22pt palatino linotype;
color: #eee;
letter-spacing: -2px;
text-transform: uppercase;
text-align: left;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #555;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ i carry your heart

2011-05-15T18:30:31Z

(name) i carry your heart
(style) flexi squares
live // image

/* ----------------------------------------
   (name): i carry your heart
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #fafafa;
text-align: justify; 
color: #aaa; 
font: normal 8pt helvetica; 
line-height: 14px;
margin: 20px 0 0 0;} 
#maincontent {
margin: auto;} 
#content {
width: 40%;
margin: auto;}
blockquote {
background: #fcfcfc;
text-align: justify;
border: 1px solid #eee;
padding: 10px; 
margin: 20px;
font: normal 11px courier new;}
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #9FC2D6; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
color: #9FC2D6;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
float: top;
font: normal 9pt arial;
padding: 10px;
margin-bottom: 20px;
background: #fff;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #777; 
font: normal arial 9pt;
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #9FC2D6;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
display: none;
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarbody, .sbarbody2 {
margin: 0;}
            
table.calendar {
display: none;
margin: auto;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbartitle, .defaultuserpic, table.calendar {
display: none;}

li.sbaritem {
font: normal 11px courier new;
color: #ccc;
margin-right: 5px;
display: inline;}
li.sbaritem:hover {
border-bottom: 1px solid #eee;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
text-transform: lowercase;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
font: normal 12px helvetica;
margin-left: 15px;
text-transform: lowercase;
color: #eee;  
padding: 5px;}
#footer {
border-bottom: none !important;
border-top: 1px solid #f0f0f0;}

#footer {
padding-top: 10px;}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-left: 5px;
margin-right: 5px;  
font: normal 12px arial;
padding: 5px;} 
div#header a:hover, div#footer a:hover {
color: #eee;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
color: #9FC2D6;}
.userpic, .userpicfriends {
width: 70px;
height: 70px;
text-align: center; 
position: relative;
margin: 60px 0px 0px -145px;
float: left;
border: 12px solid #eee;}
.userpic img, .userpicfriends img {
width: 70px;
height: 70px;}

.date {
text-align: left; 
color: #aaa;
font: normal 8pt helvetica;
text-transform: lowercase;}
.subject, .subject a, .subject a:link, .subject a:visited {
color: #9FC2D6;
font: normal 10px helvetica;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;}
.subject a:hover {
color: #ccc;
font-style: none;}
.datesubject {
height: auto;
padding: 10px;
background: #fff;
border-bottom: 1px solid #eee;}

.ljtags {
margin-top: 30px;
min-height: 18px;
color: #999;
margin-left: 3px;
padding-left: 20px;
margin-bottom: -12px;
font-weight: none;
text-transform: lowercase;
background: url(http://cloud-shade.org/photos/tags-gray.gif) no-repeat left;}
.ljtags b, .ljtags strong {
display: none;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.ljtags a:hover {
border-bottom: 1px solid #eee;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/

.currents b, .currents strong {
display: none;}
.currents { 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #9FC2D6;
border-bottom: 1px solid #eee;
text-transform: lowercase;}

.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
padding: 10px;
border-top: 1px solid #eee;
text-align: center !important;
color: transparent;
position: relative;}
div.comments a {
padding: 6px;
text-transform: uppercase;
font: normal 10px helvetica;
letter-spacing: 1px;
font-style: none;
font-weight: normal;
text-decoration: none;
color: #777;}  
div.comments a:hover {
color: #555;
border-bottom: 1px solid #eee;}
.userpiccomment {
position: relative;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
padding: 5px;
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
text-transform: uppercase !important;
background: #fff;
border: 1px solid #eee;
padding: 3px;
font: normal 10px helvetica;
letter-spacing: 1px;
color: #777; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea {
font: normal 10px helvetica;
letter-spacing: 1px;
background-color: #fff;
border: 1px solid #f8f8f8;
padding: 5px;} 
select {
font: normal 10px helvetica;
letter-spacing: 1px;
text-transform: uppercase;}
textarea.textbox  {
width: 400px !important; 
background: #fff !important;
padding: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
width: 515px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #98D1CD;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
color: #9FC2D6;}

/*------ TINY ICONS ------*/

img[src*="img/userinfo.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i51.tinypic.com/vo2a1e.png) no-repeat !important;
 padding: 13px 0 0 16px !important;}
img[src*="img/community.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i52.tinypic.com/157j30w.png) no-repeat !important; 
padding: 13px 0 0 18px !important;}
img[src*="img/icon_protected.gif"] {
width: 0 !important; 
height: 8px !important;
background: transparent url(http://cloud-shade.org/photos/key.png) no-repeat !important; 
padding: 0px 0 0 16px !important;}
img[src*='/img/btn_del.gif']{
width: 0 !important; 
height: 0 !important; 
padding: 0 16px 16px 0; 
background: transparent url(http://i55.tinypic.com/o86qtg.png) no-repeat !important;}
img[src='http://l-stat.livejournal.com/img/btn_scr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i51.tinypic.com/n1frbc.png');}
img[src='http://l-stat.livejournal.com/img/btn_unscr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/snjhqe.png');}
img[src='http://l-stat.livejournal.com/img/btn_freeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i53.tinypic.com/200wev8.png');}
img[src='http://l-stat.livejournal.com/img/btn_unfreeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i56.tinypic.com/244tlyg.png');}
img[src='http://l-stat.livejournal.com/img/btn_edit.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i52.tinypic.com/2008zgk.png');}
img[src='http://l-stat.livejournal.com/img/btn_track.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/e0jwbm.png');}

/*------ MISC. ------*/

.subtitle {display: none;}
.title {
display: none;
font: bold 42pt arial;
color: #eee;
letter-spacing: -2px;
margin-left: 20px;
text-align: left;
margin-bottom: -20px;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #98D1CD;}

.ljuser a:hover, .ljuser b:hover {
color: #9FC2D6;
border-bottom: 1px solid #eee;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#9FC2D6!important;
border-bottom: 1px solid #eee;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ charlotte

2011-05-14T02:07:19Z

(name) charlotte
(style) flexi squares
live // image

/* ----------------------------------------
   (name): charlotte
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #f7f7f7;
text-align: justify; 
color: #777; 
font: normal 8pt arial; 
line-height: 14px;
margin: 20px 0 0 0;} 
#maincontent {
margin: auto 270px auto auto; } 
#content {
width: 60%;
margin: auto;}
blockquote {
background: #fafafa;
text-align: justify;
border: 1px solid #f0f0f0;
padding: 10px; 
margin: 20px;
font-size: 10px;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #555; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
text-decoration: underline; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
float: right;
width: 250px;
background: transparent;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #555; 
font-size: 9pt;
text-decoration: none;}
#sidebar a:hover {
color: #555;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
display: none;
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarbody, .sbarbody2 {padding: 5px;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
font: italic 8pt garamond;
display: block;
height: 10px;
border-bottom: 1px solid #eee;
text-align: left;
float: left;
padding: 3px;
color: #333;
width: 95%;
margin: 3px;
list-style: none;}
li.sbaritem:hover {
border-bottom: 1px solid #ddd;}
li.sbartitle {
margin-left: -5px;
width: 100% !important;
text-transform: uppercase;
padding: 5px;
color: #555;
font: normal 8pt arial;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
margin-bottom: 20px;
padding-top: 20px;
text-transform: uppercase;
background: transparent;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
margin-left: 15px;
text-transform: uppercase;
font: normal 8pt arial;
color: #eee;  
padding: 5px;}
#footer {
border-bottom: none !important;}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
text-transform: uppercase;
font: normal 8pt arial;
margin-left: 5px;
line-height: 10px;
margin-right: 5px;  
padding: 5px;} 
div#header a:hover, div#footer a:hover {
text-decoration: underline;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 500px;}
.entry {
font: normal 7pt verdana;
min-height: 80px;
padding: 10px;
color: #777;
background-color: #fff; 
text-align: justify;} 
.entry_text {
margin-bottom: 15px;
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {padding-left: 100px; background-image: url(http://i55.tinypic.com/11u85r4.png);}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
text-decoration: underline; }
.userpic, .userpicfriends {
width: 78px;
height: 78px;
text-align: center; 
position: relative;
border: 1px solid #f7f7f7;
float: left;
margin-left: -100px;
background-color: #fcfcfc !important;
padding: 10px;}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;}

.date {
margin-left: 5px;
text-align: center; 
color: #ddd;
text-transform: uppercase;
font: normal 7pt arial;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: italic 16px garamond;
text-transform: lowercase;
text-align: center;}
.subject a:hover {
text-decoration: underline; }
.datesubject {
height: auto;
background: #fff;
padding: 10px;}

.ljtags {
margin-top: 30px;
margin-left: 25px;
padding-left: 12px;
min-height: 18px;
color: #999;
font-weight: none;
text-transform: lowercase;
background: url('http://cloud-shade.org/photos/tag3.png') no-repeat center left;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/
.currents {
margin: 3px;
width: 96%; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 20px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
text-decoration: underline; 
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/earth.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.gif") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: center;
border-top: 1px solid #f0f0f0;
padding: 5px;
color: transparent;
background-color: transparent;
width: 98%;
position: relative;}
div.comments a {
text-transform: uppercase;
font-weight: normal;
text-decoration: none;
color: #555;}  
div.comments a:hover {
text-decoration: underline; 
color: #555;}
.userpiccomment {
position: relative;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
padding: 5px;
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #555; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 7pt verdana;
background-color: #fff;
color: #777;
border: 1px solid #f8f8f8;
padding: 5px;} 
textarea.textbox  {
width: 400px !important; 
background: #fff !important;
padding: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #555;}
.commentbox {
width: 515px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background: #fff;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #555;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
text-decoration: underline;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {
display: none;
font: bold 42pt arial;
color: #eee;
letter-spacing: -2px;
margin-left: 20px;
text-align: left;
margin-bottom: -20px;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #555;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

thank you!

2011-05-01T04:18:12Z

I just wanted to thank all of you for being such wonderful, lovely followers of my layouts. While in the process of revamping this community, I saw that invicted has over one thousand watchers. I started this up as a hobby, but you all have made me love it even more.

Thank you thank you thank you.

(layout) ∞ bone marrow

2011-04-27T19:30:22Z

(name) bone marrow
(style) flexi squares
live // image

/* ----------------------------------------
   (name): bone marrow
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #fafafa;
background-image: url(http://i52.tinypic.com/iw4093.png);
background-attachment: fixed;
text-align: justify; 
color: #999; 
font: normal 8pt franklin gothic medium; 
line-height: 14px;
margin: 20px 0 0 0;} 
#maincontent {
margin: auto; } 
#content {
width: 45%;
margin: auto;}
blockquote {
background-color: #fafafa;
background-image: url(http://i52.tinypic.com/iw4093.png);
text-align: justify;
border: 1px solid #f0f0f0;
padding: 10px; 
margin: 20px;
font-size: 8pt;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
font: bold 8pt arial;
color: #8C656E;}
em {
color: #8C656E;
font-family: georgia;}

a, a:link, a:visited {
color: #8C656E; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
color: #8C656E;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
background-color: #fff;
padding: 10px;
height: 100px;
float: top;
margin-bottom: 10px;}

#sidebar_tags {
display: none;}

.sbarbody2 {
padding: 10px;
display: block;
width: 260px;
float: left;}

#sidebar_linklist {
width: 160px; 
padding: 10px;
float: left; 
display: block; 
margin-top: -23px;
margin-left: 10px;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #777; 
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #8C656E;}

.sbarbody {
width: 210px;
padding: 10px;}

table.calendar {
display: none;
margin: auto;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

.defaultuserpic {
display: block;
width: 100px;
float: left;}

.defaultuserpic img {
width: 70px;
height: 70px;
margin: 5px;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
padding: 10px;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
display: block;
width: 120px;
height: 10px;
text-align: right;
float: right;
font-weight: bold;
padding: 5px;
margin: 3px !important;
list-style: none;}
li.sbaritem:hover {
background-color: #fafafa;}

li.sbartitle, #sidebar_summary, #sidebar_calendar
{display:none;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
margin: 0;
padding-top: 20px;
text-transform: lowercase;
background: #fff;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
font: italic 10pt georgia;
margin-left: 15px;
letter-spacing: -1px;
text-transform: lowercase;
color: #8C656E;  
padding: 5px;}
#footer {
border-bottom: none !important;}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-left: 5px;
margin-right: 5px;  
font: italic 10pt georgia;
letter-spacing: -1px;
padding: 5px;} 
div#header a:hover, div#footer a:hover {
color: #ddd;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 470px;}
.entry {
min-height: 80px;
padding: 10px;
color: #777;
background-color: #fff; 
text-align: justify;} 
.entry_text {
margin-bottom: 15px;
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
color: #8C656E;}
.userpic, .userpicfriends {
width: 85px;
height: 85px;
position: relative;
text-align: center; 
margin: 10px;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
padding: 10px;}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;}
.userpic, .userpicfriends {
float: right;}

.date {
margin-left: 5px;
text-align: left; 
color: #ddd;
text-transform: lowercase;}
.subject, .subject a, .subject a:link, .subject a:visited {
background: transparent;
font: italic 12pt georgia;
letter-spacing: -1px;
text-align: left;}
.subject a:hover {
color: #aaa;
font-style: none;}
.datesubject {
height: auto;
padding: 10px;
background: #f7f7f7;}

.ljtags {
margin-top: 30px;
margin-left: 25px;
padding-left: 22px;
min-height: 18px;
color: #999;
font-weight: none;
text-transform: lowercase;
background: url('http://i52.tinypic.com/okamgg.png') no-repeat center left;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.ljtags a:hover {
background: #f7f7f7;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/
.currents {
margin: 3px;
min-height: 40px;
background: #fafafa;
padding: 10px;
border-left: 10px solid #f0f0f0;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 22px;
height: 18px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #8C656E;
text-transform: lowercase;}
.currentmusic {
background: url(http://i51.tinypic.com/255otwn.png) no-repeat left; 
padding-left: 22px;}
.currentlocation {
background: url('http://i55.tinypic.com/jsy1vm.png') no-repeat left; 
padding-left: 22px;}
.currentmood {
background: url(http://i54.tinypic.com/wj7wyf.png) no-repeat left; 
padding-left: 22px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 20px;
text-align: center;
padding: 5px;
color: transparent;
background-color: #f7f7f7;
width: 98%;
position: relative;}
.comments:hover {
background-color: #fafafa;}
div.comments a {
text-transform: lowercase;
font-style: none;
font-weight: normal;
text-decoration: none;
color: #777;}  
div.comments a:hover {
color: #8C656E;}
.userpiccomment {
position: relative;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
padding: 5px;
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
background: #f7f7f7;
text-align: left; 
padding: 5px;
color: #777; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
color: #999;
font: normal 8pt georgia;
background-color: #fafafa;
border: 1px solid #f8f8f8;
padding: 5px;} 
textarea.textbox  {
width: 480px !important; 
background: #fafafa !important;
padding: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8 !important;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
width: 550px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background: #fff;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #8C656E;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
color: #8C656E;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {
display: none;
font: bold 42pt arial;
color: #eee;
letter-spacing: -2px;
margin-left: 20px;
text-align: left;
margin-bottom: -20px;}

#lj_controlstrip td {
color: #999; 
font: normal 8pt franklin gothic medium;
background: #f0f0f0;
border: none;
padding: 5px;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt franklin gothic medium; 
text-transform:lowercase; 
color: #777; 
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, span#lj_controlstrip_user a:hover, td#lj_controlstrip_search a:hover, #lj_controlstrip td a:hover {
color: #8C656E; 
text-decoration: none;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #8C656E;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: bold 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#8C656E!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ so we could dance

2011-04-06T02:21:04Z

(name) so we could dance
(style) flexi squares
live // image

this layout is a spin-off of this lovely one by

/* ----------------------------------------
   (name): so we could dance
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #fff;
text-align: justify; 
color: #777; 
font: normal 8pt lucida sans unicode; 
line-height: 14px;
margin: 20px 0 0 0;} 
#maincontent {
border-right: 1px solid #f0f0f0;
margin: auto 250px auto auto; } 
#content {
width: 70%;
border: 50px solid #fafafa;
margin: auto;}
blockquote {
background: #fafafa;
text-align: justify;
border: 1px solid #f0f0f0;
padding: 10px; 
margin: 20px;
font-size: 10px;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #98D1CD; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
cursor: default;
color: #CFF0E9;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
float: right;
width: 250px;
border-top: 1px solid #f0f0f0;
background: #fff;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #777; 
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #98D1CD;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
display: none;
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarbody, .sbarbody2 {padding: 5px;}

.sbarbody, .sbarbody2 {
margin: 0;
background: #fff;}
            
table.calendar {
display: none;
margin: auto;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
display: block;
height: 10px;
text-align: left;
float: left;
padding: 3px;
color: #333;
width: 95%;
margin: 3px;
list-style: none;}
li.sbartitle {
margin-left: -5px;
width: 100% !important;
text-transform: lowercase;
padding: 5px;
color: #98D1CD;
font: bold 16px arial;
letter-spacing: -1px;
background: #f7f7f7;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
text-transform: lowercase;
background: #fff;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
font: bold 14px arial;
margin-left: 15px;
letter-spacing: -1px;
text-transform: lowercase;
color: #eee;  
padding: 5px;}
#footer {
border-bottom: none !important;
border-top: 1px solid #f0f0f0;}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-left: 5px;
margin-right: 5px;  
font: bold 14px arial;
letter-spacing: -1px;
padding: 5px;} 
div#header a:hover, div#footer a:hover {
color: #ddd;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
color: #CFF0E9;}
.userpic, .userpicfriends {
width: 85px;
height: 85px;
text-align: center; 
position: relative;
margin: 10px;
float: left;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
padding: 10px;}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;}

.date {
margin-left: 5px;
text-align: left; 
color: #ddd;
text-transform: lowercase;}
.subject, .subject a, .subject a:link, .subject a:visited {
background: transparent;
font: bold 18px arial;
letter-spacing: -1px;
text-align: left;}
.subject a:hover {
color: #CFF0E9;
font-style: none;}
.datesubject {
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
height: auto;
padding: 10px;
background: #f7f7f7;}

/*------ CURRENTS ------*/
.currents {
margin: 3px;
width: 96%; 
border-top: 1px solid #f0f0f0; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 20px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #CFF0E9;
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/earth.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.gif") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: center;
border-top: 1px solid #f0f0f0;
padding: 5px;
color: transparent;
background-color: transparent;
width: 98%;
position: relative;}
div.comments a {
text-transform: uppercase;
font-style: none;
font-weight: normal;
text-decoration: none;
color: #777;}  
div.comments a:hover {
color: #98D1CD;}
.userpiccomment {
position: relative;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
padding: 5px;
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #777; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 8pt lucida sans unicode;
background-color: #fff;
border: 1px solid #f8f8f8;
padding: 5px;} 
textarea.textbox  {
width: 400px !important; 
background: #fff !important;
padding: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
width: 550px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
border: 1px solid #f0f0f0;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #98D1CD;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 15px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #555;}
.skiplinks a:hover {
color: #CFF0E9;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {
display: none;
font: bold 42pt arial;
color: #eee;
letter-spacing: -2px;
margin-left: 20px;
text-align: left;
margin-bottom: -20px;}

td#lj_controlstrip .ljuser a, td#lj_controlstrip a:active, td#lj_controlstrip a:visited {
color: #98D1CD;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#98D1CD!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

affiliates

2011-03-31T19:47:22Z

if you would like to affiliate with this community, please comment on this entry.
thank you!

|| product ▲ view
( maintained by fran )
watch product

☆ comments:
i love the font choices!

|| fleeting_days ▲ view
( maintained by silentevocation )
watch fleeting_days

☆ comments:
tons of different styles!

|| fluos ▲ view
( maintained by fois, hellas, and howlite )
watch fluos

☆ comments:
out of the box designs!

|| layering ▲ view
( maintained by prix, marrow, and ephemery )
watch layering

☆ comments:
minimalistic and cute!

|| jealouss ▲ view
( maintained by apologize and customcontent )
watch jealouss

☆ comments:
cute and unique!

|| 1670 ▲ view
( maintained by lacier )
watch 1670

☆ comments:
new & tons of potential!

|| kill_brainz ▲ view
( maintained by kill_zombie )
watch kill_brainz

☆ comments:
a lot of super cute variety!

(layout) ∞ etiquette

2011-03-30T01:44:52Z

(name) etiquette
(style) flexi squares
live // image

/* ----------------------------------------
   (name): etiquette
   (maker): traincar @ invicted
   (icons): pinvoke
---------------------------------------- */

body {
background-color: #f7f7f7;
text-align: justify; 
color: #777; 
font: normal 11px lucida sans unicode; 
line-height: 14px;
margin: 20px 0 20px 0;} 
#maincontent {
margin-top: 15px; 
background-color: fff; 
width: 100%; } 
#content {
width: 800px;
margin-left: auto; 
margin-right: auto;
padding: 15px;} 
blockquote {
background: #fafafa;
text-align: justify;
border: 1px solid #f0f0f0;
padding: 5px; 
margin: 10px;
font-size: 10px;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #B5BD2C; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
cursor: default;
color: #CAD066;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
margin-top: 14px;
float: right;
width: 190px;
padding: 8px;
background: #fff;
line-height: 10pt;
text-align: justify;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #333; 
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #B5BD2C;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
display: none;#
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarheader, .sbarbody, .sbarbody2 {}

/*------ HEADER & FOOTER ------*/

#header, #footer {
background-color: #222 !important; 
margin: 0;
padding: 40px 10px 40px 10px;
text-transform: lowercase;
width: 98% !important;
text-align: center;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
text-transform: lowercase;
color: #aaa;  
padding: 5px;}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-right: 5px;  
padding: 5px;} 
div#header a:hover, div#footer a:hover {
color: #aaa;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 530px;}
.entry {
width: 550px;
min-height: 80px;
padding: 10px;
color: #777;
background-color: #fff; 
text-align: justify;} 
.entry_text {
margin-bottom: 15px;
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
color: #63CBF7;}
.userpic, .userpicfriends {
width: 85px;
height: 85px;
text-align: center; 
position: relative;
margin: 10px;
float: left;
background-color: #fcfcfc !important;
border: 1px solid #f7f7f7;
padding: 10px;}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;}

.date {
margin-left: 5px;
text-align: left; 
color: #ddd;
margin-bottom: -6px;
width: 100%;}
.subject, .subject a, .subject a:link, .subject a:visited {
background: transparent;
padding: 5px;
font-size: 10pt;
text-align: left;}
.subject a:hover {
color: #CAD066;
font-style: none; 
font-weight: normal;}
.datesubject {
width: 560px;
height: auto;
padding: 5px;
background: #fff;}

.ljtags {
margin-top: 30px;
margin-left: 25px;
padding-left: 20px;
min-height: 18px;
color: #999;
font-weight: none;
text-transform: lowercase;
background: url('http://i52.tinypic.com/3zrki.png') no-repeat center left;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/
.currents {
margin: 3px;
width: 96%; 
border-top: 1px solid #f0f0f0; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
height: 20px;
padding-left: 20px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #333;
text-transform: lowercase;}
.currentmusic {
background: url("http://i55.tinypic.com/2uoqwcy.png") no-repeat left; 
padding-left: 20px;}
.currentlocation {
background: url("http://i51.tinypic.com/24myil2.png") no-repeat left; 
padding-left: 20px;}
.currentmood {
background: url("http://i53.tinypic.com/6ztwm1.png") no-repeat left; 
padding-left: 20px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 20px;
text-align: center;
border-top: 1px solid #f0f0f0;
padding: 5px;
color: transparent;
background-color: transparent;
width: 98%;
position: relative;}
div.comments a {
text-transform: uppercase;
font-style: none;
font-weight: normal;
text-decoration: none;
color: #444;}  
div.comments a:hover {
color: #CAD066;}
.userpiccomment {
position: relative;
background-color: #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #111; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 8pt arial;
background-color: #fff;
border: 1px solid #f8f8f8;
padding: 5px;} 
textarea.textbox  {
width: 500px !important; 
background: #fff !important;
padding: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
width: 550px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #fcfcfc;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #f8f8f8;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #CAD066;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 10px; 
margin-bottom: 5px;
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #333;}
.skiplinks a:hover {
color: #222;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {display: none;}

#lj_controlstrip td {
color: #777; 
font: normal 8pt arial;
background: #222;
border: none;
padding: 5px;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt arial; 
text-transform:lowercase; 
color: #777; 
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, span#lj_controlstrip_user a:hover, td#lj_controlstrip_search a:hover, #lj_controlstrip td a:hover {
color: #B5BD2C; 
text-decoration: none;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
 text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#B5BD2C!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ petit

2011-03-20T17:49:37Z

(name) petit
(style) flexi squares
live // image

/* ----------------------------------------
   (name): petit
   (maker): traincar @ invicted
   (icons): pinvoke & damnicons
---------------------------------------- */

body {
background: #f7f7f7;
text-align: justify; 
color: #777; 
font: normal 8pt arial; 
line-height: 14px;
margin: 20px 0 20px 0;} 
#maincontent {
margin-top: 15px; 
background-color: fff; 
color: #000000; 
width: 100%; 
text-align: left;} 
#content {
width: 60%;
margin-left: auto; 
margin-right: auto;
padding: 15px;} 
blockquote {
background: #f9f9f9;
text-align: justify;
border: 1px solid #f5f5f5;
padding: 5px; 
margin: 10px;
font-size: 7pt;
font-family: georgia !important;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #333; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
cursor: default;
color: #63CBF7;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
margin-top: 14px;
float: left;
position: fixed;
left: 0px;
top: 60px;
height: 150%;
width: 200px;
padding: 5px;
background: transparent;
line-height: 10pt;
text-align: justify;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #333; 
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #63CBF7;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarheader, .sbarbody, .sbarbody2 {
padding: 10px;}

.sbarbody, .sbarbody2 {
background: transparent; 
margin-bottom: 10px;}
            
table.calendar {
display: none;
margin: auto;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
display: block;
background: #f0f0f0;
font: normal 8pt arial;
height: 20px;
text-align: center;
float: left;
padding: 3px;
color: #333;
width: 95%;
margin: 3px;
list-style: none;}
li.sbartitle {display: none;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
font: normal 8pt arial;
background: transparent; 
padding-bottom: 5px;
height: 30px;
padding: 5px;
text-transform: lowercase;
width: 770px !important;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
text-transform: lowercase;
color: #aaa;  
padding: 5px;}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-right: 5px; 
color: #333;  
padding: 5px;} 
div#header a:hover, div#footer a:hover {
color: #aaa;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 380px;}
.entry {
-moz-border-radius: 0 0 10px 0;
width: 380px;
padding: 10px;
color: #777;
border-left: 10px solid #f3f3f3;
border-right: 10px solid #f3f3f3;
border-bottom: 10px solid #f3f3f3;
font-face: times;
background-color: #fefefe; 
text-align: justify;} 
.entry_text {
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {background: #111; padding-left: 100px; width: 350px; -moz-border-radius: 10px;}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
margin-left: -5px;
font-face: small fonts;
font-size: 8px;
text-transform: uppercase;
color: #999 !important;}
.userpic {
color: #ccc;}
.userpicfriends {
color: transparent !important;}
.userpicfriends a font:hover {
color: #63CBF7;}
.userpic, .userpicfriends {
text-align: center; 
width: 60px;
height: 60px;
position: relative;
margin-left: -90px;
-moz-border-radius: 7px;
margin-top: 10px;
float: left;
background-color: #fcfcfc !important;
border: 5px solid #f7f7f7;
padding: 5px;}
.userpic img, .userpicfriends img {
width: 55px;
height: 55px;} 
.date {
text-align: left;
text-transform: uppercase; 
color: #fefefe;
font: normal 8pt georgia;
margin-bottom: -6px;
letter-spacing: -1px;
padding-left: 10px;
width: 100%;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: normal 10pt georgia;
letter-spacing: -1px;
background: transparent;
padding: 5px;
color: #63CBF7;
text-align: left;}
.subject a:hover {
color: #aaa;
font-style: none; 
font-weight: normal;}
.datesubject {
width: 410px;
height: auto;
padding: 5px;
-moz-border-radius: 0 10px 0 0;
background: #f3f3f3;}

.ljtags {
display: none;
margin-top: 30px;
margin-left: 12px;
padding-left: 12px;
color: #999;
font-weight: none;
text-transform: lowercase;
background: url('http://cloud-shade.org/photos/tag3.png') no-repeat center left;}
.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited {
text-transform: lowercase;}
.separator {
height: 25px;}

/*------ CURRENTS ------*/
.currents {
margin-top: 5px;
width: 96%; 
background: #f8f8f8; 
border-top: 5px solid #f3f3f3; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 10px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #333;
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #333;
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/home3.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.png") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: left;
font-size: 12pt;
font-weight: bold;
padding: 5px;
color: transparent;
background-color: transparent;
width: 98%;
position: relative;}
div.comments a {
font-style: none;
font-weight: normal;
text-decoration: none;
color: #222;}  
div.comments a:hover {
color: #63CBF7;}
.userpiccomment {
position: relative;
background-color: #f7f7f7;
z-index: 15;
width: 70px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;
-moz-border-radius: 5px;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
text-align: left; 
clear: left; }
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #111; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 8pt arial;
background-color: #fff;
border: 1px solid #f8f8f8;
padding: 5px;
-moz-border-radius: 5px;} 
textarea.textbox  {
width: 400px !important; 
background: #fff !important;
padding: 5px;
-moz-border-radius: 5px;} 
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
-moz-border-radius: 5px;

width: 500px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #fcfcfc;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #f8f8f8;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #63CBF7;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 10px; 
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #333;}
.skiplinks a:hover {
color: #222;}

/*------ TINY ICONS ------*/

img[src*="img/userinfo.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://cloud-shade.org/photos/user-icon-grey.gif) no-repeat !important;
 padding: 13px 0 0 10px !important;}
img[src*="img/community.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://cloud-shade.org/photos/com_icon_grey.gif) no-repeat !important; 
padding: 13px 0 0 10px !important;}
img[src*="img/icon_protected.gif"] {
width: 0 !important; 
height: 0 !important;
background: transparent url(http://i54.tinypic.com/16ll1le.png) no-repeat !important; 
padding: 13px 0 0 16px !important;}
img[src*='/img/btn_del.gif']{
width: 0 !important; 
height: 0 !important; 
padding: 0 16px 16px 0; 
background: transparent url(http://i55.tinypic.com/o86qtg.png) no-repeat !important;}
img[src='http://l-stat.livejournal.com/img/btn_scr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i51.tinypic.com/n1frbc.png');}
img[src='http://l-stat.livejournal.com/img/btn_unscr.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/snjhqe.png');}
img[src='http://l-stat.livejournal.com/img/btn_freeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i53.tinypic.com/200wev8.png');}
img[src='http://l-stat.livejournal.com/img/btn_unfreeze.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i56.tinypic.com/244tlyg.png');}
img[src='http://l-stat.livejournal.com/img/btn_edit.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i52.tinypic.com/2008zgk.png');}
img[src='http://l-stat.livejournal.com/img/btn_track.gif'] {
height: 0; 
width: 0; 
padding: 0 16px 16px 0; 
background: url('http://i54.tinypic.com/e0jwbm.png');}

/*------ MISC. ------*/

.subtitle {display: none;}
.title {display: none;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #f7f7f7; 
-moz-border-radius: 5px;
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
 text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#63CBF7!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ revolution

2011-02-11T22:10:40Z

(name) revolution
(style) flexi squares
live // image

/* ----------------------------------------
   (name): revolution
   (maker): traincar @ invicted
   (icons): pinvoke & damnicons
---------------------------------------- */

body {
background: #111;
text-align: justify; 
color: #777; 
font: normal 12px helvetica, arial; 
line-height: 18px;
margin: 20px 0 20px 0;} 
#maincontent {
margin-top: 15px; 
background-color: transparent; 
color: #000000;  
text-align: left;} 
#content {
width: 60%;
margin-left: auto; 
margin-right: auto;
padding: 15px;} 
blockquote {
background: #222;
text-align: left;
border: 3px solid #333;
padding: 5px; 
margin: 10px;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #333; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
cursor: default;
color: #FBB829;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
margin-top: 14px;
float: right;
width: 200px;
padding: 5px;
background: #111;
font: normal arial 7pt;
line-height: 10pt;
text-align: justify;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #333; 
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #FBB829;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarheader, .sbarbody, .sbarbody2 {
padding: 10px;}

.sbarbody, .sbarbody2 {
background: #111; 
margin-bottom: 5px;}
            
table.calendar {
margin: auto;}
.sbarcalendar {
margin: 3px; 
text-align: center; 
border: 1px solid #222; 
padding: 2px;}
.sbarcalendarposts {
text-align: center; 
margin: 3px; 
border: 1px solid #222; 
background: #222;
padding: 2px;}
.sbarcalendarposts a {
color: #FBB829 !important;}
.sbarcalendarposts a:hover {
text-align: center;
color: #aaa !important;}
table.yeartable {
align: left !important;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
padding: 3px;
color: #333;
width: 95%;
margin: 3px;
list-style: none;}
li.sbartitle {
text-indent: 8px;
padding: 3px;
background: #222;
color: #FBB829;
font: normal 14pt arial;
letter-spacing: -1px;}

/*------ HEADER & FOOTER ------*/

#header, #footer {
font: normal 14pt arial;
letter-spacing: -1px;
background: transparent; 
padding-bottom: 5px;
height: 30px;
padding: 5px;
width: 770px !important;
text-align: left;
color: #aaa;} 
div#header li.view, div#footer li.view {
margin-right: 5px; 
color: #aaa;  
border-bottom: 2px solid #FBB829; 
padding: 5px;}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
margin-right: 5px; 
color: #333;  
border-bottom: 2px solid #111; 
padding: 5px;} 
div#header a:hover, div#footer a:hover {
color: #aaa;
border-bottom: 2px solid #FBB829;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 540px;}
.entry {
border-size: 0 10px 10px 10px;
border-color: #222;
border-style: solid;
width: 550px;
padding: 10px;
color: #777;
background-color: #fcfcfc; 
text-align: justify;} 
.entry_text {
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
color: #999 !important;}
.userpicfriends {
color: transparent;}
.userpicfriends a font:hover {
color: #FBB829;}
.userpic, .userpicfriends {
text-align: center; 
color: #ccc !important;
position: relative;
margin-left: -153px;
float: left;
background-color: #fcfcfc !important;
border: 10px solid #222;
padding: 5px;} 
.date {
text-align: left;
text-transform: lowercase; 
color: #888;
font: normal 7pt courier new;
margin-bottom: -2px;
padding-left: 10px;
width: 100%;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: normal 14pt arial;
letter-spacing: -1px;
background: transparent;
padding: 5px;
color: #FBB829;
text-align: left;}
.subject a:hover {
color: #aaa;
font-style: none; 
font-weight: normal;}
.datesubject {
border: 10px solid #222;
width: 546px;
height: auto;
padding: 5px;
background: #222;}

/*------ CURRENTS ------*/
.currents {
margin-top: 5px;
width: 96%; 
background: #f8f8f8; 
border: 1px solid #eee; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 10px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #333;
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #333;
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/home3.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.png") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: left;
font-size: 12pt;
font-weight: bold;
padding: 5px;
color: transparent;
background-color: #fcfcfc;
width: 98%;
position: relative;}
div.comments a {
font-style: none;
font-weight: normal;
text-decoration: none;
color: #222;}  
div.comments a:hover {
color: #FBB829;}
.userpiccomment {
position: relative;
background-color: #fff;
z-index: 15;
width: 70px;
height: 70px;
float: left;
margin: 5px;
border: 5px solid #222;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
text-align: left; 
clear: left; 
width: 540px;}
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #111; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 8pt arial;
background-color: #fff;
border: 1px solid #f8f8f8;} 
textarea.textbox  {
width: 500px !important; 
background: #fff !important;}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #555;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #777;}
.commentbox {
border: 5px solid #222;
margin-left: 0 !important;
width: 550px;
color: #777;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #fcfcfc;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #f8f8f8;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #FBB829;
font-weight: bold;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 10px; 
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #333;}
.skiplinks a:hover {
color: #222;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {display: none;}

#lj_controlstrip td {
color: #777; 
font: normal 8pt arial;
background: #222;
padding: 5px; 
border: none;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt arial; 
text-transform:lowercase; 
color: #777; 
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, span#lj_controlstrip_user a:hover, td#lj_controlstrip_search a:hover, #lj_controlstrip td a:hover {
color: #FBB829; 
text-decoration: none;}

div.ContextualPopup div.Inner{
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #222; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
 text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#FBB829!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ prophecy → two versions

2011-02-07T01:48:50Z

(name) prophecy
→ two versions
(style) flexi squares
live // image

crystal (white/blue)

/* ----------------------------------------
   (name): prophecy // crystal
   (maker): traincar @ invicted
   (icons): pinvoke & damnicons
---------------------------------------- */

body {
background: #f8f8f8;
text-align: justify; 
color: #777; 
font: normal 12px franklin gothic book, arial; 
line-height: 18px;
margin: 20px 0 20px 0;} 
#maincontent {
margin-top: 15px; 
background-color: transparent; 
color: #000000;  
text-align: left;} 
#content {
width: 680px; 
margin-left: auto; 
margin-right: auto;
background-color: transparent; 
padding: 15px;} 
blockquote {
background: #fff;
text-align: left;
 border: 1px solid #eee;
padding: 5px; 
margin: 10px;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #333; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
color: #D8E8EC;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

#sidebar {
margin-top: 14px;
float: right;
width: 200px;
padding: 5px;
background: transparent;
-moz-border-radius: 10px;
font: normal arial 7pt;
line-height: 10pt;
text-align: justify;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
color: #333; 
text-decoration: none;}
#sidebar a:hover {
text-decoration: none;
color: #D8E8EC;}

.defaultuserpic {
display: none;}
.defaultuserpic img {
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarheader, .sbarbody, .sbarbody2 {
padding: 10px;}

.sbarbody, .sbarbody2 {
background: #fcfcfc; 
margin-bottom: 5px; 
-moz-border-radius: 10px;}
            
table.calendar {
margin: auto;}
.sbarcalendar {
margin: 3px; 
text-align: center; 
border: 1px solid #f8f8f8; 
padding: 2px;}
.sbarcalendarposts {
text-align: center; 
margin: 3px; 
border: 1px solid #f8f8f8; 
padding: 2px;}
.sbarcalendarposts a {
color: #9ED9E6 !important;}
.sbarcalendarposts a:hover {
text-align: center;
color: #D8E8EC !important;}
table.yeartable {
align: left !important;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
padding: 3px;
color: #333;
width: 95%;
margin: 3px;
background: #fcfcfc;
border-bottom: 2px solid #eee;
list-style: none;}
li.sbaritem:hover {
border-bottom: 2px solid #D8E8EC;}
li.sbartitle {
display: none;}

/*------ HEADER & FOOTER ------*/

#header {
background: transparent; 
padding-bottom: 5px;
height: 30px;
padding-left: 5px;
padding-right: 5px;
width: 770px !important;
text-align: center;
color: #000;} 
div#header li.view {
margin-right: 5px;
padding-bottom: 10px;
padding-top: 10px; 
display: block;
float: left;
min-width: 70px;
background: #fdfdfd;
border-bottom: 2px solid #D8E8EC;}
div#header a, div#header a:link, div#header a:visited {
margin-right: 5px; 
color: #444; 
display: block; 
min-width: 70px; 
background: #fcfcfc; 
border-bottom: 2px solid #D8E8EC; 
padding-bottom: 10px; 
padding-top: 10px; 
float: left;} 
div#header a:hover {
background: #fbfbfb;}
div#footer a, div#footer a:link, div#footer a:visited {
color: # 9ED9E6;} 
div#footer a:hover {
color: #D8E8EC;}
#footer {
font: normal 12pt franklin gothic book;
width: 770px !important;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
text-align: center;
margin-top: -20px;
clear: both;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 410px;}
.entry {
width: 420px;
-moz-border-radius: 0 0 10px 10px;
padding: 10px;
color: #777;
background-color: #fcfcfc; 
text-align: justify;} 
.entry_text {
background: #transparent!important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
color: #999 !important;}
.userpicfriends {
color: transparent;}
.userpic img, .userpicfriends img {
width: 60px; 
height: 60px;}
.userpicfriends a font:hover {
color: #D8E8EC;}
.userpic, .userpicfriends {
text-align: center; 
color: #ccc !important;
position: relative;
margin-left: -103px;
float: left;
background-color: #fcfcfc !important;
padding: 5px;
-moz-border-radius: 5px;} 
.date {
text-align: left;
text-transform: uppercase; 
color: #888;
font: normal 7pt arial;
margin-bottom: -2px;
padding-left: 10px;
width: 100%;}
.subject {
border-bottom: 1px solid #eee;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: normal 12pt franklin gothic book;
letter-spacing: -1px;
background: transparent;
padding: 5px;
color: #9ED9E6;
text-align: left;}
.subject a:hover {
color: #D8E8EC;
font-style: none; 
font-weight: normal;}
.datesubject {
width: 430px;
-moz-border-radius: 10px 10px 0 0;
height: auto;
padding: 5px;
background: #fcfcfc;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: left;
font-size: 12pt;
padding: 5px;
color: transparent;
background-color: #fcfcfc;
width: 98%;
position: relative;}
div.comments a {
font-style: none;
font-weight: normal;
text-decoration: none;
color: #9ED9E6;}  
div.comments a:hover {
color: #D8E8EC;}
.userpiccomment {
position: relative;
background-color: #fff;
z-index: 15;
width: 70px;
height: 70px;
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #eee;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
text-align: left; 
clear: left; 
width: 490px;}
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #111; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 8pt franklin gothic book;
background-color: #fff;
border: 1px solid #f8f8f8;} 
textarea.textbox  {
border: 1px solid #f8f8f8 !important;
width: 400px !important; 
background: #fff !important;}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #000000;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #111;}
.commentbox {
margin-left: 0 !important;
width: 420px;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #fcfcfc;
-moz-border-radius: 6px;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #f8f8f8;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #9ED9E6;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 10px; 
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #111;}
.skiplinks a:hover {
color: #111;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {display: none;}

#lj_controlstrip td {
color: #777; 
font: normal 8pt franklin gothic book, arial;
background:#fff; 
border: none;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt franklin gothic book, arial; 
text-transform:lowercase; 
color: #777; 
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, span#lj_controlstrip_user a:hover, td#lj_controlstrip_search a:hover, #lj_controlstrip td a:hover {
color: #D8E8EC; 
text-decoration: none;}

div.ContextualPopup div.Inner{
-moz-border-radius: 10px;
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt franklin gothic book, arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #fff; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
 text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#D8E8EC!important;
text-decoration:none!important;}
.clear {
display: none;}

rose (pink)

/* ----------------------------------------
   (name): prophecy // rose
   (maker): traincar @ invicted
   (icons): pinvoke & damnicons
---------------------------------------- */

body {
background: #F1EAE4;
text-align: justify; 
color: #777; 
font: normal 12px franklin gothic book, arial; 
line-height: 18px;
margin: 20px 0 20px 0;} 
#maincontent {
margin-top: 15px; 
background-color: transparent; 
color: #000000;  
text-align: left;} 
#content {
width: 680px; 
margin-left: auto; 
margin-right: auto;
background-color: transparent; 
padding: 15px;} 
blockquote {
background: #fff;
text-align: left;
 border: 1px solid #eee;
padding: 5px; 
margin: 10px;} 
code, kbd, pre, tt {
font-family: monospace;
font-size: 8pt;} 
strong, b {
color: #333; 
font-weight: normal !important;}
em {
color: #555;}

a, a:link, a:visited {
color: #333; 
text-transform: lowercase;
text-decoration: none;} 
a:hover {
color: #CF5773;
font-style: none; 
font-weight: normal;} 
h2 {display: none;}

/*------ SIDEBAR ------*/

.defaultuserpic {
display: none;}
.defaultuserpic img {
width: 60px; 
height: 60px; 
padding: 5px; 
border: 1px solid #efefef;}

.sbarheader, .sbarbody, .sbarbody2 {
padding: 10px;}

.sbarbody, .sbarbody2 {
background: #fcfcfc; 
margin-bottom: 5px; 
-moz-border-radius: 10px;}
            
table.calendar {
margin: auto;}
.sbarcalendar {
margin: 3px; 
text-align: center; 
border: 1px solid #f8f8f8; 
padding: 2px;}
.sbarcalendarposts {
text-align: center; 
margin: 3px; 
border: 1px solid #f8f8f8; 
padding: 2px;}
.sbarcalendarposts a {
color: #AD4053 !important;}
.sbarcalendarposts a:hover {
text-align: center;
color: #CF5773!important;}
table.yeartable {
align: left !important;}
.yeartable {
margin-left: 20px; 
margin-right: auto;}
table.yeartable td.yearday {
border: none;}
table.yeartable td.yeardate {
color: #ccc;}
td.yearmonth, table.yeartable td.yearday {
color: #000; 
text-transform: lowercase; 
font-size: 9pt;}

/*------ HEADER & FOOTER ------*/

#header {
background: transparent; 
padding-bottom: 5px;
height: 30px;
padding-left: 5px;
padding-right: 5px;
width: 770px !important;
text-align: center;
color: #000;} 
div#header li.view {
margin-right: 5px;
padding-bottom: 10px;
padding-top: 10px; 
display: block;
float: left;
min-width: 70px;
background: #fdfdfd;
border-bottom: 2px solid #CF5773;}
div#header a, div#header a:link, div#header a:visited {
margin-right: 5px; 
color: #444; 
display: block; 
min-width: 70px; 
background: #fcfcfc; 
border-bottom: 2px solid #CF5773; 
padding-bottom: 10px; 
padding-top: 10px; 
float: left;} 
div#header a:hover {
background: #fbfbfb;}
div#footer a, div#footer a:link, div#footer a:visited {
color: #AD4053;} 
div#footer a:hover {
color: #CF5773;}
#footer {
font: normal 12pt franklin gothic book;
width: 770px !important;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
text-align: center;
margin-top: -20px;
clear: both;}
ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
ul.navheader {
padding: 0px;
margin: 0px;} 
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font {
color: #999 !important;}
.userpicfriends {
color: transparent;}
.userpic img, .userpicfriends img {
width: 60px; 
height: 60px;}
.userpicfriends a font:hover {
color: #CF5773;}
.userpic, .userpicfriends {
text-align: center; 
color: #ccc !important;
position: relative;
margin-left: -103px;
float: left;
background-color: #fcfcfc !important;
padding: 5px;
-moz-border-radius: 5px;} 
.date {
text-align: left;
text-transform: uppercase; 
color: #888;
font: normal 7pt arial;
margin-bottom: -2px;
padding-left: 10px;
width: 100%;}
.subject {
border-bottom: 1px solid #eee;}
.subject, .subject a, .subject a:link, .subject a:visited {
font: normal 12pt franklin gothic book;
letter-spacing: -1px;
background: transparent;
padding: 5px;
color: #AD4053;
text-align: left;}
.subject a:hover {
color: #CF5773;
font-style: none; 
font-weight: normal;}
.datesubject {
width: 430px;
-moz-border-radius: 10px 10px 0 0;
height: auto;
padding: 5px;
background: #fcfcfc;}

/*------ COMMENTS PAGE ------*/

.comments {
margin-top: 10px;
text-align: left;
font-size: 12pt;
padding: 5px;
color: transparent;
background-color: #fcfcfc;
width: 98%;
position: relative;}
div.comments a {
font-style: none;
font-weight: normal;
text-decoration: none;
color: #AD4053;}  
div.comments a:hover {
color: #CF5773;}
.userpiccomment {
position: relative;
background-color: #fff;
z-index: 15;
width: 70px;
height: 70px;
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #eee;}
.userpiccomment img {
width: 60px !important; 
height: 60px !important;}
.box {
text-align: left; 
clear: left; 
width: 490px;}
.box b {
font-weight: normal;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left; 
color: #111; 
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #111;}
input, textarea, select {
font: normal 8pt franklin gothic book;
background-color: #fff;
border: 1px solid #f8f8f8;} 
textarea.textbox  {
border: 1px solid #f8f8f8 !important;
width: 400px !important; 
background: #fff !important;}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background: #f8f8f8;
color: #000000;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;
color: #111;}
.commentbox {
margin-left: 0 !important;
width: 420px;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #fcfcfc;
-moz-border-radius: 6px;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #aaa;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;}
.commentinfo {
background-color: #f8f8f8;
margin-top: 10px;
width: auto;}
.commentbox b {
color: #AD4053;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 10px; 
text-align: left; 
color: transparent;}
.skiplinks a, .skiplinks a:active, .skiplinks a:visited, .skiplinks a:link {
color: #111;}
.skiplinks a:hover {
color: #111;}

/*------ TINY ICONS ------*/

/*------ MISC. ------*/

.subtitle {display: none;}
.title {display: none;}

div.ContextualPopup div.Inner{
-moz-border-radius: 10px;
width: 235px;
text-transform: lowercase;
border: none !important;
color: #777!important;
padding: 10px;
font: normal 8pt franklin gothic book, arial; 
background: #fcfcfc!important;}
div.ContextualPopup .Content{
border: none !important;}
div.ContextualPopup .Userpic{
padding: 10px; 
background-color: #fff; 
margin: 0px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#777!important;
font-weight:100;
 text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner b, div.ContextualPopup div.Inner strong {
font-weight: normal !important; 
color: #aaa !important;}
div.ContextualPopup div.Inner a:hover{
color:#CF5773!important;
text-decoration:none!important;}
.clear {
display: none;}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

(layout) ∞ garfield

2011-01-28T18:29:32Z

(name) garfield
(style) flexi squares
live // image

/* ----------------------------------------
   (name): garfield
   (maker): traincar @ invicted
   (icons): pinvoke & damnicons
---------------------------------------- */

body {
background: #fff;
text-align: justify; 
color: #555; 
font: normal 8pt trebuchet ms; 
line-height: 18px;
margin: 20px 0 20px 0;}

#maincontent {
margin-top: 15px; 
background-color: transparent;}

#content {
width: 650px; 
margin-left: auto; 
margin-right: auto;
background-color: transparent; 
padding: 15px;}

blockquote {
background: #f4f4f4;
text-align: left;
border: 1px solid #EDEAE3;
padding: 5px; 
color: #333;
margin: 0;}

code, kbd, pre, tt {
font-family: courier new;
font-size: 8pt;}

strong {
color: #333; 
font-weight: normal;}

a, a:link, a:visited, a:hover {
color: #333; 
text-transform: lowercase;
text-decoration: none;
cursor: default;}

h2, .title, .subtitle, li.sbartitle, .defaultuserpic, .ljtags, .currents strong, .currentmood strong, .currentmusic .currentlocation {
display: none;}

/*------ SIDEBAR ------*/

#sidebar {
margin-top: 16px;
float: right;
width: 180px;
padding: 5px;
background: #fff;
font: normal arial 7pt;
text-align: justify;}
 
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal; 
font-size: 8pt; 
text-decoration: none;}

#sidebar_tags {
border-top: 5px solid #fff;}

.sbarheader, .sbarbody, .sbarbody2 {
padding: 0px 5px 0px 5px;}
.sbarbody2 {
color: #888; 
background: #34302d; 
padding: 5px; 
border-bottom: 5px solid #fff;}
.sbarbody {
background: #f8f8f8; 
padding: 5px;}
            
table.calendar {
margin-right: auto;
margin-left: auto;}
.sbarcalendar {
font-size: 9pt; 
border: none;
text-align: right; 
border: 1px solid #fff;}
.sbarcalendarposts {
background-color: #EDEAE3; 
border: 1px solid #fff;
text-align: right;
padding: 4px;}
.sbarcalendarposts:hover {
color: #f8f8f8 !important; 
background: #34302D;}
        
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
padding: 3px;
margin-bottom: 3px;
list-style: none;}
li.sbaritem:hover {
background: #EDEAE3;}

/*------ HEADER & FOOTER ------*/

#header {background: #34302d; 
font-family: arial;
width: 98%;
padding: 5px;
text-transform: lowercase;
text-align: left; 
font-size: 8pt;
color: #EDEAE3;
margin-bottom: -15px;}

div#header a, div#header a:link, div#header a:visited {
margin-bottom: -12px;
color: #555;} 
div#header a:hover {
color: #EDEAE3;}

div#footer a, div#footer a:link, div#footer a:visited {
color: #EDEAE3; 
margin-bottom: 12px;}

#footer {
width: 98% !important;
text-align: left; 
color: #EDEAE3;
padding: 5px;
background: #34302D;
margin-top: -20px;
clear: both;}
ul.navheader, ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navheader li, ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}

/*------ ENTRY ------*/

.entry img {
max-width: 410px;}
.entry {
width: 420px;
padding-left: 10px;
padding-right: 10px;
background-color: #f8f8f8; 
text-align: justify;} 
.entry_text {
background: #transparent !important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}

.subcontent {}

.ljcut-link {
font-weight: lighter;}

.userpicfriends a font, .userpic a font {
color: #aaa;}
.userpic, .userpicfriends {
text-align: center; 
color: #aaa !important;
float: left;
position: inline;
margin: 5px 5px -1px 5px;
background-color: #fff !important;
padding: 5px;
border: 1px solid #EDEAE3;} 
.userpic img, .userpicfriends img {
width: 75px;
height: 75px;}

.date {
padding: 4px;
text-transform: lowercase; 
color: #fff;
font: normal 7pt arial;
margin-bottom: -5px;
text-transform: uppercase;
letter-spacing: 1px;
width: 100%;}
.subject, .subject a, .subject a:link, .subject a:visited {
line-height: 5px;
width: 100%;
font: normal 7pt arial;
text-transform: uppercase;
letter-spacing: 1px;}
.subject a:hover {
font-style: none; 
font-weight: normal;}
.datesubject {
width: 430px;
padding: 5px;
background: #EDEAE3;}

/*------ CURRENTS ------*/

.currents {
width: 96%; 
background: #f4f4f4; 
border: 1px solid #EDEAE3; 
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 10px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #333;
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #333;
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left; 
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/home3.png") no-repeat left; 
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.png") no-repeat left; 
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}

/*------ COMMENTS PAGE ------*/

.comments {
padding: 5px;
text-align: left;
color: transparent;
margin-top: 2px;
border-top: 5px solid #fff;
background-color: #EDEAE3;}

div.comments a, div.comments a:link, div.comments a:visited {
color: #888; 
background: #f8f8f8;
 font-size: 9pt; 
padding: 5px 10px 5px 10px;}
div.comments a:hover {
background: #fff;}

.userpiccomment {
position: relative;
background-color: #fff;
z-index: 15;
width: 70px;
height: 70px;
float: left;
margin: 5px 5px -1px 5px;
padding: 5px;
border: 1px solid #efefef;}
.userpiccomment img {
width: 65px !important; 
height: 65px !important;}

.box {
text-align: left; 
clear: left; 
width: 100%;}
.box form>table {
margin-left: -16px !important;}

.datesubjectcomment {
text-align: left; 
color: #aaa;
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal; 
color: #34302d !important;
font-size: 9pt;}

input, textarea, select {
font: normal 8.5pt trebuchet ms;
background-color: #f8f8f8;
border: 2px solid #EDEAE3;}
textarea.textbox  {
border: 2px solid #EDEAE3  !important; 
width: 85% !important}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background-color: #EDEAE3;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;}
.commentbox {
border: 2px solid #EDEAE3 !important;
width: 420px;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #f8f8f8 !important;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #777;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f7f7f7;}
.commentinfo {
background-color: #f7f7f7;
margin-top: 10px;
width: auto;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 5px; 
color: #f7f7f7;}

/*------ MISC. ------*/

#lj_controlstrip td {
color: #424242; 
font: normal 8pt trebuchet ms;
background: #f9f9f9; 
border: none; padding: 5px;}        
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt trebuchet ms; 
text-transform:lowercase; 
color: #424242;
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, td#lj_controlstrip a:hover, td#lj_controlstrip_user a:hover {
text-decoration: none !important;
color: #333;}
div.ContextualPopup div.Inner {
width: 235px;
text-transform: lowercase;
border: none !important;
color: #666666!important;
padding: 10px;}
div.ContextualPopup .Content {
border: none !important;}
div.ContextualPopup .Userpic {
padding: 10px; 
background-color: #fff; 
margin: 0px; 
border: 1px solid #efefef;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#999!important;
font-weight:100; 
text-decoration:none!important; 
text-transform:lowercase;}
div.ContextualPopup div.Inner a:hover{
color:#666!important;
text-decoration:none!important;}

.lj_invisible {
display: inline;
visibility: hidden;}
.clear {height: 15px;}

/*------ TINY ICONS ------*/

img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://cloud-shade.org/photos/user-icon-grey.gif) no-repeat !important; padding: 13px 0 0 10px !important;}
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://cloud-shade.org/photos/com_icon_grey.gif) no-repeat !important; padding: 13px 0 0 10px !important;}
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i54.tinypic.com/16ll1le.png) no-repeat !important; padding: 13px 0 0 16px !important;}
img[src*='/img/btn_del.gif']{width: 0 !important; height: 0 !important; padding: 0 16px 16px 0; background: transparent url(http://i55.tinypic.com/o86qtg.png) no-repeat !important;}
img[src='http://l-stat.livejournal.com/img/btn_scr.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i51.tinypic.com/n1frbc.png');}
img[src='http://l-stat.livejournal.com/img/btn_unscr.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i54.tinypic.com/snjhqe.png');}
img[src='http://l-stat.livejournal.com/img/btn_freeze.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i53.tinypic.com/200wev8.png');}
img[src='http://l-stat.livejournal.com/img/btn_unfreeze.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i56.tinypic.com/244tlyg.png');}
img[src='http://l-stat.livejournal.com/img/btn_edit.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i52.tinypic.com/2008zgk.png');}
img[src='http://l-stat.livejournal.com/img/btn_track.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i54.tinypic.com/e0jwbm.png');}

installation

go to journal → journal style

select a flexible squares theme

choose the sidebar on right page setup

ad placement → between entries

custom css → select no from drop menus

paste code and enjoy!

layout archive

2011-01-06T03:33:41Z

download | img

download| img

download | img