S2 Flexible Squares: ghosts that broke my heart before i met you

Layout: Ghosts that broke my heart before I met you {S2 Flexible Squares}
Features: custom contextual pop-up, mini icons, custom comments pages
Account types: basic // plus // paid

image // live

instructions:

01 : go to customize journal style.
02 : select Flexible Squares > Blue Gray as your theme.
03 : go to Custom CSS.
04 : set all the drop-downs to NO.
05 : paste in your code in the Custom Stylesheet box, and save.

codes:

/*--------------------------------------------------- GHOSTS THAT BROKE MY HEART BEFORE I MET YOU S2 Flexible Squares layout by ghost_factory background image by appletooth minicons from pinvoke & famfamfam -----------------------------------------------------*/ body { background: url(http://farm2.static.flickr.com/1319/549276741_4560289ec9.jpg) repeat fixed 0 0; text-align: center; color:#333333; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #669999; text-decoration: none; } a:hover { color: #339999; text-decoration: none; } p, td { font-size: 10px; } kbd, pre, tt { font-family: monospace; } blockquote, code { padding: 15px; background-color: #f1f1f1; display: block; color: #333333; } strong, u { color: #669999; } i, em, s, strike { color: #339999; } /* ----- general ----- */ #content { width: 600px; margin-left: auto; margin-right: auto; background: transparent; border: none; padding: 15px; } #maincontent { margin-top: 15px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; background: transparent; color: #666666; border-style: none; text-align: left; } #sidebar { padding-top: 15px; margin-top: 15px; background-color: #f8f8f8; border-style: none; font-size: 10px; padding-bottom: 15px; font-family: Georgia, "Times New Roman", Times, serif; color: #666666; width: 600px; float: center; text-align: left; } /* ----- header & footer ----- */ #header { width: 95%; padding: 0px 0px 0px 0px; margin: 0px; text-align: center; color: #666666; background-color: #f8f8f8; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; border: 15px solid #f8f8f8; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/01banner.jpg); background-repeat: no-repeat; } div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #669999; } div#header a:hover, div#footer a:hover { color: #339999; text-decoration: none; } .title, .subtitle { display: none; } #footer { width: 100%; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; background: transparent; color: #666666; border-style: none; z-index: 100; clear: both; } .clearfoot { clear: both; } /* ----- header & footer nav ----- */ ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; padding: 10px; background-color: #f8f8f8; border: 1px solid #cccccc; } ul.navheader{ padding: 0px; margin: 0px; } ul.navheader li { display: list-item; list-style-type: none; background-color: #e1e1e1; border-bottom: 1px solid #cccccc; padding: 0 0px 0 0px; margin-left: 375px; border-left: 10px solid #e1e1e1; margin-right: 5px; height: 25px; padding-top: 10px; } ul.navheader li:hover { display: list-item; list-style-type: none; background-color: #dddddd; border-bottom: 1px solid #cccccc; padding: 0 0px 0 0px; margin-left: 375px; border-right: 10px solid #339999; font-style: italic; margin-right: 5px; height: 25px; padding-top: 10px; } li.view, li.viewing { font-style: italic; } /* ----- entry stuff ----- */ .subcontent { padding: 20px; background: #f8f8f8; } .entry { margin: 0px 10px 10px 10px; padding: 10px; background-color: #f8f8f8; color: #666666; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; text-align: justify; border-style: none; } .userpic { position: relative; float: right; background-color: #f8f8f8; padding: 5px; margin: 10px; z-index: 15; border: 1px solid #dddddd; } .userpic img, .userpicfriends img { width: 50px; height: 50px; } .userpic:hover, .userpicfriends:hover { -moz-opacity: .70; } .userpicfriends { position: relative; float: right; padding: 5px; margin: 10px; text-align: center; z-index: 15; border: 1px solid #dddddd; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; background-color: #f8f8f8 !important; } .date { line-height: 200%; top: 5px; color: #666666; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; letter-spacing: 5px; } .subject { font-weight: normal; padding: 10px; color: #333333; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px;} .subject:hover { font-style: italic; } .subject a, .subject a:link, .subject a:visited { color: #333333; } .subject a:hover { color: #444444; } .datesubject { background-color: #f1f1f1; padding: 5px; height: 75px; } .entry ul li, entry ol li { padding-left: 5px; margin-left: 15px; } /* ----- currents & tags ----- */ .currents { clear: right; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; text-align: left; padding-top: 5px; text-transform: lowercase; } .currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong { display: none; } .currentlocation { background:url(http://i5.photobucket.com/albums/y193/vespergenic/random/094-1.png) no-repeat left center; padding:0px 0px 0px 15px;} .currentmood {background:url(http://i5.photobucket.com/albums/y193/vespergenic/random/033-1.png) no-repeat left center; padding:0px 0px 0px 15px;} .currentmusic {background:url(http://i5.photobucket.com/albums/y193/vespergenic/random/056.png) no-repeat left center; padding:0px 0px 0px 15px;} .ljtags { margin:20px 20px 0px 0px; padding:10px 10px 10px 20px; background:url(http://i5.photobucket.com/albums/y193/vespergenic/random/tags.png) no-repeat center left; position: relative; margin-bottom: -40px; text-transform: lowercase;} h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; text-transform: lowercase; line-height: 100%; color: #333333; font-weight: normal; margin: 0px auto; background-color:#f8f8f8; text-align: center; padding-top: 15px; } .ljtaglist { text-align: center; margin: 0px auto 10px; padding: 3px 15px 15px 35px; background-color: #f8f8f8; font-size:10px; color: #666666; border-top: none; list-style-type: none; } .ljtaglist li { margin: 3px; padding: 3px; } /* ----- sidebar ----- */ #sidebar_linklist { display: none; } #sidebar_summary { display: none;} #sidebar_tags { display: none; } #sidebar_calendar { display: none; } .defaultuserpic { text-align: right; border: 1px solid #dddddd; background: #f8f8f8; float: right; padding: 5px; margin-right: 20px; } .defaultuserpic img { width: 50px; height: 50px; } .defaultuserpic:hover { -moz-opacity: .70; } .sbarheader {padding: 0px 5px 0px 5px; } .sbarbody { padding: 0px 5px 0px 5px; } .sbarbody2 { padding: 0 15px 0 15px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #669999; } div#sidebar a:hover {color: #339999; text-decoration: none;} table.calendar {margin-right: auto; margin-left: auto; } .sbarcalendar { border: 1px solid #dddddd; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px;} .sbarcalendarposts { border-style: none; background-color: #f1f1f1; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; } ul.sbarlist{ padding-left: 0px; margin-left: 10px; list-style: none; display: inline; margin-bottom: 10px; padding-bottom: 10px; display: list-item; } li.sbaritem { padding-left: 5px; list-style: none; background: #f1f1f1; border-left: 2px solid #dddddd; display: list-item;} li.sbartitle { display: none;} /* ----- archives ----- */ ul.year { text-align: center; padding-bottom: 40px; } ul.year li { display: inline; padding: 10px; background: #f8f8f8; border: 1PX SOLID #DDDDDD } table.yeartable { margin-left: auto; margin-right: auto; } td.yearmonth { border-style: none; } table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px solid #dddddd; background-color: #f8f8f8; } table.yeartable td.yearday { background-color: #f1f1f1; text-align: center; } /* ----- comments ----- */ .comments { font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; text-align: right; background-color: #f8f8f8; padding: 0px 5px 0px 5px; position: relative; top: 15px; } div.comments a, div.comments a:link, div.comments a:visited{ color: #669999; } div.comments a:hover { color: #339999; text-decoration: none; } .datesubjectcomment { background-color: #f1f1f1; padding: 5px; margin-top: 20px; } .userpiccomment { position: relative; background-color: #f8f8f8; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: right; border: 1px solid #dddddd } .userpiccomment img { width: 50px !important; height: 50px !important; } .userpiccomment:hover { -moz-opacity: .70; } .box { border-top: 1px solid #f1f1f1; padding: 10px; clear: left; } input, textarea, select { background-color: #f1f1f1; color: #666666 !important; padding: 5px; border: 1px solid #dddddd; font: Georgia, "Times New Roman", Times, serif !important;} textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; color: #666666; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; line-height: 125%; background-color: #f1f1f1; } .replytosubject { font-weight: normal; } .commentreply { position: relative; margin: 10px; font-size: 10px; font-family: Georgia, "Times New Roman", Times, serif; color: #666666;} .commentbox { border: none; padding: 10px; margin: 10px; background-color: #f1f1f1; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #669999; } .datesubjectcomment a:hover { color: #339999; } .commentboxpartial { border-style: none; padding: 10px; margin: 10px; background-color: #f1f1f1; } .commentinfo { background-color: #f8f8f8; margin-top: 10px; width: 100%; } form#qrform table {border-width: 0px !important; } /* ----- misc ----- */ .clear {height: 15px;} .separator{ height: 10px; } .skiplinks { text-align: center; } /* ----- mini icons ----- */ .subject img {vertical-align: middle !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"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0; } img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/lock.png) no-repeat scroll 0 0;} img[src*="icon_private.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/key.png) no-repeat scroll 0 0;} img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i5.photobucket.com/albums/y193/vespergenic/random/lock_delete.png) no-repeat scroll 0 0; } .ljuser img { width: 0; height: 0; padding: 16px 16px 0 2px !important; vertical-align: middle !important; background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_cloudy.png) no-repeat 0 0; } .ljuser img[src*="userinfo.gif"] { background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_cloudy.png) no-repeat center left !important; padding: 16px 16px 0 2px !important; } .ljuser img[src*="community.gif"] { background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_rain.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important;} .ljuser img[src*="syndicated.gif"] { background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_sun.png) no-repeat scroll 0 0; padding: 16px 16px 0 0px !important; vertical-align:middle !important;} .ljuser img[src*="newsinfo.gif"] { background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_lightning.png) no-repeat scroll 0 0; padding: 16px 16px 0 0px !important; vertical-align:middle !important; } .ljuser img[src*="partnercomm.gif"] { background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_snow.png) no-repeat scroll 0 0; padding: 16px 16px 0 0px !important; vertical-align:middle !important;} .ljuser img[src*="sponcomm.gif"] { background: transparent url(http://i5.photobucket.com/albums/y193/vespergenic/random/weather_clouds.png) no-repeat scroll 0 0; padding: 16px 16px 0 0px !important;vertical-align:middle !important;} img[src*="btn_del.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/cross.png);} img[src*="btn_scr.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/151.png);} img[src*="btn_unscr.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/159.png);} img[src*="btn_freeze.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/layers.png);} img[src*="btn_unfreeze.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/layers__minus.png);} img[src*="btn_track.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/sticky_note_pin.png);} img[src*="btn_tracking.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/sticky_note_text.png);} img[src*="btn_tracking_thread.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/sticky_notes_text.png);} img[src*="anonymous.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/user_silhouette.png);} img[src*="openid-profile.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/map.png);} img[src*="userinfo.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/user_orange_female.png);} img[src*="talk/none.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/037.png);} img[src*="help.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/043.png);} img[src*="pencil.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/018.png);} img[src*="btn_edit.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/019.png);} /*----- Contextual Pop-up settings ----- */ div.ContextualPopup div.Inner { background:#f1f1f1 !important;color:#666666 !important; border:none; padding:10px; width: 250px; font-family: Georgia, "Times New Roman", Times, serif; } div.ContextualPopup .Content { padding:7px 10px 7px 10px; margin-right:80px;line-height: 1.4; background: #f1f1f1; } div.ContextualPopup .Userpic {padding:5px; background:#f1f1f1; margin:0px; border:1px solid #dddddd;}div.ContextualPopup .Userpic:hover { -moz-opacity: .70; }div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #669999 !important; } div.ContextualPopup div.Inner a:hover { color: #339999 !important; } div.ContextualPopup .Relation { letter-spacing:1px; border-bottom: 1px solid #dddddd; margin-bottom:4px; padding-bottom:4px;} /* ----- navstrip ----- */ table#lj_controlstrip td { background-color:#f8f8f8; background-image: url(); color: #666666; border-left: none; border: 1px solid #f8f8f8; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px !important; } #lj_controlstrip a { color: #669999; font-family: Georgia, "Times New Roman", Times, serif; } #lj_controlstrip a:hover { color: #339999; text-decoration: none; font-family: Georgia, "Times New Roman", Times, serif; } #lj_controlstrip_statustext {color: #666666; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal !important;} #lj_controlstrip_userpic { display: none; }

Please friend ghost_factory for more if you like!