Snubbly

Style: S2 Flexible Squares
Screen Resolution: 800x600 and higher
Browser Compatible: Firefox & Explorer
Header Compatible: Yes
Nav Bar Compatible: Yes
Plus Account/Ads: Yes

Note: Plus accounts will not look exactly the same due to adds.

1. Choose Journal Style: Apply any one of those Flexible Squares themes.

2. Sidebar: Customise it as you wish.

3. Custom CSS: Set all 3 dropdown boxes to No, copy and paste the code into the Custom stylesheet textbox:

Purple Layout:

/*------------------------------------------------------------------
 S2 Flexible Squares
 Layout by snubbly @ http://snubbly.livejournal.com
--------------------------------------------------------------------*/

body {background: #C3B9CD; text-align: center; color: #373737; font-family: arial, sans-serif; font-size: 8pt;}

::-moz-selection {color: #A391B7; background: #E7E0EE;}
a, a:link, a:visited {color: #8D77A5; letter-spacing: 1px; text-decoration: none;}
a:hover {color: #A391B7; background: #E7E0EE; border-bottom: 1px solid #FFF; letter-spacing: 1px; text-decoartion: none;}

#maincontent {margin-right: 190px;}
#sidebar {width: 180px; float: right;}
#content {width: 720px; text-align: justify; margin: 0 auto;}
#header {background: #E0D8E8; border: 1px solid #CAC4D0; text-align: center; font-weight: bold; text-transform: uppercase; margin: 10px 0;}
#content a {font-size: 6pt; text-transform: uppercase; font-family: small fonts; font-weight: normal;}
#content a:hover {font-size: 6pt; text-transform: uppercase; font-family: small fonts; font-weight: normal;}
#footer {margin-right: 190px; text-align: center; font-size: 9pt; clear: both; background: #E0D8E8; border: 1px solid #CAC4D0;
font-family: small fonts; font-size: 6pt; text-transform: uppercase; letter-spacing: 1px;}
.title, .subtitle, .clear, .clearfoot, #sidebar .defaultuserpic, h2 {display: none;}

.datesubject {text-transform: uppercase; margin-left: 110px;}
.date {text-align: right; font-family: small fonts; font-size: 6pt;}
.subcontent {background: #E0D8E8; border: 1px solid #CAC4D0; padding: 10px;}
.subject {font-weight: bold; line-height: 16px; font-size: 13pt; font-family: courier new;}
.entry_text {background: #FFF; border: 1px solid #DDD; min-height: 100px; padding: 5px; margin: 5px 0; margin-left: 110px;}
.entry_text img {max-width: 350px; overflow: hidden;}

.comments {text-align: right;}
.currents strong {font-size: 0; display: none;}
.currents {text-align: left; font-size: 6pt; text-transform: uppercase; font-family: small fonts;}
.currentlocation {background: url(http://img521.imageshack.us/img521/1223/houseof2.gif) no-repeat center left; padding-left: 15px; margin-left: 110px;}
.currentmood {background: url(http://img254.imageshack.us/img254/8960/moodfo4.gif) no-repeat center left; padding-left: 15px; margin-left: 110px;}
.currentmusic {background: url(http://img254.imageshack.us/img254/9500/musicxw8.gif) no-repeat center left; padding-left: 15px; margin-left: 110px;}

.ljtags a {color: #373737; font-weight: normal;}
.ljtags {padding-top: 20px; font-weight: bold; text-transform: lowercase;}
.ljtaglist {list-style-type: circle; font-size: 6pt; font-family: small fonts; text-transform: uppercase; letter-spacing: 1px; line-height: 20px;}
.userpicfriends {position: relative; float: left; text-align: center; background: #FFF !important; border: 1px solid #FFF; font-family: arial, sans-serif; font-size: 8pt; margin-top: 35px;}
.userpic {position: relative; float: left; border: 1px solid #FFF; margin-top: 35px;}

.sbarbody2 {margin-top: -13px; padding: 2px;}
.sbarbody, .sbarbody2 {background: #E0D8E8; border: 1px solid #CAC4D0; margin-bottom: 10px;}
.sbartitle {text-align: right; background: #D5CBE1; color: #8D77A5; font-weight: bold; text-transform: lowercase; letter-spacing: 1px;}
#sidebar_calendar a {font-family: small fonts; text-transform: uppercase; font-size: 6pt; font-weight: normal; text-align: center; letter-spacing: 1px;}
table.calendar {margin: 0 auto; width: 90%; font-family: small fonts; text-transform: uppercase; font-size: 6pt; letter-spacing: 1px;}
.sbarcalendarposts, .sbarcalendar {background: #ECE7F1;}

ul.sbarlist {padding: 0; margin: 0; list-style: none;}
li.sbaritem {padding: 0 2px; list-style: none;}
li.sbartitle {padding: 0 2px; list-style: none; margin: 0;}

.separator {height: 10px;}
ul.year li {display: inline; padding: 0 15px;}
.skiplinks {text-align: center; margin: 10px 0; background: #E0D8E8; border: 1px solid #CAC4D0; line-height: 20px;}
li.view, li.active {font-size: 6pt; font-family: small fonts; font-weight: normal; letter-spacing: 1px;}
ul.navfooter, ul.navheader {padding: 0; margin: 10px 0;}
ul.ljtaglist {margin: 0; padding-left: 15px; background: #E0D8E8; border: 1px solid #CAC4D0;}
ul.year {text-align: center; background: #E0D8E8; border: 1px solid #CAC4D0; line-height: 20px;}
ul.navheader li {display: inline; padding: 10px;}
ul.navheader li:hover {display: inline; padding: 10px;}
ul.navfooter li {display: inline; margin: 0 5px;}

table.yeartable {margin: 0 auto; width: 100%; background: #E0D8E8; border: 1px solid #CAC4D0;
font-size: 6pt; font-family: small fonts; text-transform: uppercase; letter-spacing: 1px;}
td.yearmonth {border-style: none; color: #8D77A5;}
table.yeartable td.yeardate, table.yeartable td.yearday {background: #ECE7F1;}
table.yeartable td.yearday {text-align: center; background: #ECE7F1;}

input, textarea, option, button, select {font-family: arial, sans-serif; background: #ECE7F1; border: 1px solid #C3B9CD; font-size: 8pt; color: #373737; letter-spacing: 1px; padding: 1px;}
option, button, select {font-family: arial, sans-serif; background: #ECE7F1; border: 1px solid #C3B9CD; font-size: 8pt; color: #373737; letter-spacing: 1px; padding: 0;}
textarea.textbox {width: 95% !important;}
#postform img {display: none;}

.datesubjectcomment {background: #E0D8E8; color: #373737; padding: 5px; margin-top: 20px; font-family: small fonts; font-size: 6pt; text-transform: uppercase; letter-spacing: 1px;}
.userpiccomment {position: relative; top: -30px; left: 0; border: 5px solid #E0D8E8; background: #E0D8E8; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.box {border-style: solid; border-width: 1px 0 0 0; border: #C3B9CD; padding: 10px; clear: left; clear: none !important;} 
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FDFDFD; color: #373737;}
.replytosubject {font-weight: bold;}

.commentreply {position: relative; margin: 10px; font-size: 8pt;  font-family: arial, sans-serif; color: #373737;}
.commentbox {border: 1px solid #C3B9CD; margin: 10px; background: #ECE7F1;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #8D77A5;}
.datesubjectcomment a:hover {color:  #A391B7;}
.commentboxpartial {border: 1px solid #C3B9CD; margin: 10px; background: #ECE7F1;}
.commentinfo {background: #ECE7F1; margin-top: 10px; width: 100%;}

/*---------------------------------------------------------------------------------
  Tiny Icons by http://famfamfam.com
------------------------------------------------------------------------------------*/
.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img410.imageshack.us/img410/5689/locksp5.png);}
.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img99.imageshack.us/img99/7119/keyyi6.png);}
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img410.imageshack.us/img410/5689/locksp5.png);}
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img99.imageshack.us/img99/7119/keyyi6.png);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img410.imageshack.us/img410/5689/locksp5.png);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img99.imageshack.us/img99/7119/keyyi6.png);}
.ljuser img {width: 0; height: 0; background-repeat: no-repeat; background-color: transparent;
background-image: url(http://img294.imageshack.us/img294/9362/userei1.png); padding: 16px 16px 0 0 !important;}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {background-color: transparent;
background-image: url(http://img294.imageshack.us/img294/9362/userei1.png); padding: 16px 16px 0 0 !important;}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {background-color:transparent;
background-image: url(http://img401.imageshack.us/img401/5836/groupcw8.png); padding: 16px 16px 0 0 !important;}

/*---------------------------------------------------------------------------------------------
 Add Your Own Header	-	edit your width, height and header url
-----------------------------------------------------------------------------------------------*/
.headerimage {position: relative; margin: 0 auto; width: 720px; height: 0px;
background: #E0D8E8 url('URL HERE') no-repeat;}

Blue Layout:

body {background: #C0D6E8; text-align: center; color: #373737; font-family: arial, sans-serif; font-size: 8pt;}

::-moz-selection {color: #C0D6E8; background: #EDF4F9;}
a, a:link, a:visited {color: #7CA4C6; letter-spacing: 1px; text-decoration: none;}
a:hover {color: #C0D6E8; background: #EDF4F9; border-bottom: 1px solid #FFF; letter-spacing: 1px; text-decoartion: none;}

#maincontent {margin-right: 190px;}
#sidebar {width: 180px; float: right;}
#content {width: 720px; text-align: justify; margin: 0 auto;}
#header {background: #D5E3EF; border: 1px solid #B8CCDC; text-align: center; font-weight: bold; text-transform: uppercase; margin: 10px 0;}
#content a {font-size: 6pt; text-transform: uppercase; font-family: small fonts; font-weight: normal;}
#content a:hover {font-size: 6pt; text-transform: uppercase; font-family: small fonts; font-weight: normal;}
#footer {margin-right: 190px; text-align: center; font-size: 9pt; clear: both; background: #D5E3EF; border: 1px solid #B8CCDC;
font-family: small fonts; font-size: 6pt; text-transform: uppercase; letter-spacing: 1px;}
.title, .subtitle, .clear, .clearfoot, #sidebar .defaultuserpic, h2 {display: none;}

.datesubject {text-transform: uppercase; margin-left: 110px;}
.date {text-align: right; font-family: small fonts; font-size: 6pt;}
.subcontent {background: #D5E3EF; border: 1px solid #B8CCDC; padding: 10px;}
.subject {font-weight: bold; line-height: 16px; font-size: 13pt; font-family: courier new;}
.entry_text {background: #FFF; border: 1px solid #DDD; min-height: 100px; padding: 5px; margin: 5px 0; margin-left: 110px;}
.entry_text img {max-width: 350px; overflow: hidden;}

.sbarbody2 {margin-top: -12px; padding: 2px;}
.sbarbody, .sbarbody2 {background: #D5E3EF; border: 1px solid #B8CCDC; margin-bottom: 10px;}
.sbartitle {text-align: right; background: #CDDEED; color: #7CA4C6; font-weight: bold; text-transform: lowercase; letter-spacing: 1px;}
#sidebar_calendar a {font-family: small fonts; text-transform: uppercase; font-size: 6pt; font-weight: normal; text-align: center; letter-spacing: 1px;}
table.calendar {margin: 0 auto; width: 90%; font-family: small fonts; text-transform: uppercase; font-size: 6pt; letter-spacing: 1px;}
.sbarcalendarposts, .sbarcalendar {background: #EDF4F9;}

ul.sbarlist {padding: 0; margin: 0; list-style: none;}
li.sbaritem {padding: 0 2px; list-style: none;}
li.sbartitle {padding: 0 2px; list-style: none; margin: 0;}

.separator {height: 10px;}
ul.year li {display: inline; padding: 0 15px;}
.skiplinks {text-align: center; margin: 10px 0; background: #D5E3EF; border: 1px solid #B8CCDC; line-height: 20px;}
li.view, li.active {font-size: 6pt; font-family: small fonts; font-weight: normal; letter-spacing: 1px;}
ul.navfooter, ul.navheader {padding: 0; margin: 10px 0;}
ul.ljtaglist {margin: 0; padding-left: 15px; background: #D5E3EF; border: 1px solid #B8CCDC;}
ul.year {text-align: center; background: #D5E3EF; border: 1px solid #B8CCDC; line-height: 20px;}
ul.navheader li {display: inline; padding: 10px;}
ul.navheader li:hover {display: inline; padding: 10px;}
ul.navfooter li {display: inline; margin: 0 5px;}

table.yeartable {margin: 0 auto; width: 100%; background: #D5E3EF; border: 1px solid #B8CCDC;
font-size: 6pt; font-family: small fonts; text-transform: uppercase; letter-spacing: 1px;}
td.yearmonth {border-style: none; color: #7CA4C6;}
table.yeartable td.yeardate, table.yeartable td.yearday {background: #EDF4F9;}
table.yeartable td.yearday {text-align: center; background: #EDF4F9;}

input, textarea, option, button, select {font-family: arial, sans-serif; background: #EDF4F9; border: 1px solid #C0D6E8; font-size: 8pt; color: #373737; letter-spacing: 1px; padding: 1px;}
option, button, select {font-family: arial, sans-serif; background: #EDF4F9; border: 1px solid #C0D6E8; font-size: 8pt; color: #373737; letter-spacing: 1px; padding: 0;}
textarea.textbox {width: 95% !important;}
#postform img {display: none;}

.datesubjectcomment {background: #D5E3EF; color: #373737; padding: 5px; margin-top: 20px; font-family: small fonts; font-size: 6pt; text-transform: uppercase; letter-spacing: 1px;}
.userpiccomment {position: relative; top: -30px; left: 0; border: 5px solid #D5E3EF; background: #D5E3EF; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.box {border-style: solid; border-width: 1px 0 0 0; border: #C0D6E8; padding: 10px; clear: left; clear: none !important;} 
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FDFDFD; color: #373737;}
.replytosubject {font-weight: bold;}

.commentreply {position: relative; margin: 10px; font-size: 8pt;  font-family: arial, sans-serif; color: #373737;}
.commentbox {border: 1px solid #C0D6E8; margin: 10px; background: #EDF4F9;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #7CA4C6;}
.datesubjectcomment a:hover {color:  #C0D6E8;}
.commentboxpartial {border: 1px solid #C0D6E8; margin: 10px; background: #EDF4F9;}
.commentinfo {background: #EDF4F9; margin-top: 10px; width: 100%;}

Adding a header
At the end of the CSS there is a code for you to add your own header.
I suggest making it 700px wide.

Modifying the layout
Change what you like, as long as you give credit for the original code.

Tiny icons are from famfamfam.

- Please credit

snubbly
- Questions? See the F.A.Q
- You can add me for updates

relaxed
flexible squares, layouts