01-fragile

[jongwoons]

title: fragile
style: flexible squares
accounts: all
features: tiny icons, custom comment pages, topbar
live preview

navigation instructions.
The header is disabled in this layout, so you'll have to add the navigation links manually.
Do this by going to journal>>journal style>>customize journal>>links list and put in any links to your page like so:

recent entries
http://yourusername.livejournal.com/

calendar
http://yourusername.livejournal.com/archive

friends
http://yourusername.livejournal.com/friends

user info
http://yourusername.livejournal.com/profile

click SAVE.

sidebar instructions.
If you want a title like in the preview WITHOUT a blurb:
- go to sidebar>>Title of the links sidebar box and put in your title.
- make sure Show the link list in the sidebar? is set to YES.

If you want a title WITH a blurb:
- go to sidebar>>Title of the blurb sidebar box and put your title there.
- make sure Show the blurb/free text in the sidebar? is set to YES.

click SAVE.

comments.
This is very important, or your layout will look weird.

- Go to text>>comments and change the following:

"Link text to leave a comment" change to "+"
"Link text to read comments" change to "01// 0#"
"Link text to leave a comment on friends view entry" change to "+"
"Link text to read comments on a friends view entry" change to "01// 0#"

css code.
/* Cleaned CSS: */ body { background-color: #F2EBE2; text-align: center; color: #cbbfc2; font-family: "arial", sans-serif; font-size: 10px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #BC98A2; padding-bottom: 1px; text-decoration: none; } a:hover { color: #BC98A2; text-decoration: none; border-bottom: 2px solid #F2EBE2; } blockquote { font-size: 10px; padding: 10px; background-color: #F2EBE2; border-left: 10px solid #DBCEBC; border-right: 10px solid #DBCEBC; } code, kbd, pre, tt { font-family: monospace; } #content { width: 530px; margin-left: auto; margin-right: auto; } #maincontent { margin-top: 15px; text-align: left; } #sidebar { background-color: #ffffff; padding: 15px; margin-top: 15px; font-size: 10px; font-family: "arial", sans-serif; color: #cbbfc2; width: auto; float:top; text-align: left; } #header { display: none; } #footer { width: auto; text-align: right; font-family: "georgia", sans-serif; letter-spacing: -1px; color: #cbbfc2; z-index: 100; clear: both; font-size: 20px; } ul.navfooter li.viewing { display: none; } /* header -- links to views; title of journal; subtitle of journal */ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #BC98A2; } div#header a:hover, div#footer a:hover { color: #DBCEBC; text-decoration: none; } /* sidebar */ .defaultuserpic { display: none; } .sbarheader { padding: 0px 5px 0px 5px; } .sbarbody { padding: 0px 5px 0px 5px; } .sbarbody2 { padding: 0 15px 0 15px; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar, .sbarcalendarposts { display: none; } ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; } li.sbaritem { padding: 10px; list-style: none; display: inline; } li.sbartitle { font-size: 30px; color: #DBCEBC; font-family: georgia; padding-left: 10px; list-style: none; margin-bottom: 10px; margin-top: 10px; } /* maincontent */ .subcontent { background-color: #ffffff; } .entry { margin: 10px 10px 10px 130px; padding: 10px; color: #cbbfc2; font-family: "arial", sans-serif; font-size: 11px; text-align: left; } .entry_text { padding-bottom: 20px; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } .userpic, .userpicfriends { position: relative; float: left; background-color: transparent !important; padding: 10px; margin: 0px 10px 10px 0px; z-index: 15; text-align: center; } .userpic img, .userpicfriends img { border: 15px solid #F2EBE2; height: 80px; width: 80px; } .userpic a font, .userpicfriends a font { color: #BC98A2; } .date { display: none; } .subject { font-weight: normal; padding: 5px; color: #BCAC98; font-family: "georgia", sans-serif; font-size: 20px; } .subject a, .subject a:link, .subject a:visited { color: #BCAC98; } .subject a:hover { color: #BCAC98; } .datesubject { padding: 10px; text-align: right; } .currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic {padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%; font-family: georgia; text-transform: lowercase; font-size: 9px} .ljtags {background-image: url(http://i34.tinypic.com/w211t5.jpg); margin-top: 20px; margin-bottom: -20px;} .currentlocation {background-image: url(http://i38.tinypic.com/2nbxgg1.jpg)} .currentmood{background-image: url(http://i34.tinypic.com/29w61pg.jpg)} .currentgroups {background-image: url(http://i47.tinypic.com/33dxjcn.jpg)} .currentmusic {background-image: url(http://i36.tinypic.com/jkaq05.jpg)} .currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {display:none} .comments { font-family: "georgia", sans-serif; font-size: 0px; padding: 10px; text-align:center; padding: 0px 5px 0px 5px; width: 100px; float: left; margin: -40px 0px 0px -250px; } div.comments a, div.comments a:link, div.comments a:visited { color: #DBCEBC; font-size: 25px; padding: 5px; } div.comments a:hover { color: #BCAC98; text-decoration: none; } /* maincontent -- entry, reply pages */ .datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px; } .userpiccomment { position: relative; top: -30px; left: 0px; margin: 10px 10px -20px 10px; z-index: 15; float: left; border: 15px solid #F2EBE2; height: 70px; width: 70px; } .box { padding: 10px; clear: left; } input, textarea { background-color: #ffffff; border: 1px solid #e4e4e4; color: #cbbfc2; } textarea.textbox { width: 100% !important; border: 1px solid #e4e4e4; padding: 3px; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: "arial", sans-serif; font-size: 10px; line-height: 125%; color: #cbbfc2; } .replytosubject { font-weight: normal; } .commentreply { position: relative; margin: 10px; font-size: 10px; font-family: "arial", sans-serif; color: #cbbfc2; } .commentbox { padding: 10px; margin: 10px; background-color: #ffffff; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #fdfaf6; } .commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%; } /* maincontent -- year/achive pages */ ul.year { text-align: center; padding-bottom: 40px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; } table.yeartable td.yeardate, table.yeartable td.yearday { background-color: #ffffff; } table.yeartable td.yearday { background-color: #ffffff; text-align: center; } td.yearmonth { border-style: none; } /* footer */ ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: block; margin: 5px; } .clearfoot { clear: both; } /* misc */ .clear { height: 0px; } .skiplinks { text-align: center; color: #f2ebe2; padding: 10px; } .headerimage { /* for formatting header image */ } .separator{ /* for formatting separators between entries */ height: 35px; } form#qrform table {border-width: 0px !important; } img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0} .subject img {vertical-align: middle !important} img[src*="icon_protected.gif"]{background-image: url(http://i33.tinypic.com/16k5b4m.jpg)} img[src*="icon_private.gif"]{background-image: url(http://i34.tinypic.com/2ymyqfl.jpg)} img[src*="icon_groups.gif"]{background-image: url(http://i36.tinypic.com/15cys7k.jpg)} img[src*="btn_del.gif"]{background-image: url(http://i35.tinypic.com/34rsxs2.jpg)} img[src*="btn_scr.gif"] {background-image: url(http://i38.tinypic.com/2n6y9t3.jpg)} img[src*="btn_unscr.gif"] {background-image: url(http://i38.tinypic.com/2n6y9t3.jpg)} img[src*="btn_freeze.gif"] {background-image: url(http://i38.tinypic.com/1gksac.jpg)} img[src*="btn_unfreeze.gif"] {background-image: url(http://i38.tinypic.com/1gksac.jpg)} img[src*="btn_track.gif"] {background-image: url(http://i38.tinypic.com/2dtna4j.jpg)} img[src*="btn_tracking.gif"] {background-image: url(http://i38.tinypic.com/2dtna4j.jpg)} img[src*="userinfo.gif"] {background-image: url(http://i36.tinypic.com/10f810g.jpg)} img[src*="btn_edit.gif"] {background-image: url(http://i36.tinypic.com/wwgg8z.jpg)} .ljuser img {width: 0; height: 0; background: transparent url(http://i36.tinypic.com/wwgg8z.jpg) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important} .ljuser img[src*="userinfo.gif"] {background: transparent url(http://i36.tinypic.com/wwgg8z.jpg) no-repeat center left !important; padding: 16px 16px 0 2px !important} .ljuser img[src*="community.gif"] { background: transparent url(http://i34.tinypic.com/a0vrjs.jpg) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important} div.ContextualPopup div.Inner { background-color:transparent!important; color: #cbbfc2!important; border:none; padding:10px; width: 250px; font-family: georgia; } div.ContextualPopup .Content { padding:7px 10px 7px 10px; margin-right:80px; line-height: 1.4; background-color:#fdfaf6; border: 1px solid #e4e4e4; } div.ContextualPopup .Userpic { padding:10px; background-color:#ffffff; margin:0px; border: 1px solid #e4e4e4; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited { font-weight: normal; font-family: arial; color: #BC98A2 !important; text-decoration: none; } div.ContextualPopup .Relation { letter-spacing:1px; border-bottom: 1px solid #F2EBE2; margin-bottom:4px; padding-bottom:4px; } table#lj_controlstrip td { background-color: #fdfaf6; color: #fff; border: none; border-width:1px 1px 0 0 } table#lj_controlstrip { } #lj_controlstrip input { border: 1px solid #e4e4e4; background-color: #ffffff; } #lj_controlstrip a { color: #BC98A2; } #lj_controlstrip_statustext { color: #cbbfc2; } h2 { display: none; } .ljtaglist { list-style-type: none; } ul.ljtaglist li { border-bottom: 1px solid #DBCEBC; }