echoes

Dec 27, 2009 13:04

Layout: echoes (flexible squares)
Tested: Safari & Firefox
Custom comment pages, tiny icons, topbar



'echoes' : 4 colour schemes : Live Preview (purple)






Purple
img preview

/*-------------------------------------------------

Echoes (purple) [26/12/09]
Flexible Squares
by darlingbones @ ohbambi.livejournal.com

----------------------------------------------------*/

body {
background-color: #fbfbfb;
line-height:170%;
text-align: center;
color: #777;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #514468;
text-decoration: none;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}

a:hover {
color: #514468;
text-decoration: none;
}

p, td, {
font-size: 11px;
}
blockquote {background-color:#f9f9f9;
border-left:5px solid #ddd;
padding:8px;}

code, kbd, pre, tt {
font-family: monospace;
}

#content
{ width: 800px;
margin-left: auto; margin-right: auto;
background-color: #fbfbfb;
}

#maincontent {
width:640px;
float:left;
margin-top: 15px;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
background-color: transparent!important;
color: #000000;
text-align: left;
}

#sidebar {
margin-top: 15px;
background-color: #fff;
font-size: 11px;
font-family:"Lucida Sans Unicode", sans-serif;;
color: #ddd;
width: 800px;
text-align: left;
height:100px;
}

#header {
width: 800px;
padding: 35px 0 0 0;
margin: 0px;
text-align: center;
font-family:tahoma;
text-transform:uppercase;
font-size:10px;
letter-spacing: 3px;
background-color: #271f30;
color: #666;
height:60px;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #555555;
}

div#header a:hover, div#footer a:hover {
color: #777777;
text-decoration: none;
}

