Current mood:	groggy
Entry tags:	layout: flexible squares, type: layouts

Layout
Style: S2 Flexible Squares
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 of those Flexible Squares themes, except the 'Circular' ones.

2. Sidebar: Customize it as you wish.

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

Brown / Blue:
/*---------------------------------------------------------------------------------------------- S2 FLEXIBLE SQUARES [ http://snubbly.livejournal.com ] -----------------------------------------------------------------------------------------------*/ body {background: #483D36 url() fixed; color: #666; font-family: tahoma, sans-serif; font-size: 7pt; text-align: center;} ::-moz-selection {color: #483D36; background: #F7F4EB;} a, a:link, a:active, a:visited {color: #483D36; text-transform: lowercase; text-decoration: none; cursor:default;} a:hover {color: #666; text-transform: lowercase; text-decoration: none; cursor: default;} /*---------------------------------------------------------------------------------------------- PAGE SET-UP -----------------------------------------------------------------------------------------------*/ #content {width: 750px; margin: auto;} #maincontent {background: #EDE7D3; margin-right: 200px; text-align: justify; padding: 10px;} #sidebar {background: #D3EDED; width: 170px; float: right; text-align: justify; margin-top: -21px; padding: 10px;} #header, #footer {background: #D3EDED; width: auto; text-align: center; text-transform: uppercase; padding: 5px 0; margin-right: 200px;} #header a, #footer a {text-transform: uppercase; padding: 5px;} #lj_controlstrip {text-transform: lowercase;} .title, .subtitle, .clearfoot, .clear {display: none;} ul.navheader, ul.navfooter {padding: 0; margin: 0;} ul.navheader li, ul.navfooter li {display: inline; padding: 0 10px;} .entry ul li, .entry ol li {padding-left: 5px; margin-left: 10px;} /*---------------------------------------------------------------------------------------------- ENTRIES -----------------------------------------------------------------------------------------------*/ .entry {margin-top: 10px; text-align: justify;} .entry_text img {max-width: 325px; overflow: hidden;} .entry_text {margin-bottom: 10px;} .date {text-transform: uppercase; margin-top: 10px;} .subject {font-family: courier new; font-size: 15pt; font-weight: bold; letter-spacing: -1pt; color: #B8B198; text-transform: lowercase;} .currents {text-transform: lowercase; margin-bottom: 10px;} .ljtags {font-weight: bold; text-transform: lowercase; margin-top: 10px;} .ljtags a {font-weight: normal;} .comments {color: #EDE7D3; text-align: center; margin: 5px 0; clear: left;} .comments a {text-transform: uppercase; padding: 5px;} .separator {margin: 30px 0; border-top: 1px solid #F7F4EB;} h2 {padding-left: 25px; font-family: courier new; font-size: 15pt; letter-spacing: -1pt; color: #B8B198; text-transform: lowercase;} .ljtaglist {list-style-type: square;} .userpic, .userpicfriends {position: relative; float: left; background: #F7F4EB !important; border: 0; text-align: center; padding: 5px; margin: 0 10px 10px 0;} .userpicfriends font {font-family: tahoma; font-size: 7pt; color: #483D36;} /*---------------------------------------------------------------------------------------------- SIDEBAR -----------------------------------------------------------------------------------------------*/ #sidebar .defaultuserpic {text-align: center;} #sidebar .defaultuserpic img {background: #F7F4EB; border: 0; padding: 5px;} .calendar {width: 100%; text-align: center; line-height: 10px;} .sbarcalendar, .sbarcalendarposts {background: #F7F4EB; border: 1px solid #F7F4EB;} .sbartitle, .sbarbody, .sbarbody2 {padding: 0;} ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;} li.sbartitle {list-style: none; margin: 10px 0; font-family: courier new; font-size: 13pt; font-weight: bold; letter-spacing: -1pt; text-transform: lowercase;} li.view {text-transform: uppercase;} /*---------------------------------------------------------------------------------------------- CALENDAR PAGE -----------------------------------------------------------------------------------------------*/ input, textarea, select, option, button {font-family: tahoma; font-size: 7pt; color: #483D36; background: #F7F4EB; border: 1px solid #F7F4EB;} ul.year {text-align: center; padding-bottom: 10px;} ul.year li {display: inline; padding: 0 10px;} table.yeartable {margin: auto;} table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #F7F4EB; padding: 5px;} table.yeartable td.yearday {background: #B8B198; padding: 5px; text-align: center;} td.yearmonth {border: 0;} /*---------------------------------------------------------------------------------------------- COMMENTS PAGE [ paid/plus accounts ] -----------------------------------------------------------------------------------------------*/ .skiplinks {text-align: center; margin: 10px 0;} #postform img {display: none;} .box {border: 0; clear: none !important;} textarea.textbox {width: 95% !important;} .datesubjectcomment {background: #B8B198; padding: 5px; margin-top: 20px;} .userpiccomment {position: relative; top: -30px; left: 0; background: #F7F4EB; border: 1px solid #F7F4EB; padding: 5px; margin: 10px 10px -20px 10px; float: left;} .reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #F7F4EB; color: #666;} .commentreply {position: relative; margin: 10px; font-size: 7pt; font-family: tahoma, sans-serif; color: #666;} .commentbox {background: #F7F4EB; border: 1px solid #F7F4EB; margin: 10px;} .commentboxpartial {background: #F7F4EB; border: 1px solid #F7F4EB; margin: 10px;} .commentinfo {background: #F7F4EB; margin-top: 10px; width: 100%;} .replytosubject {font-weight: bold;} /*---------------------------------------------------------------------------------------------- TINY ICONS [ http://famfamfam.com ] -----------------------------------------------------------------------------------------------*/ img[src*="icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/locked.png);} img[src*="icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/private.png);} img[src*="icon_groups.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/groupcustom.png);} img[src*="btn_edit.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/pencil.png);} img[src*="btn_del.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/delete.png);} img[src*="btn_scr.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/locked.png);} img[src*="btn_unscr.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/public.png);} img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"]{display: none;} img[src*="userinfo.gif"] {width: 0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat; background-image: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/user.png) !important;} img[src*="community.gif"] {width:0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat; background-image: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/group.png) !important;} /*---------------------------------------------------------------------------------------------- ADD HEADER IMAGE [ edit the width, height and header url ] -----------------------------------------------------------------------------------------------*/ .headerimage {position: relative; margin: auto; width: 750px; height: 0px; background: url() no-repeat;}

Rose:
/*---------------------------------------------------------------------------------------------- S2 FLEXIBLE SQUARES [ http://snubbly.livejournal.com ] -----------------------------------------------------------------------------------------------*/ body {background: #6D6163 url() fixed; color: #666; font-family: tahoma, sans-serif; font-size: 7pt; text-align: center;} ::-moz-selection {color: #6D6163; background: #FDFDFD;} a, a:link, a:active, a:visited {color: #6D6163; text-transform: lowercase; text-decoration: none; cursor:default;} a:hover {color: #666; text-transform: lowercase; text-decoration: none; cursor: default;} /*---------------------------------------------------------------------------------------------- PAGE SET-UP -----------------------------------------------------------------------------------------------*/ #content {width: 750px; margin: auto;} #maincontent {background: #F7EBED; margin-right: 200px; text-align: justify; padding: 10px;} #sidebar {background: #E9C9CE; width: 170px; float: right; text-align: justify; margin-top: -21px; padding: 10px;} #header, #footer {background: #E9C9CE; width: auto; text-align: center; text-transform: uppercase; padding: 5px 0; margin-right: 200px;} #header a, #footer a {text-transform: uppercase; padding: 5px;} #lj_controlstrip {text-transform: lowercase;} .title, .subtitle, .clearfoot, .clear {display: none;} ul.navheader, ul.navfooter {padding: 0; margin: 0;} ul.navheader li, ul.navfooter li {display: inline; padding: 0 10px;} .entry ul li, .entry ol li {padding-left: 5px; margin-left: 10px;} /*---------------------------------------------------------------------------------------------- ENTRIES -----------------------------------------------------------------------------------------------*/ .entry {margin-top: 10px; text-align: justify;} .entry_text img {max-width: 325px; overflow: hidden;} .entry_text {margin-bottom: 10px;} .date {text-transform: uppercase; margin-top: 10px;} .subject {font-family: courier new; font-size: 15pt; font-weight: bold; letter-spacing: -1pt; color: #DBABB3; text-transform: lowercase;} .currents {text-transform: lowercase; margin-bottom: 10px;} .ljtags {font-weight: bold; text-transform: lowercase; margin-top: 10px;} .ljtags a {font-weight: normal;} .comments {color: #F7EBED; text-align: center; margin: 5px 0; clear: left;} .comments a {text-transform: uppercase; padding: 5px;} .separator {margin: 30px 0; border-top: 1px solid #FDFDFD;} h2 {padding-left: 25px; font-family: courier new; font-size: 15pt; letter-spacing: -1pt; color: #DBABB3; text-transform: lowercase;} .ljtaglist {list-style-type: square;} .userpic, .userpicfriends {position: relative; float: left; background: #FAEDEC !important; border: 0; text-align: center; padding: 5px; margin: 0 10px 10px 0;} .userpicfriends font {font-family: tahoma; font-size: 7pt; color: #6D6163;} /*---------------------------------------------------------------------------------------------- SIDEBAR -----------------------------------------------------------------------------------------------*/ #sidebar .defaultuserpic {text-align: center;} #sidebar .defaultuserpic img {background: #FAEDEC; border: 0; padding: 5px;} .calendar {width: 100%; text-align: center; line-height: 10px;} .sbarcalendar, .sbarcalendarposts {background: #FAEDEC; border: 1px solid #FAEDEC;} .sbartitle, .sbarbody, .sbarbody2 {padding: 0;} ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;} li.sbartitle {list-style: none; margin: 10px 0; font-family: courier new; font-size: 13pt; font-weight: bold; letter-spacing: -1pt; text-transform: lowercase;} li.view {text-transform: uppercase;} /*---------------------------------------------------------------------------------------------- CALENDAR PAGE -----------------------------------------------------------------------------------------------*/ input, textarea, select, option, button {font-family: tahoma; font-size: 7pt; color: #6D6163; background: #FDFDFD; border: 1px solid #FDFDFD;} ul.year {text-align: center; padding-bottom: 10px;} ul.year li {display: inline; padding: 0 10px;} table.yeartable {margin: auto;} table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #FDFDFD; padding: 5px;} table.yeartable td.yearday {background: #E9C9CE; padding: 5px; text-align: center;} td.yearmonth {border: 0;} /*---------------------------------------------------------------------------------------------- COMMENTS PAGE [ paid/plus accounts ] -----------------------------------------------------------------------------------------------*/ .skiplinks {text-align: center; margin: 10px 0;} #postform img {display: none;} .box {border: 0; clear: none !important;} textarea.textbox {width: 95% !important;} .datesubjectcomment {background: #E9C9CE; padding: 5px; margin-top: 20px;} .userpiccomment {position: relative; top: -30px; left: 0; background: #FAEDEC; border: 1px solid #FAEDEC; padding: 5px; margin: 10px 10px -20px 10px; float: left;} .reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FAEDEC; color: #666;} .commentreply {position: relative; margin: 10px; font-size: 7pt; font-family: tahoma, sans-serif; color: #666;} .commentbox {background: #FAEDEC; border: 1px solid #FAEDEC; margin: 10px;} .commentboxpartial {background: #FAEDEC; border: 1px solid #FAEDEC; margin: 10px;} .commentinfo {background: #FAEDEC; margin-top: 10px; width: 100%;} .replytosubject {font-weight: bold;} /*---------------------------------------------------------------------------------------------- TINY ICONS [ http://famfamfam.com ] -----------------------------------------------------------------------------------------------*/ img[src*="icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/locked.png);} img[src*="icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/private.png);} img[src*="icon_groups.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/groupcustom.png);} img[src*="btn_edit.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/pencil.png);} img[src*="btn_del.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/delete.png);} img[src*="btn_scr.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/locked.png);} img[src*="btn_unscr.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/public.png);} img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"]{display: none;} img[src*="userinfo.gif"] {width: 0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat; background-image: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/user.png) !important;} img[src*="community.gif"] {width:0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat; background-image: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/group.png) !important;} /*---------------------------------------------------------------------------------------------- ADD HEADER IMAGE [ edit the width, height and header url ] -----------------------------------------------------------------------------------------------*/ .headerimage {position: relative; margin: auto; width: 750px; height: 0px; background: url() no-repeat;}

Adding a background & header
Look for url() in the code, there's one at the start for the background, and one at the end for the header. Copy/paste your graphics url in between the (brackets) and change the width/height of the header if needed.

Modifying the layout
Change as much as you like, although I would still appreciate 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