flexible squares #2 untitled.

[comepaint]

Soo.

My second lj layout which I've coded at the weekend.




Live | img



details.

this layout works very fine with Firefox and Safari. Internet Explorer doesn't support the round edges, I don't support Internet Explorer (only if there were big problems :P)

Best view: 1200 x 800, Firefox 3

instructions

1) Click here to customize your layout.

2) Type in the search box 'Flexible Squares' and apply and apply either "Blue Grey" or "Black and White and Red All Over".

3) Edit your sidebar. These steps are important! Set everything regarding 'setup' to no, except the tags. Choose yes and set 'Display of tags in the sidebar' to 'Cloud'.

4) Click on Order. Choose Default Userpic, Blurb, Tags, Calendar, Calendar, Page Summary. Important is that you only choose 'Tags' one time, the other items aren't displayed anyway.

5) Go to Custom CSS. Set everything to No.

6) Paste in the 'Custom Stylesheet' box the following code.

code.

/* LAYOUT CODE BY LOOSEGRAPHICS @ ARCTICDESIGN. do not remove this */

body {
background-color: #E2DEDB;
text-align: center;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #5674b9;
text-decoration: none;
}

a:hover {
color: #7aa1f8;
text-decoration: underline;
}

p, td {
font-size: 11px;

}

blockquote {
font-family:Arial;
word-spacing:2px;
font-size:13px;
letter-spacing:-1px;
font-weight:bold;
text-transform:lowercase;
color:#1F1B1C;
line-height:16px;
width:60%;
padding:10px 10px 10px 20px;
border-top:10px solid #1F1B1C;
border-bottom:10px solid #1F1B1C;
margin-left:auto;
margin-right:auto;
-moz-opacity:0.7;
opacity:0.7;
}

blockquote:hover {
-moz-opacity:1.0;
opacity:1.0;
}

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

#content
{
width: 80%;
margin-left: auto; margin-right: auto;
background-color: #E2DEDB;

}

#maincontent {
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color:transparent;
color: #000000;

margin-right: 180px;
text-align: left;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 48px 48px 0 0;
background: url(http://i43.tinypic.com/6jldus.png);
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

width:50%;
margin-left:15%;
font-family: "Arial", sans-serif;
font-size:14px;
letter-spacing:-3px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color: #FFFFFF;
text-align: center;
}

#sidebar li.tagcloud a, #sidebar li.tagcloud a:link, #sidebar li.tagcloud a:visited {
font-family: "arial", sans-serif;
color: #FFFFFF;
text-transform:uppercase;
letter-spacing:-2px;
word-spacing:-2px;

-moz-opacity:0.8;
opacity:0.8;

}

div.ljtags {
color:#FFFFFF;
text-align:center;
padding-top:40px;
}

div.ljtags a:link, div.ljtags a:active, div.ljtags a:visited {
font-family: "arial black", sans-serif;
color: #000000;
text-transform:uppercase;
-moz-opacity:0.8;
opacity:0.8;
font-size:14px;
letter-spacing:-1px;
word-spacing:-2px;

}

div.ljtags a:hover {
-moz-opacity:1.0;
opacity:1.0;
text-decoration:none;
border-bottom:1px dotted #000000;
}

#sidebar li.tagcloud a:hover {
-moz-opacity:1.0;
opacity:1.0;
text-decoration:none;
}

ul.ljtaglist li {
font-family: "arial black", sans-serif;
color: #313030;
text-transform:uppercase;
font-size:24px;
letter-spacing:-1px;
word-spacing:-2px;

}

ul.ljtaglist {
list-style-type:none;
text-align:center;
line-height:400%;

}

ul.ljtaglist a, ul.ljtaglist a:active, ul.ljtaglist a:visited {
color:#313030;
-moz-opacity:0.8;
opacity:0.8;

}

h2 {
text-align:center;
text-transform:uppercase;
font-family: "arial black", sans-serif; color: #313030;
font-size:34px;
letter-spacing:-1px;
word-spacing:-2px;
-moz-opacity:0.4;
opacity:0.4;
border-bottom:1px dotted #313030;
padding-top:40px;
}

ul.ljtaglist a:hover {
-moz-opacity:1.0;
opacity:1.0;
text-decoration:none;
border-bottom:1px dotted #313030;
cursor:crosshair;
}

#header {
padding-top: 15px;
margin-top: 15px;

-moz-border-radius:40px;
-webkit-border-radius:40px;
background-color:#1F1B1C;
border:4px double #FFFFFF;
width:55%;
margin-left:13%;
font-family: "Arial", sans-serif;
font-size:28px;
letter-spacing:-2px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color: #FFFFFF;
text-align: center;

}
/** HERE YOU CAN ADD A HEADERIMAGE. **/
.headerimage {
position: relative;
width:WIDTH OF YOUR HEADER;
height: HEIGHT OF YOUR HEADER;
margin-left:21%;
margin-bottom:-10px;
background-image: url(URL OF YOUR HEADER);
background-repeat: no-repeat;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #5674b9;
}

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