ul.navheader
{
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.subcontent {
width:800px;
background:#f4f4f4;
}

.entry_text img {
max-width:500px;}

.entry_text {
padding:10px 20px;
min-height:70px;}

.entry {
width:640px;
margin: 0px;
background-color: #fff;
color: #777;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: left;
}

.userpicfriends a font {
font-family:"georgia";
font-size:7pt;
text-transform:uppercase;
letter-spacing:+1px;
text-align:center!important;
color:#514468;}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
background-color:#fff!important;
margin: 25px 25px 0 0;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
z-index: 15;
}

.date {
color: #ddd;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 7pt;
letter-spacing:+1px;
text-transform:uppercase;
float:right;
padding: 5px 10px;
}

.subject {
font-weight: normal;
padding: 5px 10px;
color: #ccc;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 18px;
text-transform:uppercase;
letter-spacing:+1px;
max-width:500px;
}

.subject a, .subject a:link, .subject a:visited {
color: #ccc;
}

.subject a:hover {
color: #ccc;
text-decoration:none;
}

.datesubject {
background-color: #fff;
width:640px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.currents div {
display: block;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:90%;
}

.currentmusic {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/6pvjes.gif) no-repeat scroll 0% 50%;
margin-left:20px;
}
.currentmood {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/30ae0sn.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}
.currentlocation {
padding: 2px 5px 2px 20px;
background: transparent url(http://i47.tinypic.com/i408ew.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}

.ljtags {
font-size: 7pt;
margin: 20px 20px -40px 0;
font-weight: normal;
color: #bbb;
text-transform: uppercase;
}

.currents, .currentmood, .currentmusic, {
font-size: 7pt;
margin-left: 20px;
font-weight: normal;
line-height:80%;
color: #bbb;
text-transform: uppercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited, .ljtags a {
color: #bbb;
font-weight: normal;
text-transform: uppercase;
}

.currentlocation a:hover {
color: #bbb;
font-weight: normal;
text-transform: uppercasee;
}

.comments {
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: center;
background-color: #fff;
padding: 10px 5px;
position: relative;
color:#fff;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #ccc;
}

div.comments a:hover {
color: #bbbbbb;
text-decoration: none;
}

.defaultuserpic{
display:inline;
float:right;}

.defaultuserpic img{
width:70px;
height:70px;
display:inline;
border: 15px solid #fff;
}

.sbarbody {
padding: 0 15px;
text-align:left;
font:Tahoma, Geneva, sans-serif;
font-size:10px;
}

.sbarbody2 {
text-align:right;
width:600px;
max-height:60px;
margin-left:80px;
padding-top:15px;
}

table.calendar, .sbarcalendar, .sbarcalendarposts, .sbarheader, .currents strong, .currentmood strong, .currentmusic .currentlocation, li.sbartitle, .subtitle, .title {
display:none;
}

ul.sbarlist
{ padding-left: 0px;
margin-left: 0px;
list-style: none;
display:inline;
text-align:right;
text-transform:uppercase;
letter-spacing:+1px;
color:#e5e2e9;
}

li.sbaritem a, li.sbaritem a:hover
{ color:#514468;
text-decoration:none;
}

li.sbaritem
{ padding-left: 5px;
list-style: none;
display:inline;
text-align:right;
color:#e5e2e9;
}

#footer {
width: 800px;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 8pt;
text-transform:uppercase;
letter-spacing:+1px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent!important;
color: #ddd;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}

td.yearmonth {
border-style: none;
}

.datesubjectcomment {
background-color: #fff;
padding: 5px;
margin-top: 20px;
font-size:7pt;
text-transform:uppercase;
color:#CCC;
}

.userpiccomment {
position: relative;
background-color: #eee;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
clear: left;
color:#777;
}

input, textarea {
background-color: #dddddd;
color: #777;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
line-height: 125%;
background-color: #dddddd;
color: #777;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Lucida Sans Unicode", sans-serif;;
color: #777;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
}

.datesubjectcomment a:hover {
color: #ccc;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.commentinfo {
background-color: #fff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
}

.clear {
height: 15px;
background-color:transparent!important;
}

.separator{
height: 35px;
background-color:#fbfbfb;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;;
background: url(http://i49.tinypic.com/noadrb.jpg);
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg);
padding: 16px 16px 0px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i45.tinypic.com/bevwo5.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}

Pink
img preview

/*-------------------------------------------------

Echoes (pinks) [26/12/09]
Flexible Squares
by darlingbones @ ohbambi.livejournal.com

----------------------------------------------------*/

body {
background-color: #ededed;
line-height:170%;
text-align: center;
color: #777;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #764564;
text-decoration: none;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}

a:hover {
color: #764564;
text-decoration: none;
}

p, td, {
font-size: 11px;
}
blockquote {background-color:#f9f9f9;
border-left:5px solid #ddd;
padding:8px;}

code, kbd, pre, tt {
font-family: monospace;
}

#content
{ width: 800px;
margin-left: auto; margin-right: auto;
background-color: #ededed;
}

#maincontent {
width:640px;
float:left;
margin-top: 15px;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
background-color: transparent!important;
color: #000000;
text-align: left;
}

#sidebar {
margin-top: 15px;
background-color: #fff;
font-size: 11px;
font-family:"Lucida Sans Unicode", sans-serif;;
color: #ddd;
width: 800px;
text-align: left;
height:100px;
}

#header {
width: 800px;
padding: 35px 0 0 0;
margin: 0px;
text-align: center;
font-family:tahoma;
text-transform:uppercase;
font-size:10px;
letter-spacing: 3px;
background-color: #5d0838;
color: #555;
height:60px;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #444444;
}

div#header a:hover, div#footer a:hover {
color: #777777;
text-decoration: none;
}

