UsernameEmailRegionInterestAOL IMICQ IDYahoo! IDMSN IDJabber

layout tutorial!
Directions & Codes for Flexible Squares layouts as seen on cheergirl, etc.


Go to your Manage Styles page and create a new style. Name it Flexible Squares or whatever you want.


Click the drop-downs as shown (language=English or whatever floats your boat, layout=other) and enter the proper layout code number (7628). Then click on "change":


Don't enter anything in the next set of drop-down options. Just click "save changes":


Click on "use" next to the new layout you have just created.


Go back to the basic customize page. Click the option to customize your theme. Click the link for Custom CSS.

Set all the drop-downs to "no" and paste the following code into the box.

/*------------------------------ eriea's just as quiet when i leave ((flexible squares; basic, plus and paid; milou veronica)) -------------------------------*/ body { background: url() #242B24 repeat fixed 0 0; text-align: center; color: #242B24; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 10pt; margin: 0px;} .headerimage {position: relative; background: url(HEADER IMAGE LINK GOES HERE); width: 600px; height: 300px; background-repeat: no-repeat;margin-left: auto;margin-right: auto;margin-bottom: 0px;} #content{ color: #666666; width: 600px; margin-left: auto; margin-right: auto; margin-top: 0px; border-width: 0px; padding: 0px;} #maincontent { padding: 0px; margin-top: 10px; text-align: justify; } #sidebar { padding: 0 0 15px; width: auto; text-align: left; color: #ffffff; font-size: 9pt; border: 1px solid #4F7B7F; border-top: none; background-color: #78ABAF; } /*-------------------HEADER-----------------------*/ #header { font-family: Avant Garde,"Century Gothic",Arial,Tahoma,"Verdana",sans-serif; margin: 10px 0px 0px; border: 1px solid #4F7B7F; border-bottom: none; background-color: #78ABAF; text-align: center; font-size: 15pt; letter-spacing: -1px; text-transform: uppercase; color: #ffffff; padding:10px; } div#header a, div#header a:link, div#header a:visited { color: #; text-transform: uppercase; } div#header a:hover { } div#header li.view { } ul.navheader{ padding: 0px; margin: 0px; display:inline;} ul.navheader li {margin: 0px 2px 0px 2px; list-style-type: none; display:inline;} .title {display:none; padding-bottom: 4px; margin: 0px; text-align: right;font-size: 9pt; letter-spacing: 3px;} .subtitle{display:none; text-align: right;font-size: 8pt; color: #999999; letter-spacing: 3px;} /*-------------------ENTRIES-----------------------*/ .subcontent { min-height: 190px; margin-right:0px; border: 1px solid #cccccc; background-color: #ffffff; background: url(http://i482.photobucket.com/albums/rr181/lenalayout/composition_white2-1.png); background-repeat: repeat;} .date { text-transform: uppercase; color: #888888; font-size: 8pt; } .subject { font-family: Avant Garde,"Century Gothic",Arial,Tahoma,"Verdana",sans-serif; background-color: transparent ; letter-spacing: -1px; font-size: 14pt; text-transform: ; line-height: 100%; color: #C7DBE6; font-weight:; } .subject a, .subject a:link, .subject a:visited {text-decoration: bold;} .datesubject {padding: 15px 5px 5px 10px; text-align: right;} .entry { margin: 0px; padding: 25px; text-align: justify; line-height: 1.75; } .entry_text { margin-bottom: 0px;} .entry ul li {padding-left: 5px;margin-left: 15px;} .entry ol li{padding-left: 5px;margin-left: 15px;} /*---------------------------USERPICS----------------------------*/ .userpic { position: relative; float: right; padding: 0px; background-color: #; margin: 15px ; z-index: 15; border: 15px solid #E4E2E3;} .userpicfriends { border: 0px solid #dddddd; position: relative; background-color: transparent !important; float: right; padding: 3px; margin: 10px; text-align: right; font-size: 7pt; z-index: 15;} .userpicfriends img {border: 0px;padding: px; background-color: #; border: 15px solid #E4E2E3;margin-bottom: 4px; } .userpicfriends a font {color: #aaaaaa;} /*--------------------------COMMENT BAR-------------------------*/ .comments {text-align: right; text-transform:uppercase; padding: 0px 14px 0px 2px ; position: relative; font-size: 10pt; color: #888888; background: transparent url(http://i35.tinypic.com/j0wi7n.png) no-repeat scroll 100% 50%; margin-top: 10px;} .comments:hover {background-image: url(http://i38.tinypic.com/2gt58au.png);} div.comments a, div.comments a:visited, div.comments a:link { padding: 3px; color: #78ABAF; } .separator{height: 25px;} /*-------------------------CURRENTS AND TAGS-------------------------------------*/ .ljtags {text-align: right; padding: 2px 14px 2px 2px ; margin-top: 67px; position: relative; text-transform: lowercase; font-size: 9pt; color: #888888; background: transparent url(http://i33.tinypic.com/346rzp5.png) no-repeat scroll 100% 50%;} .ljtags:hover {background-image: url(http://i37.tinypic.com/2mcsfh0.png);} .currents {text-align: right; margin-top:0px; padding: 0px; text-transform: lowercase; font-size: 8pt; color: #646464;} .currents strong {font-weight: normal; text-decoration: none; color: #888888; } .currentlocation {padding: 2px 14px 2px 2px; background: transparent url(http://i33.tinypic.com/346rzp5.png) no-repeat scroll 100% 50%; } .currentmood {padding:2px 14px 2px 2px; background: transparent url(http://i33.tinypic.com/346rzp5.png) no-repeat scroll 100% 50%;} .currentgroups {padding: 2px 14px 2px 2px; background: transparent url(http://i33.tinypic.com/346rzp5.png) no-repeat scroll 100% 50%; } .currentmusic {padding: 2px 14px 2px 2px; background: transparent url(http://i33.tinypic.com/346rzp5.png) no-repeat scroll 100% 50%; } .currentlocation:hover { background-image: url(http://i37.tinypic.com/2mcsfh0.png);} .currentmood:hover { background-image: url(http://i37.tinypic.com/2mcsfh0.png);} .currentgroups:hover { background-image: url(http://i37.tinypic.com/2mcsfh0.png);} .currentmusic:hover { background-image: url(http://i37.tinypic.com/2mcsfh0.png);} /*----------------------TAG PAGE------------------------------*/ h2 {background-color: #ffffff; padding: 10px 10px 10px 30px; font-size: 10pt; font-family: ; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; margin: 0px 0px 0px 0px; } .ljtaglist { background-color: #ffffff;ext-align: center; margin: 0px 0px 0px 0px; padding: 30px; padding: 25px; font-size:10px; list-style:none;} /*---------------------COMMENT PAGE-----------------------------*/ .box { text-align: left; margin-bottom:1px; padding: 0px; clear: left;} .datesubjectcomment {text-align: left; color: #999999; margin-top: 0px; } .userpiccomment { position: relative; padding: 0px; border: 2px solid #eeeeee; left: 0px; margin: 0 10px 10px 0; z-index: 15; float: left;} textarea.textbox {width: 100% !important;} .reply { border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.25;} .replytosubject {letter-spacing:2px; font-weight: bold;} .commentreply { min-height: 85px; text-align: left; position: relative; margin: 10px 10px 10px 20px;} .commentbox { border: 1px solid #dddddd; background-color: #ffffff; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px;} .commentbox:hover, .commentboxpartial:hover {border-color: #cccccc;} .commentboxpartial {border: 1px solid #687C8E; background-color: #ffffff; padding: 10px; margin: 10px;} .commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;} .skiplinks {text-align: right; margin: 0px; font-family: ; padding: 10px; font-size: 8pt; letter-spacing: 1px; color: #dcdcdc; } /*------------------------SIDEBAR-----------------------------------------*/ .defaultuserpic { display:none; text-align: center; margin:0px; padding:0px;} .defaultuserpic img {padding: 0px; border: 15px solid #eeeeee; width:70px; height: 70px; margin-top: 5px; margin-right: 10px; float: left; } .sbarheader {padding: 0px 5px 0px 5px;} .sbarbody {padding: 0px 5px 0px 5px; } .sbarbody2 {padding: 0px 15px 0px 5px; text-align: center; margin-bottom: 10px; font-family:pea girly girls script; font-size:14px;} ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;} li.sbaritem{ padding: 2px 0px 2px 12px; display: inline; background: transparent url(http://i35.tinypic.com/zirszr.png) scroll no-repeat 0 50%; margin:2px;} li.sbaritem:hover {border-color: #dddddd;} li.sbartitle{display:none; text-transform: uppercase; padding: 8px; font-family: Impact, Georgia, Times New Roman, Book Antiqua, serif; color: #777777;} #sidebar_linklist {text-transform: uppercase; text-align: center; } #sidebar_summary { display:none; } #sidebar_tags {display:none;} #sidebar_calendar {display:none;} /*---------------------FOOTER----------------------------------*/ #footer { background-color: #; font-family: ; width: auto; padding: 5px; text-align: center; text-transform: uppercase; font-size: 8pt; letter-spacing: -1px; z-index: 100; clear: both; } ul.navfooter{ padding: 0px; margin: 0px;} ul.navfooter li {display:inline; list-style: none; margin: 0 5px 0 5px;} div#footer li.viewing {color: #555555;} div#footer a, div#footer a:link, div#footer a:visited {padding: 3px; display:inline; color: #aaaaaa; } div#footer a:hover { color:#bbbbbb; } .clearfoot {clear: both;} /*-----------------------ARCHIVE PAGE--------------------------------*/ ul.year { margin: 0px; background-color: #ffffff; text-align: center; padding: 20px;} ul.year li {display: inline;} table.yeartable { background-color: #ffffff; margin-left: auto; margin-right: auto; padding: 30px; width: 100%;} table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #eeeeee;} table.yeartable td.yearday { background-color: #dddddd; text-align: center;} td.yearmonth {border-style: none;} .clear {display:none; height: 8px;} /*------------MINI ICONS BY FUGUE-------------*/ .subject img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 10px 10px 0px 0px !important; background-repeat: no-repeat; background: url(http://i33.tinypic.com/9k868p.png); background-position: center left; } .subject img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 10px 10px 0px 0px !important; background: url(http://i38.tinypic.com/ibgpra.png); background-position: center left; } img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i33.tinypic.com/20a84r5.png); } .ljuser img { width: 0; height: 0; background: transparent url(http://i33.tinypic.com/2vkevyg.png) no-repeat center left; vertical-align: baseline !important; padding: 10px 10px 0 2px !important; } .ljuser img[src*="userinfo.gif"] { background: transparent url(http://i33.tinypic.com/2vkevyg.png) no-repeat center left; padding: 10px 10px 0 2px !important; } .ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i35.tinypic.com/2elftpw.jpg); padding: 10px 10px 0 2px !important; background-position: center left; } .ljuser img[src*="syndicated.gif"] {background-color:transparent; background-image: url(http://i35.tinypic.com/dndlae.png); padding: 10px 10px 0 2px !important; background-position: center left; } .ljuser img[src*="newsinfo.gif"] {background-color:transparent; background-image: url(http://i35.tinypic.com/34epchj.png); padding: 10px 10px 0 2px !important; background-position: center left; } .ljuser img[src*="partnercomm.gif"] {background-color:transparent; background-image: url(http://i36.tinypic.com/zwgg8z.png); padding: 10px 10px 0 2px !important; background-position: center left; } .ljuser img[src*="sponcomm.gif"] {background-color:transparent; background-image: url(http://i38.tinypic.com/2po12zd.png); padding: 10px 10px 0 2px !important; background-position: center left; } .Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px; } img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i37.tinypic.com/aaes6x.png) no-repeat scroll 0 0; } img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i36.tinypic.com/o55ohd.png) no-repeat scroll 0 0; } img[src*="btn_unscr.gif"] { height: 0px; width: 0px;padding: 0px 0px 10px 10px !important; background: url(http://i38.tinypic.com/289akuw.png) no-repeat scroll 0 0; } img[src*="btn_freeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i34.tinypic.com/111mt95.png) no-repeat scroll 0 0; } img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i34.tinypic.com/b8tob8.png) no-repeat scroll 0 0; } img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i35.tinypic.com/rarebq.png) no-repeat scroll 0 0; } img[src*="btn_tracking.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://img92.imageshack.us/img92/1661/04ap9.png) no-repeat scroll 0 0; } img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i38.tinypic.com/21ci7h5.jpg) no-repeat scroll 0 0; } img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i34.tinypic.com/fnfg9d.png) no-repeat scroll 0 0; } img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i38.tinypic.com/2qurnd0.png) no-repeat scroll 0 0; } .box img[src*="userinfo.gif"]{ height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i33.tinypic.com/2vkevyg.png) no-repeat scroll 0 0; } img[src*="none.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i33.tinypic.com/2eehj6c.png) no-repeat scroll 0 0; } img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i38.tinypic.com/2w3azv5.png) no-repeat scroll 0 0; } img[src*="pencil.gif"], img[src*="btn_edit.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i35.tinypic.com/2emepo0.png) no-repeat scroll 0 0; } /*-----------------CONTEXTUAL POP-UP-----------------*/ div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; } div.ContextualPopup div.Inner { color: #555555 !important;border: 1px solid #111111; background-color: #000000 !important; padding: 4px; width: 250px;} div.ContextualPopup .Userpic { padding: 7px; margin-left: 0px; border: 1px solid #111111; background-color: #222222;} div.ContextualPopup .Content { padding: 5px; margin: 4px 0px 4px 4px;} div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #555555 !important;} div.ContextualPopup .Relation { text-transform: uppercase; font-family: Georgia, Times New Roman, Book Antiqua, serif; font-size: 9pt; letter-spacing:2px;} /*--------------- MISC-------------- */ table#lj_controlstrip td {background-color: #222222; background-image: url(); color: #666666;border: solid 1px #111111; border-left: none; } #lj_controlstrip a { color: #999999; } #lj_controlstrip_statustext { color: #666666; } form#qrform table {border-width: 0px !important;} img:hover { filter: alpha(opacity=90); moz-opacity: .90; opacity: .90; } img { filter: alpha(opacity=100); moz-opacity: 1; opacity: 1; } b, u { color: #444444;} #sidebar b, #sidebar u {color: #8EB8CF;} i, s { color: #999999;} #sidebar i, #sidebar s {color: #E0EAEF;} p, td {} blockquote { padding:15px; border: 1px solid #eeeeee; background: transparent url() repeat; color:#8c8c8c; } code { display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;} q { display:block; padding: 5px; border: 1px solid #2d2d2d;} q { display:block; padding: 5px; border: 1px dotted #f1f1f1; font-style: italic;} kbd, pre, tt {font-family: monospace;} input, textarea { font-family:Arial, Tahoma, sans-serif; font-size: 9pt; background: transparent url() repeat; border: 1px solid #eeeeee; color: #999999;} /*-------------------COLORS-----------------------*/ a, a:link, a:visited, .subject a, div.comments a, .subject a:link, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation { color: #C7DBE6; text-decoration: none;} a:hover, .subject a:hover, div.comments a:hover, div#sidebar a:hover, .datesubjectcomment a:hover, div#header a:hover {color: #1B3E74; text-decoration: none;} .subject a, .subject a:link, .subject a:visited, .subject a:hover {color: #C7DBE6;}

Find the part that says "HEADER IMAGE LINK GOES HERE" and change that text to the link for your header image. Make sure your header is exactly 600x300 pixels or it will mess up the layout! Save changes and you're done!

♥