/*title and subtitle*/
.title {
display:none;
}

.subtitle{
font-family: "Verdana", sans-serif;
font-size: 18px;
font-weight: normal;
top: 10px;
margin:4px;
}

/* header -- links to views; title of journal; subtitle of journal */

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

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

.subcontent {
-moz-border-radius:52px;
-webkit-border-radius:52px;
background-image:url(http://i41.tinypic.com/2hx5df4.png);
margin: 30px 0px -15px -10px;
}

.entry {
margin: 0px 110px 0px 0px;
padding: 5px 15px;
background-color: #fff;
color: #000000;
font-family: arial;
font-size: 11px;
text-align: left;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;
}

.userpic, .userpicfriends {
float:right;
position:relative;

text-align:center;
margin:7,5% 0;

background-color:#FFFFFF;
padding:10px;
}

.userpic a {
display:none;
}

.userpicfriends {
color:#FFFFFF;

}

.userpicfriends a {
padding-top:8px;
text-transform:lowercase;
}

.userpic img, .userpicfriends img {
-moz-border-radius-topright:40px;
-webkit-border-top-right-radius:40px;
}

.date {
line-height: 200%;
top: 5px;
color: #FFFFFF;
font-family: "trebuchet MS", sans-serif;
letter-spacing:3px;
margin-bottom:-6px;
font-size: 10px;
text-align:center;
-moz-opacity:0.7;
opacity:0.7;
}

.subject {
font-weight: bold;
padding:0;
color: #FFFFFF;
font-family: "Arial", sans-serif;
font-size:36px;
letter-spacing:-3px;
text-transform:uppercase;
text-align:center;

}

.subject a, .subject a:link, .subject a:visited {
color: #ffffff;
-moz-opacity:0.8;
opacity:0.8;
}

.subject a:hover {
-moz-opacity:1.0;
opacity:1.0;
text-decoration:none;
cursor:crosshair;
}

.datesubject {

padding: 5px;

margin: 0px 110px 0px 0px;
-moz-border-radius-topleft:40px;
-webkit-border-top-left-radius:40px;
}

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

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

.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
margin:10px;
}
.currentlocation {
display:none;
}
.currentmood {
background-image:url(http://i39.tinypic.com/2uogs93.png);
background-repeat:no-repeat;
padding-left:24px;
padding-bottom:4px;
padding-top:4px;
background-position:left;
}

.currentmood strong {
display:none;
}

.currentmusic strong {
display:none;
}

.currentmusic {
background-image:url(http://i42.tinypic.com/abs30y.png);
background-repeat:no-repeat;
padding-left:24px;
padding-bottom:4px;
padding-top:4px;
background-position:left;
}

.comments {
font-family: "Arial Black", sans-serif;
font-size: 28px;
color:#000000;
text-align: center;
padding: 0px 5px 0px 5px;
position: relative;
-moz-opacity:0.8;
opacity:0.8;

}

div.comments a, div.comments a:link, div.comments a:visited{
color: #000000;
-moz-opacity:0.6;
opacity:0.6;
}

div.comments a:hover {
color: #000000;
text-decoration: none;
-moz-opacity:1.0;
opacity:1.0;
cursor:crosshair;
}

.separator{
/* for formatting separators between entries */
height: 35px;
}

.defaultuserpic {
display:none;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
float:left;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #5674b9;
}

div#sidebar a:hover {
color: #7aa1f8;
text-decoration: none;
}

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

.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #d4dce8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem
{
padding-left: 15px;
list-style: none;
}

li.sbartitle
{
display: none;
}

#footer {

padding-top: 15px;
padding-bottom:10px;
margin-top: 15px;

-moz-border-radius:40px;
-webkit-border-radius:40px;
background-color:#1F1B1C;
border:4px double #FFFFFF;
width:55%;
margin-left:13%;
font-family: "Arial", sans-serif;
font-size:28px;
letter-spacing:-2px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color: #FFFFFF;

text-align: center;
}

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

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

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

ul.year {
text-align: center;
padding-bottom: 10px;
text-transform:uppercase;
font-family: "arial black", sans-serif; color: #313030;
font-size:34px;
letter-spacing:-1px;
word-spacing:-2px;
-moz-opacity:0.4;
opacity:0.4;
border-bottom:1px dotted #313030;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
border:1px #FFFFFF dotted;
}

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

table.yeartable td.yeardate a:link, table.yeartable td.yeardate a:active, table.yeartable td.yeardate a:visited {
font-weight:bold;
font-size:14px;

}

table.yeartable td.yeardate a:hover {
border:1px dotted;
cursor:crosshair;
}

table.yeartable td.yearday {
background-color: #313030;
text-align: center;
text-transform:lowercase;
letter-spacing:2px;
font-weight:bold;
}