ul.navheader
{
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.subcontent {
width:800px;
background:#f3dde6;
}

.entry_text img {
max-width:500px;}

.entry_text {
padding:10px 20px;
min-height:70px;}

.entry {
width:640px;
margin: 0px;
background-color: #fff;
color: #777;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: left;
}

.userpicfriends a font {
font-family:"georgia";
font-size:7pt;
text-transform:uppercase;
letter-spacing:+1px;
text-align:center!important;
color:#764564;}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
background-color:#fff!important;
margin: 25px 25px 0 0;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
z-index: 15;
}

.date {
color: #ddd;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 7pt;
letter-spacing:+1px;
text-transform:uppercase;
float:right;
padding: 5px 10px;
}

.subject {
font-weight: normal;
padding: 5px 10px;
color: #ccc;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 18px;
text-transform:uppercase;
letter-spacing:+1px;
max-width:500px;
}

.subject a, .subject a:link, .subject a:visited {
color: #ccc;
}

.subject a:hover {
color: #ccc;
text-decoration:none;
}

.datesubject {
background-color: #fff;
width:640px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.currents div {
display: block;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:90%;
}

.currentmusic {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/6pvjes.gif) no-repeat scroll 0% 50%;
margin-left:20px;
}
.currentmood {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/30ae0sn.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}
.currentlocation {
padding: 2px 5px 2px 20px;
background: transparent url(http://i47.tinypic.com/i408ew.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}

.ljtags {
font-size: 7pt;
margin: 20px 20px -40px 0;
font-weight: normal;
color: #bbb;
text-transform: uppercase;
}

.currents, .currentmood, .currentmusic, {
font-size: 7pt;
margin-left: 20px;
font-weight: normal;
line-height:80%;
color: #bbb;
text-transform: uppercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited, .ljtags a {
color: #bbb;
font-weight: normal;
text-transform: uppercase;
}

.currentlocation a:hover {
color: #bbb;
font-weight: normal;
text-transform: uppercasee;
}

.comments {
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: center;
background-color: #fff;
padding: 10px 5px;
position: relative;
color:#fff;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #ccc;
}

div.comments a:hover {
color: #bbbbbb;
text-decoration: none;
}

.defaultuserpic{
display:inline;
float:right;}

.defaultuserpic img{
width:70px;
height:70px;
display:inline;
border: 15px solid #fff;
}

.sbarbody {
padding: 0 15px;
text-align:left;
font:Tahoma, Geneva, sans-serif;
font-size:10px;
}

.sbarbody2 {
text-align:right;
width:600px;
max-height:60px;
margin-left:80px;
padding-top:15px;
}

table.calendar, .sbarcalendar, .sbarcalendarposts, .sbarheader, .currents strong, .currentmood strong, .currentmusic .currentlocation, li.sbartitle, .subtitle, .title {
display:none;
}

ul.sbarlist
{ padding-left: 0px;
margin-left: 0px;
list-style: none;
display:inline;
text-align:right;
text-transform:uppercase;
letter-spacing:+1px;
color:#e5e2e9;
}

li.sbaritem a, li.sbaritem a:hover
{ color:#764564;
text-decoration:none;
}

li.sbaritem
{ padding-left: 5px;
list-style: none;
display:inline;
text-align:right;
color:#e5e2e9;
}

#footer {
width: 800px;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 8pt;
text-transform:uppercase;
letter-spacing:+1px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent!important;
color: #ddd;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}

td.yearmonth {
border-style: none;
}

.datesubjectcomment {
background-color: #fff;
padding: 5px;
margin-top: 20px;
font-size:7pt;
text-transform:uppercase;
color:#CCC;
}

.userpiccomment {
position: relative;
background-color: #eee;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
clear: left;
color:#777;
}

input, textarea {
background-color: #dddddd;
color: #777;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
line-height: 125%;
background-color: #dddddd;
color: #777;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Lucida Sans Unicode", sans-serif;;
color: #777;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
}

.datesubjectcomment a:hover {
color: #ccc;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.commentinfo {
background-color: #fff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
}

.clear {
height: 15px;
background-color:transparent!important;
}

.separator{
height: 35px;
background-color:#ededed;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;;
background: url(http://i49.tinypic.com/noadrb.jpg);
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg);
padding: 16px 16px 0px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i45.tinypic.com/bevwo5.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}




Navy
img preview

/*-------------------------------------------------

Echoes (purple) [26/12/09]
Flexible Squares
by darlingbones @ ohbambi.livejournal.com

----------------------------------------------------*/

body {
background-color: #e5e5e5;
line-height:170%;
text-align: center;
color: #777;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #3a3c6a;
text-decoration: none;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}

a:hover {
color: #3a3c6a;
text-decoration: none;
}

p, td, {
font-size: 11px;
}
blockquote {background-color:#f9f9f9;
border-left:5px solid #ddd;
padding:8px;}

code, kbd, pre, tt {
font-family: monospace;
}

#content
{ width: 800px;
margin-left: auto; margin-right: auto;
background-color: #e5e5e5;
}

#maincontent {
width:640px;
float:left;
margin-top: 15px;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
background-color: transparent!important;
color: #000000;
text-align: left;
}

#sidebar {
margin-top: 15px;
background-color: #fff;
font-size: 11px;
font-family:"Lucida Sans Unicode", sans-serif;;
color: #ddd;
width: 800px;
text-align: left;
height:100px;
}

#header {
width: 800px;
padding: 35px 0 0 0;
margin: 0px;
text-align: center;
font-family:tahoma;
text-transform:uppercase;
font-size:10px;
letter-spacing: 3px;
background-color: #12083c;
color: #666;
height:60px;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #555555;
}

div#header a:hover, div#footer a:hover {
color: #777777;
text-decoration: none;
}

