LJ Layout - Controlled Chaos in Style (Flexible Squares)

[erotopia37564]

I originally made this layout for the upcomming K8 layout contest but then I realized it didn't really fit... a community theme if it makes any sense. It looks like it'd do better for a personal journal.  This is made using flexible squares for the S2 style system. It should work with all account levels and all images have been hosted on Tinypic.com, so if you don't like that you can always host the images on your own server.




Click on the pic for a full size preview.

This is the CSS code. If you do not want a topbar, find this code:

#sidebar {
width: 710px;
padding: 10px;

and replace with this:

#sidebar {
display: none;
width: 710px;
padding: 10px;

/* BY: Minty_Peach -- (http://minty_peach.livejournal.com) Code edited and altered by Ladymercury (http://lady_mercury.livejournal.com) style -- Flexible Squares / s2 account type: Free & Paid accounts DO NOT REMOVE THIS SECTION */ BODY { margin-top: 0px; margin-bottom: 0px; background-color: #f5e7c2; background-image: url('http://i36.tinypic.com/2cr7yw2.jpg'); background-repeat: repeat; background-position: top-left; background-attachment: scroll; text-align: left; font-size: 7pt; color: #8e8e8e; font-family: "Verdana", sans-serif; } a, a:link, a:visited { font-family: "Verdana" Helvetica, sans-serif; color: #222222; text-decoration: none; text-transform: uppercase; } a:hover{ font-family: "Verdana" Helvetica, sans-serif; color: #999; } blockquote { margin: 0px 20px 0px 20px; padding: 13px; color: #777777; font-size: 7pt; border: 1px solid #d7b791; background: #f8e9c2; text-align: justify; } p, td { font-size: 7pt; } code, kbd, pre, tt { font-family: monospace; } #content { width: 730px; background-color: #EEEEEE; background-image: url('http://i33.tinypic.com/mi030o.jpg'); margin-left: auto; margin-right: auto; } #maincontent { margin: 0px 0px 0px 0px; } #sidebar { width: 710px; padding: 10px; background-color: #403528; background-image: url('http://i34.tinypic.com/rkd6k8.jpg'); background-repeat: repeat; background-position: top-left; color: #FFFFFF; font-family: "verdana" Helvetica, sans-serif; font-size: 7pt; line-height: 14pt; text-align: justify; float: center; } /**************************************************** HEADER LINKS - NOT THE HEADERIMAGE **************************************************/ #header { width: auto; margin: 0 0 0px 0; padding-top: 10px; text-align: center; background-color: #403528; background-image: url('http://i34.tinypic.com/rkd6k8.jpg'); background-repeat: repeat; background-position: top-left; color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; } div#header a, div#header a:link, div#header a:visited { color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } div#header a:hover { color: #333333; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } ul.navheader { padding: 0; margin: 0; } ul.navheader li { display: inline; list-style: none; padding: 0; } div#header li.view { color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; padding: 5px; } /******************************************** FOOTER LINKS ********************************************/ #footer { width: auto; margin: 0 0 0px 0; padding-top: 10px; padding-bottom: 20px; text-align: center; background-color: #403528; background-image: url('http://i33.tinypic.com/mi030o.jpg'); background-repeat: repeat; background-position: top-left; color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; } div#footer a, div#footer a:link, div#footer a:visited { color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } div#footer a:hover { color: #222222; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } div#footer li.viewing { color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: both; } /************************************************************* TITLE AND SUBTITLE ************************************************************/ .title { display: none; font-size: 1pt; letter-spacing: 2pt; line-height: 0pt; } .subtitle { display: none; font-size: 1pt; letter-spacing: 2pt; line-height: 0pt; } /*********************************************** SIDEBAR LINKS, COLORS, FONTS, CALENDAR, ETC. ******************************************/ div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #f3e0c1; text-transform: uppercase; } div#sidebar a:hover { color: #999; } .defaultuserpic { text-align: center; border-color: 10px solid transparent; } .sbarheader { padding: 0 5px 0 5px; } .sbarbody { padding: 0 3px 0 3px; } .sbarbody2 { padding: 0 6px 0 6px; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { padding: 1px; border: 1px solid #ddd; background: transparent; text-align: right; font-family: "Verdana", Helvetica, sans-serif; color: #999999; font-size: 7pt; } .sbarcalendarposts { padding: 1px; border: 1px solid #ddd; background: #dddddd; text-align: right; font-family: "Verdana", Helvetica, sans-serif; color: #222222; font-size: 7pt; } ul.sbarlist { margin-left: 0px; list-style: none; padding-left: 0px; } li.sbaritem { margin: 2px 3px 2px 3px; padding: 2px 3px 2px 3px; list-style: none; background-color: transparent; background-image: url(''); background-repeat: repeat; border-bottom: 1px #BABABA dotted; } li.sbaritem:hover { background-color: #EDB53B; color: #FFFFFF; background-image: url(''); background-repeat: repeat; } li.sbartitle { list-style: none; margin-bottom: 2px; margin-top: 10px; text-align: left; font-weight: normal; padding-left: 1px; padding-bottom: 2px; border-bottom: 1px dashed #BBBBBB; background: url('') 0px 0px no-repeat; font-size: 16pt; text-transform: lowercase; letter-spacing: -1px; color: #EDB53B; } ul.ljtaglist li{ padding: 0px; margin: 5px; list-style: decimal-leading-zero; list-style-position: outside; } /*********************************************** TAGS PAGE LAYOUT ******************************************/ .ljtaglist { list-style-type: none; padding: 0px; margin: -1px 2px 0px 2px; margin-left: 70px; width: 50%; text-transform: lowercase; text-align: left; } .ljtaglist li { border-bottom: 1px solid #cccccc; padding: 5px 2px 5px 2px; color: #888888; } H2 { margin: 30px 0px 10px 90px; text-align: left; padding: 2px 2px 2px 10px; line-height: 12px; font-weight: normal; font-style: italic; font-size: 12px; text-transform: lowercase; font-family: arial; color: #888888; background: url('') 0px 2px no-repeat; } /*********************************************** ENTRY, TAGS LIST, SUB CONTENT, EXTRA ******************************************/ ul.ljtaglist { color: #bbb; font-family: "Tahoma", Helvetica, sans-serif; font-size: 8pt; padding: 8px 8px 8px 12px; text-align: left; margin-right: auto; margin-left: auto; padding: 35px; } .subcontent { padding: 30px; background-color: #EEEEEE; background-image: url('http://i33.tinypic.com/mi030o.jpg'); } .entry{ margin: 10px; padding: 5px; color: #3E4F57; font-family: "verdana" Helvetica, sans-serif; font-size: 7pt; line-height: 14pt; text-align: justify; } .entry ul li { list-style: decimal-leading-zero; list-style-position: outside; } .entry ol li { list-style: decimal-leading-zero; list-style-position: outside; } /*********************************************** USERPICS IN THE MAIN ENTRIES AND FRIEND PAGES ******************************************/ .userpic { display: none; position: relative; float: left; padding: 10px; margin-right: 15px; z-index: 15; border: 1px solid #888888; background-color: #eeeeee; } .userpicfriends { position: relative; float: left; padding: 5px; margin-right: 20px; z-index: 15; background-color: #FFFFFF !important; text-align: center; background-image: url('http://i34.tinypic.com/34xhoxi.jpg'); font-family: "Verdana", sans-serif; font-size: 7pt; } .userpicfriends font { color: #333333 !important; text-transform: lowercase; } .userpicfriends br { display: block; } /*********************************************** DATE, SUBJECT, LJ TAGS, COMMENTS ******************************************/ .date{ text-align: left; font-weight: normal; padding-bottom: 3px; padding-left: 13px; color: #777777; font-family: "arial" Helvetica, sans-serif; font-size: 7pt; text-transform: lowercase; background: url('http://i31.tinypic.com/2yzk1sp.png') 0px -1px no-repeat; } .subject { text-align: left; font-weight: bold; padding-bottom: 5px; color: #444444; font-family: "arial" Helvetica, sans-serif; font-size: 12pt; border-bottom: 1px solid #bbbbbb; text-transform: lowercase; } .subject a, .subject a:link, .subject a:visited { color: #222222; text-transform: lowercase; } .subject a:hover { color: #999; } .datesubject { padding-top: 15px; } .currents, .currentmood, .currentmusic { font-family: arial; font-size: 7pt; } .currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong { color: #333333; padding-left: 13px; font-size: 7pt; text-transform: lowercase; margin-top: 5px; font-family: "arial" Helvetica, sans-serif; background: url('http://i12.tinypic.com/6ylchtw.png') 0px 0px no-repeat; } .ljtags { margin-top: 35px; color: #333333; padding-left: 13px; text-transform: lowercase; font-family: "arial" Helvetica, sans-serif; background: url('http://i6.tinypic.com/6yvykg3.png') 0px 3px no-repeat; } .ljtags a, .ljtags a:link, .ljtags a:visited { color: #222222; text-transform: none; } .currentlocation a, .currentlocation a:link, .currentlocation a:visited { color: #222222; text-transform: lowercase; } .currentlocation a:hover, .ljtags a:hover { color: #666666; text-transform: lowercase; text-decoration: none; } .comments { text-align: right; font-weight: bold; color: #444444; font-family: "arial" Helvetica, sans-serif; font-size: 7pt; text-transform: lowercase; letter-spacing: -1px; padding: 5px; position: relative; top: 10px; } div.comments a, div.comments a:link, div.comments a:visited { color: #444444; font-size: 10pt; padding: 5px; text-transform: lowercase; } div.comments a:hover { color: #bbbbbb; padding: 5px; font-size: 10pt; text-transform: lowercase; } /*********************************************** ARCHIVE PAGE/CALENDAR ******************************************/ ul.year{ text-align: center; padding: 10px 10px 10px 10px; border: 0px solid #bbb; } ul.year li { color: #888888; display: inline; } table.yeartable { margin-left: auto; margin-right: auto; padding: 03px; border: 0px solid #444; } table.yeartable td.yeardate, table.yeartable td.yearday { color: #888888; border: 0px solid #333333; } table.yeartable td.yearday { background: #cccccc; text-align: center; } td.yearmonth { color: #999999; border-style: none; } /*********************************************** HEADER IMAGE ******************************************/ .headerimage { position: relative; width: 730px; height: 290px; margin-left: auto; margin-right: auto; margin-bottom: 0px; background-image: url('http://i34.tinypic.com/2v3r2o4.jpg'); background-repeat: no-repeat; background-position: center; } .separator { height: 0px; } /*********************************************** COMMENT PAGES ******************************************/ .clear { display: none; height: 15px; } .skiplinks { text-align: center; padding: 10px; color: #888888; background-color: #EEEEEE; background-image: url('http://i33.tinypic.com/mi030o.jpg'); } .datesubjectcomment { text-align: left; font-weight: bold; padding: 12px; color: #444444; font-family: "arial" Helvetica, sans-serif; font-size: 10pt; border: 1px solid #bbbbbb; text-transform: lowercase; background-color: #dddddd; } .userpiccomment { position: relative; top: -30px; margin: 10px 10px -20px 10px; z-index: 15; float: left; padding: 17px; background-image: url('http://i13.tinypic.com/8ap83uq.png'); background-repeat: no-repeat; background-position: top-left; } .box { border-style: solid; border-width: 1px 0px 0px 0px; border-color: #cccccc; padding: 10px; clear: right; } input, textarea { font-size: 8pt; margin: 3px 3px; padding: 3px; color: #444444; background: #B5C5F4; text-align: justify; } textarea.textbox{ width: 95% !important; } .reply{ position: relative; margin: 5px; padding: 10px; text-align: left; font-family: "tahoma"; font-size: 10px; line-height: 125%; color: #222222; } .replytosubject { font-weight: bold; } .commentreply { position: relative; margin: 10px; font-size: 10px; font-family: "tahoma"; color: #666666; } .commentbox { border-color: #cccccc; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #777777; text-transform: lowercase; } .datesubjectcomment a:hover { color: #999999; } .commentboxpartial { border-color: #cccccc; border-width: 1px; border-style: dotted; padding: 10px; margin: 10px; } .commentinfo { margin-top: 10px; width: 100%; } /******************** TINY USER PICS **********************/ .subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; padding: 12px 13px 0px 0px !important; background: url(http://img246.imageshack.us/img246/4863/locked2bw6.gif); } .subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; padding: 12px 13px 0px 0px !important; background: url(http://img246.imageshack.us/img246/4863/locked2bw6.gif); } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; /* so that IE users will still see an image */ background-image: url(http://img367.imageshack.us/img367/497/notesk4.gif); padding: 14px 14px 0 2px !important; } .ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] { background-color:transparent; background-image: url(http://img367.imageshack.us/img367/497/notesk4.gif); padding: 14px 14px 0 2px !important; } .ljuser img[src="http://stat.livejournal.com/img/community.gif"] { background-color:transparent; background-image: url(http://img367.imageshack.us/img367/1403/teevee1lu5.png); padding: 14px 14px 0 2px !important; } /* background of entire strip */ #lj_controlstrip { background-image: none; background-color: #413529; } /* text color */ #lj_controlstrip td, #lj_controlstrip_statustext { color: #e6e0d0; } /* link color */ #lj_controlstrip a { color: #f5e7c2; } /* border between elements */ #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login { border-right: 1px solid #413529;

Below is the code to put in your topbox

Talk about yourself here :D

• LINK • LINK • LINK • LINK

To install on your journal is pretty simple. Copy the CSS code and paste it in the Custom CSS section. Select No for Use Layout's Stylesheet and Use Layout Stylesheet when including custom stylesheet. Select Yes for use external stylesheets. Click save.

Then go to Sidebar and make sure everything is off except for the Blurb section. Alter the code to your liking and then copy and paste it into the empty field. Save.

If you have any questions, feel free to post it here. Enjoy guys!