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:

Light Layout:

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

body {background: #E9E9E9 url(http://img249.imageshack.us/img249/5850/bgcg1.png); text-align: center;
color: #9A9A9A; font-family: verdana, sans-serif; font-size: 8.5pt;}

::-moz-selection {color: #FF84A5; background: #FDFDFD;}

a, a:link, a:visited {color: #FF84A5; font-size: 9pt; text-decoration: none;}
a:hover {color: #FFBBD0; font-size: 9pt; text-decoartion: none;}

.title, .subtitle {display: none;}
#sidebar .defaultuserpic {text-align: center;}
#content {width: 700px; text-align: justify; margin: 0 auto;}
#sidebar {width: 200px; float: right; background: #F3F3F3; border: 1px solid #E1DFDF;}
.defaultuserpic img {background: #FFF; border: 1px solid #DDD; padding: 5px; margin-top: 10px;}
#maincontent {margin-right: 215px; background: #F3F3F3; border: 1px solid #E1DFDF; padding: 10px;}
#footer {margin-right: 215px; text-align: center; font-size: 9pt; clear: both; text-transform: lowercase;}
#header {text-align: right; font-weight: bold; text-transform: uppercase;}

.datesubject {margin: 10px 0; text-align: left; text-transform: uppercase; font-weight: bold;}
.subject, h2 {color: #FF84A5; text-transform: uppercase; font-family: courier new; font-size: 14pt; line-height: 14pt;}
.entry_text {background: #FFF; border: 1px solid #DDD; min-height: 145px; padding: 5px;}
.entry_text img {max-width: 310px; overflow: hidden;}

.comments {text-align: right;}
.currents strong {font-size: 0;}
.comments a {text-transform: lowercase;}
.currents {text-align: left; font-size: 9pt; text-transform: lowercase;}
.currentlocation {background: url(http://img156.imageshack.us/img156/5543/locationze6.gif) no-repeat center left; padding-left: 15px;}
.currentmood {background: url(http://img237.imageshack.us/img237/1343/moodjf2.gif) no-repeat center left; padding-left: 15px;}
.currentmusic {background: url(http://img246.imageshack.us/img246/1260/musicwd3.gif) no-repeat center left; padding-left: 15px;}

.ljtags {padding-top: 20px; font-weight: bold; text-align: left; color: #FF84A5; text-transform: lowercase;}
.ljtags a {color: #9A9A9A; font-weight: normal;}
ul.ljtaglist {margin: 0; padding-left: 15px;}
.ljtaglist {list-style-type: circle;}

.userpic {position: relative; float: right; background: #FFF; border: 1px solid #DDD; margin: 50px 10px 10px 10px; padding: 5px;}
.userpicfriends {position: relative; float: right; text-align: center; color: #FF84A5; background: #FFF !important; border: 1px solid #DDD;
font-family: verdana, sans-serif; font-size: 8.5pt; margin: 50px 10px 10px 10px; padding: 5px;}

#sidebar_calendar a {font-family: small fonts; text-transform: uppercase; font-size: 7px; font-weight: normal; text-align: center;}
.sbarcalendar, .sbarcalendarposts {background: #FFF; border: 1px solid #DDD; padding: 3px; font-family: small fonts; text-transform: uppercase; font-size: 7px;}

ul.sbarlist {padding: 0; margin: 0; list-style: none;}
li.sbaritem {padding: 0; list-style: none;}
li.sbartitle {padding: 0; list-style: none; margin: 10px 0; text-transform: uppercase; font-weight: bold;}

.clearfoot {clear: both;}
ul.year li {display: inline;}
.separator {height: 35px;}
.skiplinks {text-align: center;}
li.view, li.active {font-size: 9pt;}
.sbartitle, .sbarbody, .sbarbody2 {padding: 0 5px;}
ul.navfooter, ul.navheader {padding: 0; margin: 10px 0;}
ul.year {text-align: center; padding-bottom: 40px;}
ul.navheader li {display: inline; padding: 10px; background: #F3F3F3; border: 1px solid #E1DFDF;}
ul.navheader li:hover {display: inline; padding: 10px; background: #FDFDFD; border: 1px solid #E1DFDF; cursor: pointer;}
ul.navfooter li {display: inline; margin: 0 5px;}

table.yeartable {margin: 0 auto;}
td.yearmonth {border-style: none;}
table.yeartable td.yeardate, table.yeartable td.yearday {background: #FFF; border: 1px solid #DDD;}
table.yeartable td.yearday {text-align: center; background: #FFF; border: 1px solid #DDD;}

input, textarea, option, button, select {font-family: verdana, sans-serif; background: #FFF; border: 1px solid #DDD; font-size: 8.5pt; color: #9A9A9A; padding: 1px;}
option, button, select {font-family: verdana, sans-serif; background: #FFF; border: 1px solid #DDD; font-size: 8.5pt; color: #9A9A9A; padding: 0;}
textarea.textbox {width: 95% !important;}
#postform img {display: none;}

.datesubjectcomment {background: #F3F3F3; color: #9A9A9A; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0; border: 5px solid #F3F3F3; background: #F3F3F3; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.box {border-style: solid; border-width: 1px 0 0 0; border: #E9E9E9; 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: #9A9A9A;}
.replytosubject {font-weight: bold;}

.commentreply {position: relative; margin: 10px; font-size: 8.5pt;  font-family: verdana, sans-serif; color: #9A9A9A;}
.commentbox {border: 1px solid #E9E9E9; margin: 10px; background: #FDFDFD;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #FF84A5;}
.datesubjectcomment a:hover {color:  #FFBBD0;}
.commentboxpartial {border: 1px solid #E9E9E9; margin: 10px; background: #FDFDFD;}
.commentinfo {background: #FDFDFD; margin-top: 10px; width: 100%;}

/*---------------------------------------------------------------------------------
  Locked icon by http://_excentric_.livejournal.com
  User & Community icons by http://graphicsbyjulz.livejournal.com
------------------------------------------------------------------------------------*/

.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 15px 11px 0 0 !important;
background: url(http://i147.photobucket.com/albums/r304/snubicons/icon/lock.gif);}
.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 15px 11px 0 0 !important;
background: url(http://i147.photobucket.com/albums/r304/snubicons/icon/lock.gif);}
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 15px 11px 0 0 !important;
background: url(http://i147.photobucket.com/albums/r304/snubicons/icon/lock.gif);}
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 15px 11px 0 0 !important;
background: url(http://i147.photobucket.com/albums/r304/snubicons/icon/lock.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 15px 11px 0 0 !important;
background: url(http://i147.photobucket.com/albums/r304/snubicons/icon/lock.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 15px 11px 0 0 !important;
background: url(http://i147.photobucket.com/albums/r304/snubicons/icon/lock.gif);}
.ljuser img {width: 0; height: 0; background-repeat: no-repeat; background-color: transparent;
background-image: url(http://img214.imageshack.us/img214/7308/userkb9.gif); padding: 13px 13px 0 0 !important;}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {background-color: transparent;
background-image: url(http://img214.imageshack.us/img214/7308/userkb9.gif); padding: 13px 13px 0 0 !important;}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {background-color:transparent;
background-image: url(http://img528.imageshack.us/img528/1387/commrf2.gif); padding: 13px 13px 0 0 !important;}

/*---------------------------------------------------------------------------------------------
 Add Your Own Header	-	edit your width, height and header url
-----------------------------------------------------------------------------------------------*/

.headerimage {position: relative; margin: 0 auto; width: 700px; height: 0px;
background: #F3F3F3 url('URL HERE') no-repeat;}

Dark Layout:

body {background: #000 url(http://img175.imageshack.us/img175/2296/bg2vn7.png); text-align: center;
color: #9A9A9A; font-family: verdana, sans-serif; font-size: 8.5pt;}

::-moz-selection {color: #FF84A5; background: #6C6C6C;}

a, a:link, a:visited {color: #FF84A5; font-size: 9pt; text-decoration: none;}
a:hover {color: #FFBBD0; font-size: 9pt; text-decoartion: none;}

.title, .subtitle {display: none;}
#sidebar .defaultuserpic {text-align: center;}
#content {width: 700px; text-align: justify; margin: 0 auto;}
#sidebar {width: 200px; float: right; background: #2B2B2B; border: 1px solid #1A1A1A;}
.defaultuserpic img {background: #6C6C6C; border: 1px solid #525252; padding: 5px; margin-top: 10px;}
#maincontent {margin-right: 215px; background: #2B2B2B; border: 1px solid #1A1A1A; padding: 10px;}
#footer {margin-right: 215px; text-align: center; font-size: 9pt; clear: both; text-transform: lowercase;}
#header {text-align: right; font-weight: bold; text-transform: uppercase;}

.datesubject {margin: 10px 0; text-align: left; text-transform: uppercase; font-weight: bold;}
.subject, h2 {color: #FF84A5; text-transform: uppercase; font-family: courier new; font-size: 14pt; line-height: 14pt;}
.entry_text {background: #6C6C6C; color: #E7E7E7; border: 1px solid #525252; min-height: 145px; padding: 5px;}
.entry_text img {max-width: 310px; overflow: hidden;}

.userpic {position: relative; float: right; background: #6C6C6C; border: 1px solid #525252; margin: 50px 10px 10px 10px; padding: 5px;}
.userpicfriends {position: relative; float: right; text-align: center; color: #E7E7E7; background: #6C6C6C !important; border: 1px solid #525252;
font-family: verdana, sans-serif; font-size: 8.5pt; margin: 50px 10px 10px 10px; padding: 5px;}

#sidebar_calendar a {font-family: small fonts; text-transform: uppercase; font-size: 7px; font-weight: normal; text-align: center;}
.sbarcalendar, .sbarcalendarposts {background: #6C6C6C; border: 1px solid #525252; color: #E7E7E7; padding: 3px; font-family: small fonts; text-transform: uppercase; font-size: 7px;}

.clearfoot {clear: both;}
ul.year li {display: inline;}
.separator {height: 35px;}
.skiplinks {text-align: center;}
li.view, li.active {font-size: 9pt;}
.sbartitle, .sbarbody, .sbarbody2 {padding: 0 5px;}
ul.navfooter, ul.navheader {padding: 0; margin: 10px 0;}
ul.year {text-align: center; padding-bottom: 40px;}
ul.navheader li {display: inline; padding: 10px; background: #2B2B2B; border: 1px solid #1A1A1A;}
ul.navheader li:hover {display: inline; padding: 10px; background: #353535; border: 1px solid #1A1A1A; cursor: pointer;}
ul.navfooter li {display: inline; margin: 0 5px;}

table.yeartable {margin: 0 auto;}
td.yearmonth {border-style: none;}
table.yeartable td.yeardate, table.yeartable td.yearday {background: #6C6C6C; border: 1px solid #525252; color: #E7E7E7;}
table.yeartable td.yearday {text-align: center; background: #6C6C6C; border: 1px solid #525252; color: #E7E7E7;}

input, textarea, option, button, select {font-family: verdana, sans-serif; background: #6C6C6C; border: 1px solid #525252; font-size: 8.5pt; color: #E7E7E7; padding: 1px;}
option, button, select {font-family: verdana, sans-serif; background: #6C6C6C; border: 1px solid #525252; font-size: 8.5pt; color: #E7E7E7; padding: 0;}
textarea.textbox {width: 95% !important;}
#postform img {display: none;}

.datesubjectcomment {background: #2B2B2B; color: #9A9A9A; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0; border: 5px solid #2B2B2B; background: #2B2B2B; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.box {border-style: solid; border-width: 1px 0 0 0; border: #000; padding: 10px; clear: left; clear: none !important;} 
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #6C6C6C; color: #E7E7E7;}
.replytosubject {font-weight: bold;}

.commentreply {position: relative; margin: 10px; font-size: 8.5pt;  font-family: verdana, sans-serif; color: #E7E7E7;}
.commentbox {border: 1px solid #000; margin: 10px; background: #6C6C6C; color: #E7E7E7;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #FF84A5;}
.datesubjectcomment a:hover {color:  #FFBBD0;}
.commentboxpartial {border: 1px solid #000; margin: 10px; background: #6C6C6C; color: #E7E7E7;}
.commentinfo {background: #6C6C6C; color: #E7E7E7; margin-top: 10px; width: 100%;}

.headerimage {position: relative; margin: 0 auto; width: 700px; height: 0px;
background: #2B2B2B url('URL HERE') no-repeat;}

Rainbow Layout:

body {background: #000 url(http://img76.imageshack.us/img76/2261/bg2aerocharmqh2.png) fixed; text-align: center;
color: #9A9A9A; font-family: verdana, sans-serif; font-size: 8.5pt;}

::-moz-selection {color: #A8F53B; background: #6C6C6C;}
b {color: #C26FF1; font-size: 7pt; text-transform: uppercase;}
i {color: #CCFF51; font-size: 7pt; text-transform: uppercase;}
s {color: #FF6551; font-size: 7pt; text-transform: uppercase;}
u {color: #51C4FF; font-size: 7pt; text-transform: uppercase;}

a, a:link, a:visited {color: #F53B85; font-size: 9pt; text-decoration: none;}
a:hover {color: #F53B85; font-size: 9pt; text-decoartion: none;}

.title, .subtitle {display: none;}
#sidebar .defaultuserpic {text-align: center;}
#content {width: 700px; text-align: justify; margin: 0 auto;}
#sidebar {width: 200px; float: right; background: #2B2B2B; border: 1px solid #1A1A1A;}
.defaultuserpic img {background: #6C6C6C; border: 1px solid #525252; padding: 5px; margin-top: 10px;}
#maincontent {margin-right: 215px; background: #2B2B2B; border: 1px solid #1A1A1A; padding: 10px;}
#footer {margin-right: 215px; text-align: center; font-size: 9pt; clear: both; text-transform: lowercase; color: #000;}
#header {text-align: right; font-weight: bold; text-transform: uppercase;}
#header a {color: #F4B13C;}
#sidebar a {color: #4BDFDA;}

.datesubject {margin: 10px 0; text-align: left; text-transform: uppercase; font-weight: bold;}
.subject, h2 {color: #F53B85; text-transform: uppercase; font-family: courier new; font-size: 14pt; line-height: 14pt;}
.entry_text {background: #6C6C6C; color: #E7E7E7; border: 1px solid #525252; min-height: 145px; padding: 5px;}
.entry_text img {max-width: 310px; overflow: hidden;}

.ljtags {padding-top: 20px; font-weight: bold; text-align: left; color: #F53B85; text-transform: lowercase;}
.ljtags a {color: #E7E7E7; font-weight: normal;}
ul.ljtaglist {margin: 0; padding-left: 15px;}
.ljtaglist {list-style-type: circle;}

#sidebar_calendar a {font-family: small fonts; text-transform: uppercase; font-size: 7px; font-weight: normal; text-align: center;}
.sbarcalendar, .sbarcalendarposts {background: #6C6C6C; border: 1px solid #525252; color: #E7E7E7; padding: 3px; font-family: small fonts; text-transform: uppercase; font-size: 7px;}

.clearfoot {clear: both;}
ul.year li {display: inline;}
.separator {height: 35px;}
.skiplinks {text-align: center;}
li.view, li.active {font-size: 9pt;}
.sbartitle, .sbarbody, .sbarbody2 {padding: 0 5px;}
ul.navfooter, ul.navheader {padding: 0; margin: 10px 0;}
ul.year {text-align: center; padding-bottom: 40px;}
ul.navheader li {display: inline; padding: 10px; background: #2B2B2B; border: 1px solid #1A1A1A;}
ul.navheader li:hover {display: inline; padding: 10px; background: #353535; border: 1px solid #1A1A1A; cursor: pointer;}
ul.navfooter li {display: inline; margin: 0 5px;}

.commentreply {position: relative; margin: 10px; font-size: 8.5pt;  font-family: verdana, sans-serif; color: #E7E7E7;}
.commentbox {border: 1px solid #000; margin: 10px; background: #6C6C6C; color: #E7E7E7;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #F53B85;}
.datesubjectcomment a:hover {color:  #F53B85;}
.commentboxpartial {border: 1px solid #000; margin: 10px; background: #6C6C6C; color: #E7E7E7;}
.commentinfo {background: #6C6C6C; color: #E7E7E7; margin-top: 10px; width: 100%;}

.headerimage {position: relative; margin: 0 auto; width: 700px; height: 0px;
background: #2B2B2B url('URL HERE') no-repeat;}

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 _excentric_, graphicsbyjulz & hello-love.
Background in rainbow layout from aerocharm.

- Please credit

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

calm
flexible squares, layouts