ul.navheader
{
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.subcontent {
width:800px;
background:#bbc9f1;
}

.entry_text img {
max-width:500px;}

.entry_text {
padding:10px 20px;
min-height:70px;}

.entry {
width:640px;
margin: 0px;
background-color: #fff;
color: #777;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: left;
}

.userpicfriends a font {
font-family:"georgia";
font-size:7pt;
text-transform:uppercase;
letter-spacing:+1px;
text-align:center!important;
color:#3a3c6a;}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
background-color:#fff!important;
margin: 25px 25px 0 0;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
z-index: 15;
}

.date {
color: #ddd;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 7pt;
letter-spacing:+1px;
text-transform:uppercase;
float:right;
padding: 5px 10px;
}

.subject {
font-weight: normal;
padding: 5px 10px;
color: #b4b4cb;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 18px;
text-transform:uppercase;
letter-spacing:+1px;
max-width:500px;
}

.subject a, .subject a:link, .subject a:visited {
color: #b4b4cb;
}

.subject a:hover {
color: #b4b4cb;
text-decoration:none;
}

.datesubject {
background-color: #fff;
width:640px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.currents div {
display: block;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:90%;
}

.currentmusic {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/6pvjes.gif) no-repeat scroll 0% 50%;
margin-left:20px;
}
.currentmood {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/30ae0sn.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}
.currentlocation {
padding: 2px 5px 2px 20px;
background: transparent url(http://i47.tinypic.com/i408ew.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}

.ljtags {
font-size: 7pt;
margin: 20px 20px -40px 0;
font-weight: normal;
color: #bbb;
text-transform: uppercase;
}

.currents, .currentmood, .currentmusic, {
font-size: 7pt;
margin-left: 20px;
font-weight: normal;
line-height:80%;
color: #bbb;
text-transform: uppercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited, .ljtags a {
color: #bbb;
font-weight: normal;
text-transform: uppercase;
}

.currentlocation a:hover {
color: #bbb;
font-weight: normal;
text-transform: uppercasee;
}

.comments {
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: center;
background-color: #fff;
padding: 10px 5px;
position: relative;
color:#fff;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #ccc;
}

div.comments a:hover {
color: #bbbbbb;
text-decoration: none;
}

.defaultuserpic{
display:inline;
float:right;}

.defaultuserpic img{
width:70px;
height:70px;
display:inline;
border: 15px solid #fff;
}

.sbarbody {
padding: 0 15px;
text-align:left;
font:Tahoma, Geneva, sans-serif;
font-size:10px;
}

.sbarbody2 {
text-align:right;
width:600px;
max-height:60px;
margin-left:80px;
padding-top:15px;
}

table.calendar, .sbarcalendar, .sbarcalendarposts, .sbarheader, .currents strong, .currentmood strong, .currentmusic .currentlocation, li.sbartitle, .subtitle, .title {
display:none;
}

ul.sbarlist
{ padding-left: 0px;
margin-left: 0px;
list-style: none;
display:inline;
text-align:right;
text-transform:uppercase;
letter-spacing:+1px;
color:#e5e2e9;
}

li.sbaritem a, li.sbaritem a:hover
{ color:#3a3c6a;
text-decoration:none;
}

li.sbaritem
{ padding-left: 5px;
list-style: none;
display:inline;
text-align:right;
color:#e5e2e9;
}

#footer {
width: 800px;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 8pt;
text-transform:uppercase;
letter-spacing:+1px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent!important;
color: #ddd;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}

td.yearmonth {
border-style: none;
}

.datesubjectcomment {
background-color: #fff;
padding: 5px;
margin-top: 20px;
font-size:7pt;
text-transform:uppercase;
color:#CCC;
}

.userpiccomment {
position: relative;
background-color: #eee;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
clear: left;
color:#777;
}

input, textarea {
background-color: #dddddd;
color: #777;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
line-height: 125%;
background-color: #dddddd;
color: #777;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Lucida Sans Unicode", sans-serif;;
color: #777;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
}

.datesubjectcomment a:hover {
color: #ccc;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.commentinfo {
background-color: #fff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
}

.clear {
height: 15px;
background-color:transparent!important;
}

.separator{
height: 35px;
background-color:#e5e5e5;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;;
background: url(http://i49.tinypic.com/noadrb.jpg);
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg);
padding: 16px 16px 0px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i45.tinypic.com/bevwo5.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}

Heat
img preview

/*-------------------------------------------------

Echoes (heat) [26/12/09]
Flexible Squares
by darlingbones @ ohbambi.livejournal.com

----------------------------------------------------*/

body {
background-color: #010101;
line-height:170%;
text-align: center;
color: #777;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #e7122a;
text-decoration: none;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}

a:hover {
color: #e7122a;
text-decoration: none;
}

p, td, {
font-size: 11px;
}
blockquote {background-color:#f9f9f9;
border-left:5px solid #ddd;
padding:8px;}

code, kbd, pre, tt {
font-family: monospace;
}

#content
{ width: 800px;
margin-left: auto; margin-right: auto;
background-color: #010101;
}

#maincontent {
width:640px;
float:left;
margin-top: 15px;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
background-color: transparent!important;
color: #000000;
text-align: left;
}

#sidebar {
margin-top: 15px;
margin-bottom:15px;
background-color: #fff;
font-size: 11px;
font-family:"Lucida Sans Unicode", sans-serif;;
color: #ddd;
width: 800px;
text-align: left;
height:100px;
}

#header {
width: 800px;
padding: 35px 0 0 0;
margin: 0;
text-align: center;
font-family:tahoma;
text-transform:uppercase;
font-size:10px;
letter-spacing: 3px;
background-color: #f34a0f;
color: #fff;
height:60px;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ffae00;
}

div#header a:hover, div#footer a:hover {
color: #fff;
text-decoration: none;
}