td.yearmonth {
border-style: none;
font-family:Arial Black;
font-size:16px;
font-family: "arial black", sans-serif; color: #313030;
letter-spacing:-1px;

}

.datesubjectcomment {
background-color: #1F1B1C;
padding: 5px;
margin-top: 20px;
color:#FFFFFF;
}

.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
background-image:url(http://i40.tinypic.com/dljk8x.png);
background-repeat: no-repeat;

top: -30px;
left: 0px;
padding: 13px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;

}

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
font-family:Arial Black;
font-size:13px;
text-transform:lowercase;
letter-spacing:-1px;
}

.box td {
font-family:Arial Black;
font-size:13px;
text-transform:lowercase;
letter-spacing:-1px;

}

textarea {
background-color: #d4dce8;
color: #000000;
margin-left:40%;
background-color:#1f1b1c;
color:#FFFFFF;
padding:16px;
font-family:Arial;
word-spacing:2px;
font-size:13px;
letter-spacing:-1px;
font-weight:bold;
text-transform:lowercase;
text-align:justify;
margin-top:10px;
margin-bottom:10px;
}

input {

background-color:#1f1b1c;
color:#FFFFFF;
padding:16px;
font-family:Arial;
word-spacing:2px;
font-size:13px;
letter-spacing:-1px;
font-weight:bold;
text-transform:lowercase;
text-align:justify;
margin-top:10px;
margin-bottom:10px;

}

textarea.textbox {
width: 90% !important;
margin-left:0;

}

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-family:Arial Black;
letter-spacing:-1px;
text-align:right;
font-size:13px;
color:#1F1B1C;
text-transform:uppercase;
}

.commentbox {

border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}

.commentbox a:link, .commentbox a:active, .commentbox a:visited {

font-size:14px;
}
.commentbox a:hover {
color:#E2DEDB;
text-decoration:none;
border-bottom:1px dotted #E2DEDB;
}

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

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

.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #d4dce8;
}

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

.skiplinks {
text-align: center;
}
.skiplinks a, .skiplinks a:link, .skiplinks a:active, .skiplinks a:visited {
text-align: center;
font-size:14px;
text-transform:lowercase;
letter-spacing:-1px;
}

.skiplinks a:hover {
text-decoration:none;
border-bottom:1px dotted #1f1b1c;
}

.clear {
height: 15px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i39.tinypic.com/dokufs.png)!important;
background-repeat: no-repeat!important;
padding:5px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i42.tinypic.com/mc50du.png)!important;
background-repeat: no-repeat!important;
padding:5px;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;

padding:13px 13px 4px 5px !important;
}

img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {

padding: 0 0 16px 16px !important;
background: url(http://i44.tinypic.com/14d0wmw.png);
width: 0px;
height: 0px;

}

img[src="http://l-stat.livejournal.com/img/btn_edit.gif"] {

padding: 0 0 16px 16px !important;
background: url(http://i40.tinypic.com/1r2b14.png);
width: 0px;
height: 0px;
}

img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
padding: 0 0 16px 16px !important;
background: url(http://i44.tinypic.com/245ilb7.png);
width: 0px;
height: 0px;
}

img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"] {
padding: 0 0 16px 16px !important;
background: url(http://i39.tinypic.com/zl96b9.png);
width: 0px;
height: 0px;
}

img[src="http://l-stat.livejournal.com/img/btn_track.gif"], img[src="http://l-stat.livejournal.com/img/btn_tracking.gif"] {
padding: 0 0 16px 16px !important;
background: url(http://i44.tinypic.com/257najq.png);
width: 0px;
height: 0px;
}

img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
padding: 0 0 16px 16px !important;
background: url(http://i39.tinypic.com/ydzwh.jpg);
width: 0px;
height: 0px;
}

img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"] {
padding: 0 0 16px 16px !important;
background: url(http://i42.tinypic.com/fmthmp.png);
width: 0px;
height: 0px;
}

div.ContextualPopup div.Inner {
background:transparent!important;
color: #FFFFFF!important;
border:none;
padding:10px;
width: 250px;
font-family:trebuchet ms, georgia;
text-align:justify;
}

div.ContextualPopup .Content {
padding:7px 10px 7px 10px;
margin-right:80px;
line-height: 1.4;
background:#1F1B1C;
border:1px solid #cccccc;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #f07c00 !important;
}

div.ContextualPopup .Relation {
letter-spacing:1px;
border-bottom: 1px dotted #cccccc;
margin-bottom:4px;
padding-bottom:4px;
}

problems?

do you have any problems? just comment, I'll try to help you!

if you want to add a header, just search for this:

.headerimage {
position: relative;
width:WIDTH OF YOUR HEADER;
height: HEIGHT OF YOUR HEADER;
margin-left:21%;
margin-bottom:-10px;
background-image: url(URL OF YOUR HEADER);
background-repeat: no-repeat;
}

credit.

some icons are by http://dryicons.com
tiny icons are by http://www.famfamfam.com

please do not claim the layout as yours and credit me.

have fun!