Current mood:	nostalgic
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:

Light:
/*---------------------------------------------------------------------------------------------- S2 FLEXIBLE SQUARES [ http://snubbly.livejournal.com ] -----------------------------------------------------------------------------------------------*/ body {background: #EEE url() fixed; text-align: center; color: #999; font-family: tahoma, sans-serif; font-size: 7pt; margin-top: 10px;} ::-moz-selection {color: #999; background: #EEE;} a, a:link, a:visited {color: #7BD042; text-decoration: none;} a:hover {color: #999;} /*---------------------------------------------------------------------------------------------- PAGE SET-UP -----------------------------------------------------------------------------------------------*/ #content {width: 650px; text-align: justify; margin: auto;} #maincontent {margin-left: 160px; background: #F3F3F3; border: 1px solid #E1DFDF; padding: 10px;} #sidebar {width: 140px; float: left; background: #F3F3F3; border: 1px solid #E1DFDF; padding: 5px;} #header, #footer {background: #F3F3F3; border: 1px solid #E1DFDF; padding: 8px; margin: 10px 0; text-align: center; font-weight: bold; text-transform: uppercase;} 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;} .title, .subtitle, .clearfoot, .clear {display: none;} #lj_controlstrip {text-transform: lowercase;} /*---------------------------------------------------------------------------------------------- ENTRIES -----------------------------------------------------------------------------------------------*/ .datesubject {text-transform: uppercase; font-weight: bold;} .subject {color: #7BD042;} .entry_text img {max-width: 350px; overflow: hidden;} .entry_text {margin: 10px 0;} .separator {height: 20px;} .currents {text-transform: lowercase;} .ljtags {padding-top: 10px; font-weight: bold; text-transform: lowercase;} h2 {padding-left: 30px; text-align: left; font-size: 7pt; text-transform: uppercase;} .ljtaglist {list-style-type: square;} .comments {text-align: right; clear: right;} .comments a {text-transform: lowercase;} .userpic {position: relative; float: right; background: #F3F3F3; margin-left: 10px; border: 1px solid #E1DFDF;} .userpicfriends {position: relative; float: right; margin-left: 10px; text-align: center; color: #7BD042; background-color: #FFF !important; font-family: tahoma, sans-serif; font-size: 7pt; padding: 3px; z-index: 15;} /*---------------------------------------------------------------------------------------------- SIDEBAR -----------------------------------------------------------------------------------------------*/ #sidebar .defaultuserpic {text-align: center;} #sidebar .defaultuserpic img {border: 1px solid #E1DFDF;} .calendar {width: 100%; text-align: center; line-height: 10px;} .sbarcalendar, .sbarcalendarposts {background: #EEE;} .sbartitle, .sbarbody, .sbarbody2 {padding: 0 5px;} ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;} li.sbartitle {padding: 0; list-style: none; margin: 10px 0; text-transform: uppercase; font-weight: bold;} /*---------------------------------------------------------------------------------------------- CALENDAR PAGE -----------------------------------------------------------------------------------------------*/ 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 {background: #EEE;} table.yeartable td.yearday {background: #EEE; text-align: center;} td.yearmonth {border-style: none;} input, textarea, option, button, select {font-family: tahoma, sans-serif; background: #FFF; border: 1px solid #F3F3F3; font-size: 7pt; color: #999; padding: 1px;} /*---------------------------------------------------------------------------------------------- COMMENTS PAGE [ paid/plus accounts ] -----------------------------------------------------------------------------------------------*/ .skiplinks {text-align: center; margin: 10px 0;} #postform img {display: none;} textarea.textbox {width: 95% !important;} .box {border: 0; padding: 10px; clear: none !important;} .datesubjectcomment {background: #F3F3F3; color: #999; padding: 5px; margin-top: 20px;} .userpiccomment {position: relative; top: -30px; left: 0px; border: 5px solid #F3F3F3; background: #F3F3F3; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;} .reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FFF; color: #999;} .commentreply {position: relative; margin: 10px; font-size: 7pt; font-family: tahoma, sans-serif; color: #999;} .commentbox {border: 1px solid #F3F3F3; margin: 10px; background: #FFF;} .commentboxpartial {border: 1px solid #F3F3F3; margin: 10px; background: #FFF;} .commentinfo {background: #FFF; 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: 700px; height: 0px; background: url() no-repeat;}

Dark:
/*---------------------------------------------------------------------------------------------- S2 FLEXIBLE SQUARES [ http://snubbly.livejournal.com ] -----------------------------------------------------------------------------------------------*/ body {background: #222 url() fixed; text-align: center; color: #999; font-family: tahoma, sans-serif; font-size: 7pt; margin-top: 10px;} ::-moz-selection {color: #999; background: #222;} a, a:link, a:visited {color: #7DE8FF; text-decoration: none;} a:hover {color: #FFF;} /*---------------------------------------------------------------------------------------------- PAGE SET-UP -----------------------------------------------------------------------------------------------*/ #content {width: 650px; text-align: justify; margin: auto;} #maincontent {margin-left: 160px; background: #2E2E2E; border: 1px solid #3C3C3C; padding: 10px;} #sidebar {width: 140px; float: left; background: #2E2E2E; border: 1px solid #3C3C3C; padding: 5px;} #header, #footer {background: #2E2E2E; border: 1px solid #3C3C3C; padding: 8px; margin: 10px 0; text-align: center; font-weight: bold; text-transform: uppercase;} 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;} .title, .subtitle, .clearfoot, .clear {display: none;} #lj_controlstrip {text-transform: lowercase;} /*---------------------------------------------------------------------------------------------- ENTRIES -----------------------------------------------------------------------------------------------*/ .datesubject {text-transform: uppercase; font-weight: bold;} .subject {color: #7DE8FF;} .entry_text img {max-width: 350px; overflow: hidden;} .entry_text {margin: 10px 0;} .separator {height: 20px;} .currents {text-transform: lowercase;} .ljtags {padding-top: 10px; font-weight: bold; text-transform: lowercase;} h2 {padding-left: 30px; text-align: left; font-size: 7pt; text-transform: uppercase;} .ljtaglist {list-style-type: square;} .comments {text-align: right; clear: right;} .comments a {text-transform: lowercase;} .userpic {position: relative; float: right; background: #2E2E2E; margin-left: 10px; border: 1px solid #3C3C3C;} .userpicfriends {position: relative; float: right; margin-left: 10px; text-align: center; color: #7DE8FF; background-color: #3A3A3A !important; font-family: tahoma, sans-serif; font-size: 7pt; padding: 3px; z-index: 15;} /*---------------------------------------------------------------------------------------------- SIDEBAR -----------------------------------------------------------------------------------------------*/ #sidebar .defaultuserpic {text-align: center;} #sidebar .defaultuserpic img {border: 1px solid #3C3C3C;} .calendar {width: 100%; text-align: center; line-height: 10px;} .sbarcalendar, .sbarcalendarposts {background: #333;} .sbartitle, .sbarbody, .sbarbody2 {padding: 0 5px;} ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;} li.sbartitle {padding: 0; list-style: none; margin: 10px 0; text-transform: uppercase; font-weight: bold;} /*---------------------------------------------------------------------------------------------- CALENDAR PAGE -----------------------------------------------------------------------------------------------*/ 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 {background: #333;} table.yeartable td.yearday {background: #333; text-align: center;} td.yearmonth {border-style: none;} input, textarea, option, button, select {font-family: tahoma, sans-serif; background: #3A3A3A; border: 1px solid #2E2E2E; font-size: 7pt; color: #999; padding: 1px;} /*---------------------------------------------------------------------------------------------- COMMENTS PAGE [ paid/plus accounts ] -----------------------------------------------------------------------------------------------*/ .skiplinks {text-align: center; margin: 10px 0;} #postform img {display: none;} textarea.textbox {width: 95% !important;} .box {border: 0; padding: 10px; clear: none !important;} .datesubjectcomment {background: #2E2E2E; color: #999; padding: 5px; margin-top: 20px;} .userpiccomment {position: relative; top: -30px; left: 0px; border: 5px solid #2E2E2E; background: #2E2E2E; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;} .reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #3A3A3A; color: #999;} .commentreply {position: relative; margin: 10px; font-size: 7pt; font-family: tahoma, sans-serif; color: #999;} .commentbox {border: 1px solid #2E2E2E; margin: 10px; background: #3A3A3A;} .commentboxpartial {border: 1px solid #2E2E2E; margin: 10px; background: #3A3A3A;} .commentinfo {background: #3A3A3A; 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: 700px; 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