ul.navheader
{
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.subcontent {
width:800px;
background:#ffa800;
}

.entry_text img {
max-width:500px;}

.entry_text {
padding:10px 20px;
min-height:70px;}

.entry {
width:640px;
margin: 0px;
background-color: #fff;
color: #777;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: left;
}

.userpicfriends a font {
font-family:"georgia";
font-size:7pt;
text-transform:uppercase;
letter-spacing:+1px;
text-align:center!important;
color:#e7122a;}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
background-color:#fff!important;
margin: 25px 25px 0 0;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
z-index: 15;
}

.date {
color: #ddd;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 7pt;
letter-spacing:+1px;
text-transform:uppercase;
float:right;
padding: 5px 10px;
}

.subject {
font-weight: normal;
padding: 5px 10px;
color: #e7122a;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 18px;
text-transform:uppercase;
letter-spacing:+1px;
max-width:500px;
}

.subject a, .subject a:link, .subject a:visited {
color: #e7122a;
}

.subject a:hover {
color: #e7122a;
text-decoration:none;
}

.datesubject {
background-color: #fff;
width:640px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.currents div {
display: block;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:90%;
}

.currentmusic {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/6pvjes.gif) no-repeat scroll 0% 50%;
margin-left:20px;
}
.currentmood {
padding: 2px 5px 2px 20px;
background: transparent url(http://i48.tinypic.com/30ae0sn.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}
.currentlocation {
padding: 2px 5px 2px 20px;
background: transparent url(http://i47.tinypic.com/i408ew.gif) no-repeat scroll 0% 50%;
margin-left: 20px;
}

.ljtags {
font-size: 7pt;
margin: 20px 20px -40px 0;
font-weight: normal;
color: #bbb;
text-transform: uppercase;
}

.currents, .currentmood, .currentmusic, {
font-size: 7pt;
margin-left: 20px;
font-weight: normal;
line-height:80%;
color: #bbb;
text-transform: uppercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited, .ljtags a {
color: #bbb;
font-weight: normal;
text-transform: uppercase;
}

.currentlocation a:hover {
color: #bbb;
font-weight: normal;
text-transform: uppercasee;
}

.comments {
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
text-align: center;
background-color: #fff;
padding: 10px 5px;
position: relative;
color:#fff;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #ccc;
}

div.comments a:hover {
color: #bbbbbb;
text-decoration: none;
}

.defaultuserpic{
display:inline;
float:right;}

.defaultuserpic img{
width:70px;
height:70px;
display:inline;
border: 15px solid #fff;
}

.sbarbody {
padding: 0 15px;
text-align:left;
font:Tahoma, Geneva, sans-serif;
font-size:10px;
}

.sbarbody2 {
text-align:right;
width:600px;
max-height:60px;
margin-left:80px;
padding-top:15px;
}

table.calendar, .sbarcalendar, .sbarcalendarposts, .sbarheader, .currents strong, .currentmood strong, .currentmusic .currentlocation, li.sbartitle, .subtitle, .title {
display:none;
}

ul.sbarlist
{ padding-left: 0px;
margin-left: 0px;
list-style: none;
display:inline;
text-align:right;
text-transform:uppercase;
letter-spacing:+1px;
color:#e5e2e9;
}

li.sbaritem a, li.sbaritem a:hover
{ color:#e7122a;
text-decoration:none;
}

li.sbaritem
{ padding-left: 5px;
list-style: none;
display:inline;
text-align:right;
color:#e5e2e9;
}

#footer {
width: 800px;
text-align: center;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 8pt;
text-transform:uppercase;
letter-spacing:+1px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent!important;
color: #ddd;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}

td.yearmonth {
border-style: none;
}

.datesubjectcomment {
background-color: #fff;
padding: 5px;
margin-top: 20px;
font-size:7pt;
text-transform:uppercase;
color:#CCC;
}

.userpiccomment {
position: relative;
background-color: #eee;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
clear: left;
color:#777;
}

input, textarea {
background-color: #dddddd;
color: #777;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", sans-serif;;
font-size: 11px;
line-height: 125%;
background-color: #dddddd;
color: #777;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Lucida Sans Unicode", sans-serif;;
color: #777;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
}

.datesubjectcomment a:hover {
color: #ccc;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #fff;
}

.commentinfo {
background-color: #fff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
text-transform:uppercase;
font-size:7pt;
letter-spacing:+1px;
}

.clear {
height: 15px;
background-color:transparent!important;
}

.separator{
height: 15px;
background-color:#010101;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;;
background: url(http://i49.tinypic.com/noadrb.jpg);
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg);
padding: 16px 16px 0px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i48.tinypic.com/2crap9t.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i45.tinypic.com/bevwo5.jpg)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}

o1
Go to customize your journal + select any Flexible Squares layout + hit 'Apply Theme'.

o2
Go to custom css. Be sure all the drop boxes are set to 'NO'.
Paste the code into the custom stylesheet box.

o3
Edit the sidebar contents here. Tags + headings + summaries + calender are set not to display: try keep the blurb small & the links no more than 6-ish (unless giving them short names).

o4
Credit darlingbones or ohbambi

o5
I will attempt to help as I can, I also rec. checking out s2flexisquares for more indepth aid.

style: flexible squares

Previous post Next post
Up