(layout) ∞ synthesis

(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!

#98d1cd #aaa #ccc #content #eee #f0f0f0 #f7f7f7 #f8f8f8 #fcfcfc #fff #footer #header #lj_controlstrip #lj_controlstrip_actionlinks #lj_controlstrip_search #lj_controlstrip_statustext #lj_controlstrip_user #maincontent #qrdiv #sidebar stylesheet

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE