layout: merciful
I'm baaaaack! I had something else to say, but LJ ate my post. Thank you, everyone who voted for me in the VGift contest. I didn't win, but the staff liked my entry and wanted to use it anyway. It's now available for purchase at the LJ gift shop.
MONOCHROME
img | live
MULTICHROME
img | live
Name: Merciful
Style: S2 Flexible Squares
Accounts: Basic, Plus, and Paid
Browsers: IE, Firefox, Chrome, Safari, Opera
Monochrome Code
/*--------------------------------------------------- Name: Merciful (multichrome) Style: S2 Flexible Squares Creator: vox_mortem Tiny Icons: FamFam and Pinvoke -----------------------------------------------------*/ body { background-color: #000; text-align: center; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #999; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } a:hover { color: #CCC; text-decoration: line-through; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 600px; margin-left: auto; margin-right: auto; padding: 0px; } #maincontent { margin-top: 0px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #fff; color: #000000; border-width: 1px; text-align: left; } #sidebar { padding-top: 0px; margin-top: 0px; background-color: #FFF; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; width: 600px; float: top; text-align: left; border-bottom: 1px solid #eeeeee; } /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 600px; padding: 80px 0px 0px 0px; margin: 0px; text-align: right; font-size: 11px; font-weight: normal; color: #666; margin-bottom: 15px; } .headerimage { /* for formatting header image */ } /*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #999; } div#header a:hover, div#footer a:hover { color: #CCC; text-decoration: line-through; } /*title and subtitle*/ .title { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 40px; font-weight: normal; line-height: 200%; top: 10px; margin-top: -90px; letter-spacing: 3px; text-shadow: 0.06em 0.06em 0.1em #000000; display: none; } .subtitle { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; top: 10px; display: none; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 0px; margin: 0px; letter-spacing: -1px; font-family: "Trebuchet MS" !Important; text-transform: uppercase; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { } .entry { margin: 0px 0px 0px 0px; padding: 10px; background-color: #FFF; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; } .userpic { position: relative; float: right; background-color:#333 !important; padding: 12px; z-index: 15; margin-right: -115px; color: #333; } .userpic img { height: 80px; width: 80px; } .date { line-height: 10px; top: 5px; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: -1px; } .subject { font-weight: normal; padding: 2px; color: #999; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } .subject a, .subject a:link, .subject a:visited { color: #999; } .subject a:hover { color: #CCC; } .datesubject { background-color: #FFF; padding: 5px; border-bottom: 1px solid #eeeeee; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/ .currents, .currentmood, .currentmusic { font-family: Arial, Helvetica, sans-serif; font-size: 10px; display: block !important; clear: right; text-align: left; } /*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/ .comments { font-family: Impact; font-size: 13px; text-align: right; padding: 70px 5px 0px 5px; position: relative; top: 0px; text-transform: uppercase; } div.comments a, div.comments a:link, div.comments a:visited { color: #999; } div.comments a:hover { color: #666; text-decoration: none; } /*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/ .separator { /* for formatting separators between entries */ height: 0px; } /*------------------------------------------------------------ Special friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; float: right; padding: 12px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; z-index: auto; background-color: #333!important; margin-right: -115px; } .userpicfriends img { height: 80px; width: 80px; } /*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/ .defaultuserpic { float: left; margin: 10px 10px 0px 10px; } .defaultuserpic img { width: 50px; height: 50px; border: 7px solid #333333; } .sbarheader { display: none; } .sbarbody { padding: 5px 5px 5px 5px; text-align: right; font-family: Arial, Helvetica, sans-serif; list-style-type: circle; } .sbarbody2 { padding: 0 15px 0 15px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #999; text-transform: lowercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } div#sidebar a:hover { color: #CCC; text-decoration: line-through; } /*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/ table.calendar, .sbarcalendar, .sbarcalendarposts { display: none } /*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/ ul.sbarlist { padding-left: 0px; margin-left: 0px; } li.sbaritem { padding-left: 15px; display: inline; } li.sbartitle { display: none; } /*---------------------------------------------------- footer ----------------------------------------------------------------*/ #footer { width: 600px; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; letter-spacing: -1px; color: #999; z-index: 100; text-transform: uppercase; } ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: none; } /*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/ ul.year { text-align: center; padding-bottom: 30px; color: #666; background-color: #FFF; } ul.year li { display: inline; color: #666; background-color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable { margin-left: auto; margin-right: auto; color: #666; background-color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #E0E0E0; background-color: #FFF; } table.yeartable td.yearday { background-color: #FFF; text-align: center; } td.yearmonth { border-style: none; background-color: #FFF; } /*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/ .datesubjectcomment { background-color: #FFF; padding: 5px; margin-top: 20px; color: #999; } .userpiccomment { position: relative; background-color: #333; top: -30px; left: 0px; padding: 12px; margin: 10px 10px -10px 10px; z-index: 15; float: left; width: 80px; height: 80px; } .box { padding: 10px; clear: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666; border: 1px solid #fff; } input, textarea { background-color: #F2F2F2; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; border-color: #FFF; } #qrform table { border: none !important; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 125%; background-color: #FFF; color: #666; } .replytosubject { font-weight: normal; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; } .commentbox { padding: 10px; margin: 10px; background-color: #FFF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #666; } .datesubjectcomment a:hover { color: #999; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #FFF; } .commentinfo { background-color: #FFF; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } /*--------------------------- Tags -------------------------------------*/ h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #999; font-weight: normal !important; padding: 12px !important; } .ljtaglist { list-style-type: none; color: #666; padding: 12px !important; } /*-------------------------------------------- Misc -----------------------------------------*/ .clear { height: 0px; } /*------------------------------------ Look of contextual Popup ------------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 5px 0 0 20px; font: normal 11px "Arial", "Verdana", sans-serif !important; } /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #fff !important; color: #666 !important; border: 1px solid #036; padding: 0px; width: 20em; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: bold !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: bold; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: bold; color: #999 !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /*------------------ Navigation Strip ---------------------------*/ #lj_controlstrip td { background-color: #000; color: #666666; border-left: none } #lj_controlstrip input { border: 1px solid #2d2d2d; background-color: #121212; color:#666 } #lj_controlstrip a { color: #999; font-family: Arial, Helvetica, sans-serif; } #lj_controlstrip_statustext { color: #666 } #lj_controlstrip_userpic { width: 30px; height: 30px } /*Tiny Icon Replacements*/ 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://i46.tinypic.com/f281uc.jpg) } img[src*="icon_private.gif"] { background-image: url(http://i49.tinypic.com/207b43d.jpg) } img[src*="icon_groups.gif"] { background-image: url(http://i46.tinypic.com/f281uc.jpg) } .ljuser img[src*="syndicated.gif"] { background-image: url(http://i47.tinypic.com/w0o040.jpg) !important } .ljuser img[src*="newsinfo.gif"] { background-image: url(http://i45.tinypic.com/2w68c4k.jpg) !important } .ljuser img[src*="partnercomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } .ljuser img[src*="sponcomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } img[src*="btn_del.gif"] { background-image: url(http://i47.tinypic.com/2evvlgj.jpg) } img[src*="btn_scr.gif"] { background-image: url(http://i47.tinypic.com/2nv9me0.jpg) } img[src*="btn_unscr.gif"] { background-image: url(http://i50.tinypic.com/mb5q2c.jpg) } img[src*="btn_freeze.gif"] { background-image: url(http://i45.tinypic.com/2luw8co.jpg) } img[src*="btn_unfreeze.gif"] { background-image: url(http://i46.tinypic.com/vqtbox.jpg) } img[src*="btn_track.gif"] { background-image: url(http://i45.tinypic.com/28aq7no.jpg) } img[src*="btn_tracking.gif"] { background-image: url(http://i49.tinypic.com/2hcmic0.jpg) } img[src*="btn_tracking_thread.gif"] { background-image: url(http://i46.tinypic.com/15rjvpk.jpg) } img[src*="anonymous.gif"] { background-image: url(http://i50.tinypic.com/33dgo08.jpg) } img[src*="openid-profile.gif"] { background-image: url(http://i50.tinypic.com/14xe2vt.jpg) } img[src*="userinfo.gif"] { background-image: url(http://i51.tinypic.com/mwaxqx.jpg) } img[src*="talk/none.gif"] { background-image: url(http://i51.tinypic.com/wgx4e9.jpg) } img[src*="help.gif"] { background-image: url(http://i49.tinypic.com/14l0y21.jpg) } img[src*="pencil.gif"] { background-image: url(http://i48.tinypic.com/aael2q.jpg) } img[src*="btn_edit.gif"] { background-image: url(http://i48.tinypic.com/95ynwh.jpg) } img[src*="upgrade-paid-icon.gif"] { background-image: url(http://i45.tinypic.com/x5nrtj.jpg) } .ljuser img { width: 0; height: 0; background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important } .ljuser img[src*="userinfo.gif"] { background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat center left !important; padding: 16px 16px 0 2px !important } .ljuser img[src*="community.gif"] { background: transparent url(http://i56.tinypic.com/2r70im1.jpg) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important } /*Metadata Icons*/ .currenttags, .currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic { padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%; float:right } .ljtags { background-image: url(http://i48.tinypic.com/wrkfvr.jpg) } .currentlocation { background-image: url(http://i45.tinypic.com/903fwj.jpg) } .currentmood { background-image: url(http://i49.tinypic.com/eriv5g.jpg) } .currentgroups { background-image: url(http://i50.tinypic.com/33xc56g.jpg) } .currentmusic { background-image: url(http://i47.tinypic.com/2gw7tyh.jpg) } .currenttags { background-image: url() } .currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong { display:none
Multichrome Code
/*--------------------------------------------------- Name: Merciful (multichrome) Style: S2 Flexible Squares Creator: vox_mortem Tiny Icons: FamFam and Pinvoke -----------------------------------------------------*/ body { background-color: #E8E8E1; text-align: center; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #F69; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } a:hover { color: #FC0; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 600px; margin-left: auto; margin-right: auto; padding: 0px; } #maincontent { margin-top: 0px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #F1F1EF; color: #000000; border-width: 1px; text-align: left; } #sidebar { padding-top: 0px; margin-top: 0px; background-color: #F1F1EF; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; width: 600px; float: top; text-align: left; border-bottom: 1px solid #eeeeee; } /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 600px; padding: 80px 0px 0px 0px; margin: 0px; text-align: right; font-size: 11px; font-weight: normal; color: #666; margin-bottom: 15px; } .headerimage { /* for formatting header image */ } /*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #F69; } div#header a:hover, div#footer a:hover { color: #fc0; } /*title and subtitle*/ .title { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 40px; font-weight: normal; line-height: 200%; top: 10px; margin-top: -90px; letter-spacing: 3px; text-shadow: 0.06em 0.06em 0.1em #000000; display: none; } .subtitle { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; top: 10px; display: none; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 0px; margin: 0px; letter-spacing: -1px; font-family: "Trebuchet MS" !Important; text-transform: uppercase; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { } .entry { margin: 0px 0px 0px 0px; padding: 10px; background-color: #F1F1EF; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; } .userpic { position: relative; float: right; background-color:#6C9 !important; padding: 12px; z-index: 15; margin-right: -115px; color: #333; } .userpic img { height: 80px; width: 80px; } .date { line-height: 10px; top: 5px; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: -1px; } .subject { font-weight: normal; padding: 2px; color: #999; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } .subject a, .subject a:link, .subject a:visited { color: #6C9; } .subject a:hover { color: #fc0; } .datesubject { background-color: #F1F1EF; padding: 5px; border-bottom: 1px solid #eeeeee; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/ .currents, .currentmood, .currentmusic { font-family: Arial, Helvetica, sans-serif; font-size: 10px; display: block !important; clear: right; text-align: left; } /*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/ .comments { font-family: Impact; font-size: 13px; text-align: right; padding: 70px 5px 0px 5px; position: relative; top: 0px; text-transform: uppercase; } div.comments a, div.comments a:link, div.comments a:visited { color: #6C9; } div.comments a:hover { color: #fc0; text-decoration: none; } /*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/ .separator { /* for formatting separators between entries */ height: 0px; border-top: 4px solid #fc0; } /*------------------------------------------------------------ Special friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; float: right; padding: 12px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; z-index: auto; background-color: #6C9!important; margin-right: -115px; } .userpicfriends img { height: 80px; width: 80px; } /*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/ .defaultuserpic { float: left; margin: 10px 10px 0px 10px; } .defaultuserpic img { width: 50px; height: 50px; border: 7px solid #f69; } .sbarheader { display: none; } .sbarbody { padding: 5px 5px 5px 5px; text-align: right; font-family: Arial, Helvetica, sans-serif; list-style-type: circle; } .sbarbody2 { padding: 0 15px 0 15px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #6C9; text-transform: lowercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } div#sidebar a:hover { color: #fc0; } /*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/ table.calendar, .sbarcalendar, .sbarcalendarposts { display: none } /*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/ ul.sbarlist { padding-left: 0px; margin-left: 0px; } li.sbaritem { padding-left: 15px; display: inline; } li.sbartitle { display: none; } /*---------------------------------------------------- footer ----------------------------------------------------------------*/ #footer { width: 600px; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; letter-spacing: -1px; color: #666; z-index: 100; text-transform: uppercase; } ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: none; } /*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/ ul.year { text-align: center; padding-bottom: 30px; color: #666; background-color: #F1F1EF; } ul.year li { display: inline; color: #666; background-color: #F1F1EF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable { margin-left: auto; margin-right: auto; color: #666; background-color: #F1F1EF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #E0E0E0; background-color: #F1F1EF; } table.yeartable td.yearday { background-color: #F1F1EF; text-align: center; } td.yearmonth { border-style: none; background-color: #F1F1EF; } /*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/ .datesubjectcomment { background-color: #F1F1EF; padding: 5px; margin-top: 20px; color: #999; } .userpiccomment { position: relative; background-color: #F69; top: -30px; left: 0px; padding: 12px; margin: 10px 10px -10px 10px; z-index: 15; float: left; width: 80px; height: 80px; } .box { padding: 10px; clear: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666; border: 1px solid #f1f1ef; } input, textarea { background-color: #EBEBE7; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; border-color: #f1f1ef; } #qrform table { border: none !important; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 125%; background-color: #FFF; color: #666; } .replytosubject { font-weight: normal; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; } .commentbox { padding: 10px; margin: 10px; background-color: #F1F1EF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #6C9; } .datesubjectcomment a:hover { color: #fc0; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #F1F1EF; } .commentinfo { background-color: #F1F1EF; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } /*--------------------------- Tags -------------------------------------*/ h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #999; font-weight: normal !important; padding: 12px !important; } .ljtaglist { list-style-type: none; color: #666; padding: 12px !important; } /*-------------------------------------------- Misc -----------------------------------------*/ .clear { height: 0px; } /*------------------------------------ Look of contextual Popup ------------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 5px 0 0 20px; font: normal 11px "Arial", "Verdana", sans-serif !important; } /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #F1F1EF !important; color: #666 !important; border: 1px solid #036; padding: 0px; width: 20em; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: bold !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: bold; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: bold; color: #999 !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /*------------------ Navigation Strip ---------------------------*/ #lj_controlstrip td { background-color: #000; color: #666666; border-left: none } #lj_controlstrip input { border: 1px solid #2d2d2d; background-color: #121212; color:#666 } #lj_controlstrip a { color: #999; font-family: Arial, Helvetica, sans-serif; } #lj_controlstrip_statustext { color: #666 } #lj_controlstrip_userpic { width: 30px; height: 30px } /*Tiny Icon Replacements*/ 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://i46.tinypic.com/f281uc.jpg) } img[src*="icon_private.gif"] { background-image: url(http://i49.tinypic.com/207b43d.jpg) } img[src*="icon_groups.gif"] { background-image: url(http://i46.tinypic.com/f281uc.jpg) } .ljuser img[src*="syndicated.gif"] { background-image: url(http://i47.tinypic.com/w0o040.jpg) !important } .ljuser img[src*="newsinfo.gif"] { background-image: url(http://i45.tinypic.com/2w68c4k.jpg) !important } .ljuser img[src*="partnercomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } .ljuser img[src*="sponcomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } img[src*="btn_del.gif"] { background-image: url(http://i47.tinypic.com/2evvlgj.jpg) } img[src*="btn_scr.gif"] { background-image: url(http://i47.tinypic.com/2nv9me0.jpg) } img[src*="btn_unscr.gif"] { background-image: url(http://i50.tinypic.com/mb5q2c.jpg) } img[src*="btn_freeze.gif"] { background-image: url(http://i45.tinypic.com/2luw8co.jpg) } img[src*="btn_unfreeze.gif"] { background-image: url(http://i46.tinypic.com/vqtbox.jpg) } img[src*="btn_track.gif"] { background-image: url(http://i45.tinypic.com/28aq7no.jpg) } img[src*="btn_tracking.gif"] { background-image: url(http://i49.tinypic.com/2hcmic0.jpg) } img[src*="btn_tracking_thread.gif"] { background-image: url(http://i46.tinypic.com/15rjvpk.jpg) } img[src*="anonymous.gif"] { background-image: url(http://i50.tinypic.com/33dgo08.jpg) } img[src*="openid-profile.gif"] { background-image: url(http://i50.tinypic.com/14xe2vt.jpg) } img[src*="userinfo.gif"] { background-image: url(http://i51.tinypic.com/mwaxqx.jpg) } img[src*="talk/none.gif"] { background-image: url(http://i51.tinypic.com/wgx4e9.jpg) } img[src*="help.gif"] { background-image: url(http://i49.tinypic.com/14l0y21.jpg) } img[src*="pencil.gif"] { background-image: url(http://i48.tinypic.com/aael2q.jpg) } img[src*="btn_edit.gif"] { background-image: url(http://i48.tinypic.com/95ynwh.jpg) } img[src*="upgrade-paid-icon.gif"] { background-image: url(http://i45.tinypic.com/x5nrtj.jpg) } .ljuser img { width: 0; height: 0; background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important } .ljuser img[src*="userinfo.gif"] { background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat center left !important; padding: 16px 16px 0 2px !important } .ljuser img[src*="community.gif"] { background: transparent url(http://i56.tinypic.com/2r70im1.jpg) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important } /*Metadata Icons*/ .currenttags, .currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic { padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%; float:right } .ljtags { background-image: url(http://i48.tinypic.com/wrkfvr.jpg) } .currentlocation { background-image: url(http://i45.tinypic.com/903fwj.jpg) } .currentmood { background-image: url(http://i49.tinypic.com/eriv5g.jpg) } .currentgroups { background-image: url(http://i50.tinypic.com/33xc56g.jpg) } .currentmusic { background-image: url(http://i47.tinypic.com/2gw7tyh.jpg) } .currenttags { background-image: url() } .currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong { display:none
Installation Instructions
MONOCHROME
img | live
MULTICHROME
img | live
Name: Merciful
Style: S2 Flexible Squares
Accounts: Basic, Plus, and Paid
Browsers: IE, Firefox, Chrome, Safari, Opera
Monochrome Code
/*--------------------------------------------------- Name: Merciful (multichrome) Style: S2 Flexible Squares Creator: vox_mortem Tiny Icons: FamFam and Pinvoke -----------------------------------------------------*/ body { background-color: #000; text-align: center; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #999; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } a:hover { color: #CCC; text-decoration: line-through; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 600px; margin-left: auto; margin-right: auto; padding: 0px; } #maincontent { margin-top: 0px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #fff; color: #000000; border-width: 1px; text-align: left; } #sidebar { padding-top: 0px; margin-top: 0px; background-color: #FFF; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; width: 600px; float: top; text-align: left; border-bottom: 1px solid #eeeeee; } /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 600px; padding: 80px 0px 0px 0px; margin: 0px; text-align: right; font-size: 11px; font-weight: normal; color: #666; margin-bottom: 15px; } .headerimage { /* for formatting header image */ } /*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #999; } div#header a:hover, div#footer a:hover { color: #CCC; text-decoration: line-through; } /*title and subtitle*/ .title { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 40px; font-weight: normal; line-height: 200%; top: 10px; margin-top: -90px; letter-spacing: 3px; text-shadow: 0.06em 0.06em 0.1em #000000; display: none; } .subtitle { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; top: 10px; display: none; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 0px; margin: 0px; letter-spacing: -1px; font-family: "Trebuchet MS" !Important; text-transform: uppercase; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { } .entry { margin: 0px 0px 0px 0px; padding: 10px; background-color: #FFF; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; } .userpic { position: relative; float: right; background-color:#333 !important; padding: 12px; z-index: 15; margin-right: -115px; color: #333; } .userpic img { height: 80px; width: 80px; } .date { line-height: 10px; top: 5px; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: -1px; } .subject { font-weight: normal; padding: 2px; color: #999; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } .subject a, .subject a:link, .subject a:visited { color: #999; } .subject a:hover { color: #CCC; } .datesubject { background-color: #FFF; padding: 5px; border-bottom: 1px solid #eeeeee; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/ .currents, .currentmood, .currentmusic { font-family: Arial, Helvetica, sans-serif; font-size: 10px; display: block !important; clear: right; text-align: left; } /*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/ .comments { font-family: Impact; font-size: 13px; text-align: right; padding: 70px 5px 0px 5px; position: relative; top: 0px; text-transform: uppercase; } div.comments a, div.comments a:link, div.comments a:visited { color: #999; } div.comments a:hover { color: #666; text-decoration: none; } /*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/ .separator { /* for formatting separators between entries */ height: 0px; } /*------------------------------------------------------------ Special friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; float: right; padding: 12px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; z-index: auto; background-color: #333!important; margin-right: -115px; } .userpicfriends img { height: 80px; width: 80px; } /*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/ .defaultuserpic { float: left; margin: 10px 10px 0px 10px; } .defaultuserpic img { width: 50px; height: 50px; border: 7px solid #333333; } .sbarheader { display: none; } .sbarbody { padding: 5px 5px 5px 5px; text-align: right; font-family: Arial, Helvetica, sans-serif; list-style-type: circle; } .sbarbody2 { padding: 0 15px 0 15px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #999; text-transform: lowercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } div#sidebar a:hover { color: #CCC; text-decoration: line-through; } /*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/ table.calendar, .sbarcalendar, .sbarcalendarposts { display: none } /*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/ ul.sbarlist { padding-left: 0px; margin-left: 0px; } li.sbaritem { padding-left: 15px; display: inline; } li.sbartitle { display: none; } /*---------------------------------------------------- footer ----------------------------------------------------------------*/ #footer { width: 600px; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; letter-spacing: -1px; color: #999; z-index: 100; text-transform: uppercase; } ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: none; } /*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/ ul.year { text-align: center; padding-bottom: 30px; color: #666; background-color: #FFF; } ul.year li { display: inline; color: #666; background-color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable { margin-left: auto; margin-right: auto; color: #666; background-color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #E0E0E0; background-color: #FFF; } table.yeartable td.yearday { background-color: #FFF; text-align: center; } td.yearmonth { border-style: none; background-color: #FFF; } /*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/ .datesubjectcomment { background-color: #FFF; padding: 5px; margin-top: 20px; color: #999; } .userpiccomment { position: relative; background-color: #333; top: -30px; left: 0px; padding: 12px; margin: 10px 10px -10px 10px; z-index: 15; float: left; width: 80px; height: 80px; } .box { padding: 10px; clear: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666; border: 1px solid #fff; } input, textarea { background-color: #F2F2F2; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; border-color: #FFF; } #qrform table { border: none !important; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 125%; background-color: #FFF; color: #666; } .replytosubject { font-weight: normal; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; } .commentbox { padding: 10px; margin: 10px; background-color: #FFF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #666; } .datesubjectcomment a:hover { color: #999; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #FFF; } .commentinfo { background-color: #FFF; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } /*--------------------------- Tags -------------------------------------*/ h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #999; font-weight: normal !important; padding: 12px !important; } .ljtaglist { list-style-type: none; color: #666; padding: 12px !important; } /*-------------------------------------------- Misc -----------------------------------------*/ .clear { height: 0px; } /*------------------------------------ Look of contextual Popup ------------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 5px 0 0 20px; font: normal 11px "Arial", "Verdana", sans-serif !important; } /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #fff !important; color: #666 !important; border: 1px solid #036; padding: 0px; width: 20em; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: bold !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: bold; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: bold; color: #999 !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /*------------------ Navigation Strip ---------------------------*/ #lj_controlstrip td { background-color: #000; color: #666666; border-left: none } #lj_controlstrip input { border: 1px solid #2d2d2d; background-color: #121212; color:#666 } #lj_controlstrip a { color: #999; font-family: Arial, Helvetica, sans-serif; } #lj_controlstrip_statustext { color: #666 } #lj_controlstrip_userpic { width: 30px; height: 30px } /*Tiny Icon Replacements*/ 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://i46.tinypic.com/f281uc.jpg) } img[src*="icon_private.gif"] { background-image: url(http://i49.tinypic.com/207b43d.jpg) } img[src*="icon_groups.gif"] { background-image: url(http://i46.tinypic.com/f281uc.jpg) } .ljuser img[src*="syndicated.gif"] { background-image: url(http://i47.tinypic.com/w0o040.jpg) !important } .ljuser img[src*="newsinfo.gif"] { background-image: url(http://i45.tinypic.com/2w68c4k.jpg) !important } .ljuser img[src*="partnercomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } .ljuser img[src*="sponcomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } img[src*="btn_del.gif"] { background-image: url(http://i47.tinypic.com/2evvlgj.jpg) } img[src*="btn_scr.gif"] { background-image: url(http://i47.tinypic.com/2nv9me0.jpg) } img[src*="btn_unscr.gif"] { background-image: url(http://i50.tinypic.com/mb5q2c.jpg) } img[src*="btn_freeze.gif"] { background-image: url(http://i45.tinypic.com/2luw8co.jpg) } img[src*="btn_unfreeze.gif"] { background-image: url(http://i46.tinypic.com/vqtbox.jpg) } img[src*="btn_track.gif"] { background-image: url(http://i45.tinypic.com/28aq7no.jpg) } img[src*="btn_tracking.gif"] { background-image: url(http://i49.tinypic.com/2hcmic0.jpg) } img[src*="btn_tracking_thread.gif"] { background-image: url(http://i46.tinypic.com/15rjvpk.jpg) } img[src*="anonymous.gif"] { background-image: url(http://i50.tinypic.com/33dgo08.jpg) } img[src*="openid-profile.gif"] { background-image: url(http://i50.tinypic.com/14xe2vt.jpg) } img[src*="userinfo.gif"] { background-image: url(http://i51.tinypic.com/mwaxqx.jpg) } img[src*="talk/none.gif"] { background-image: url(http://i51.tinypic.com/wgx4e9.jpg) } img[src*="help.gif"] { background-image: url(http://i49.tinypic.com/14l0y21.jpg) } img[src*="pencil.gif"] { background-image: url(http://i48.tinypic.com/aael2q.jpg) } img[src*="btn_edit.gif"] { background-image: url(http://i48.tinypic.com/95ynwh.jpg) } img[src*="upgrade-paid-icon.gif"] { background-image: url(http://i45.tinypic.com/x5nrtj.jpg) } .ljuser img { width: 0; height: 0; background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important } .ljuser img[src*="userinfo.gif"] { background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat center left !important; padding: 16px 16px 0 2px !important } .ljuser img[src*="community.gif"] { background: transparent url(http://i56.tinypic.com/2r70im1.jpg) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important } /*Metadata Icons*/ .currenttags, .currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic { padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%; float:right } .ljtags { background-image: url(http://i48.tinypic.com/wrkfvr.jpg) } .currentlocation { background-image: url(http://i45.tinypic.com/903fwj.jpg) } .currentmood { background-image: url(http://i49.tinypic.com/eriv5g.jpg) } .currentgroups { background-image: url(http://i50.tinypic.com/33xc56g.jpg) } .currentmusic { background-image: url(http://i47.tinypic.com/2gw7tyh.jpg) } .currenttags { background-image: url() } .currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong { display:none
Multichrome Code
/*--------------------------------------------------- Name: Merciful (multichrome) Style: S2 Flexible Squares Creator: vox_mortem Tiny Icons: FamFam and Pinvoke -----------------------------------------------------*/ body { background-color: #E8E8E1; text-align: center; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #F69; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } a:hover { color: #FC0; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 600px; margin-left: auto; margin-right: auto; padding: 0px; } #maincontent { margin-top: 0px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #F1F1EF; color: #000000; border-width: 1px; text-align: left; } #sidebar { padding-top: 0px; margin-top: 0px; background-color: #F1F1EF; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; width: 600px; float: top; text-align: left; border-bottom: 1px solid #eeeeee; } /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 600px; padding: 80px 0px 0px 0px; margin: 0px; text-align: right; font-size: 11px; font-weight: normal; color: #666; margin-bottom: 15px; } .headerimage { /* for formatting header image */ } /*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #F69; } div#header a:hover, div#footer a:hover { color: #fc0; } /*title and subtitle*/ .title { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 40px; font-weight: normal; line-height: 200%; top: 10px; margin-top: -90px; letter-spacing: 3px; text-shadow: 0.06em 0.06em 0.1em #000000; display: none; } .subtitle { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; top: 10px; display: none; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 0px; margin: 0px; letter-spacing: -1px; font-family: "Trebuchet MS" !Important; text-transform: uppercase; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { } .entry { margin: 0px 0px 0px 0px; padding: 10px; background-color: #F1F1EF; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; } .userpic { position: relative; float: right; background-color:#6C9 !important; padding: 12px; z-index: 15; margin-right: -115px; color: #333; } .userpic img { height: 80px; width: 80px; } .date { line-height: 10px; top: 5px; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: -1px; } .subject { font-weight: normal; padding: 2px; color: #999; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } .subject a, .subject a:link, .subject a:visited { color: #6C9; } .subject a:hover { color: #fc0; } .datesubject { background-color: #F1F1EF; padding: 5px; border-bottom: 1px solid #eeeeee; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/ .currents, .currentmood, .currentmusic { font-family: Arial, Helvetica, sans-serif; font-size: 10px; display: block !important; clear: right; text-align: left; } /*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/ .comments { font-family: Impact; font-size: 13px; text-align: right; padding: 70px 5px 0px 5px; position: relative; top: 0px; text-transform: uppercase; } div.comments a, div.comments a:link, div.comments a:visited { color: #6C9; } div.comments a:hover { color: #fc0; text-decoration: none; } /*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/ .separator { /* for formatting separators between entries */ height: 0px; border-top: 4px solid #fc0; } /*------------------------------------------------------------ Special friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; float: right; padding: 12px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; z-index: auto; background-color: #6C9!important; margin-right: -115px; } .userpicfriends img { height: 80px; width: 80px; } /*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/ .defaultuserpic { float: left; margin: 10px 10px 0px 10px; } .defaultuserpic img { width: 50px; height: 50px; border: 7px solid #f69; } .sbarheader { display: none; } .sbarbody { padding: 5px 5px 5px 5px; text-align: right; font-family: Arial, Helvetica, sans-serif; list-style-type: circle; } .sbarbody2 { padding: 0 15px 0 15px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #6C9; text-transform: lowercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } div#sidebar a:hover { color: #fc0; } /*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/ table.calendar, .sbarcalendar, .sbarcalendarposts { display: none } /*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/ ul.sbarlist { padding-left: 0px; margin-left: 0px; } li.sbaritem { padding-left: 15px; display: inline; } li.sbartitle { display: none; } /*---------------------------------------------------- footer ----------------------------------------------------------------*/ #footer { width: 600px; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; letter-spacing: -1px; color: #666; z-index: 100; text-transform: uppercase; } ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: none; } /*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/ ul.year { text-align: center; padding-bottom: 30px; color: #666; background-color: #F1F1EF; } ul.year li { display: inline; color: #666; background-color: #F1F1EF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable { margin-left: auto; margin-right: auto; color: #666; background-color: #F1F1EF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #E0E0E0; background-color: #F1F1EF; } table.yeartable td.yearday { background-color: #F1F1EF; text-align: center; } td.yearmonth { border-style: none; background-color: #F1F1EF; } /*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/ .datesubjectcomment { background-color: #F1F1EF; padding: 5px; margin-top: 20px; color: #999; } .userpiccomment { position: relative; background-color: #F69; top: -30px; left: 0px; padding: 12px; margin: 10px 10px -10px 10px; z-index: 15; float: left; width: 80px; height: 80px; } .box { padding: 10px; clear: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666; border: 1px solid #f1f1ef; } input, textarea { background-color: #EBEBE7; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; border-color: #f1f1ef; } #qrform table { border: none !important; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 125%; background-color: #FFF; color: #666; } .replytosubject { font-weight: normal; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #666; } .commentbox { padding: 10px; margin: 10px; background-color: #F1F1EF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #6C9; } .datesubjectcomment a:hover { color: #fc0; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #F1F1EF; } .commentinfo { background-color: #F1F1EF; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } /*--------------------------- Tags -------------------------------------*/ h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #999; font-weight: normal !important; padding: 12px !important; } .ljtaglist { list-style-type: none; color: #666; padding: 12px !important; } /*-------------------------------------------- Misc -----------------------------------------*/ .clear { height: 0px; } /*------------------------------------ Look of contextual Popup ------------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 5px 0 0 20px; font: normal 11px "Arial", "Verdana", sans-serif !important; } /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #F1F1EF !important; color: #666 !important; border: 1px solid #036; padding: 0px; width: 20em; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: bold !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: bold; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: bold; color: #999 !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /*------------------ Navigation Strip ---------------------------*/ #lj_controlstrip td { background-color: #000; color: #666666; border-left: none } #lj_controlstrip input { border: 1px solid #2d2d2d; background-color: #121212; color:#666 } #lj_controlstrip a { color: #999; font-family: Arial, Helvetica, sans-serif; } #lj_controlstrip_statustext { color: #666 } #lj_controlstrip_userpic { width: 30px; height: 30px } /*Tiny Icon Replacements*/ 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://i46.tinypic.com/f281uc.jpg) } img[src*="icon_private.gif"] { background-image: url(http://i49.tinypic.com/207b43d.jpg) } img[src*="icon_groups.gif"] { background-image: url(http://i46.tinypic.com/f281uc.jpg) } .ljuser img[src*="syndicated.gif"] { background-image: url(http://i47.tinypic.com/w0o040.jpg) !important } .ljuser img[src*="newsinfo.gif"] { background-image: url(http://i45.tinypic.com/2w68c4k.jpg) !important } .ljuser img[src*="partnercomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } .ljuser img[src*="sponcomm.gif"] { background-image: url(http://i56.tinypic.com/2r70im1.jpg) !important } img[src*="btn_del.gif"] { background-image: url(http://i47.tinypic.com/2evvlgj.jpg) } img[src*="btn_scr.gif"] { background-image: url(http://i47.tinypic.com/2nv9me0.jpg) } img[src*="btn_unscr.gif"] { background-image: url(http://i50.tinypic.com/mb5q2c.jpg) } img[src*="btn_freeze.gif"] { background-image: url(http://i45.tinypic.com/2luw8co.jpg) } img[src*="btn_unfreeze.gif"] { background-image: url(http://i46.tinypic.com/vqtbox.jpg) } img[src*="btn_track.gif"] { background-image: url(http://i45.tinypic.com/28aq7no.jpg) } img[src*="btn_tracking.gif"] { background-image: url(http://i49.tinypic.com/2hcmic0.jpg) } img[src*="btn_tracking_thread.gif"] { background-image: url(http://i46.tinypic.com/15rjvpk.jpg) } img[src*="anonymous.gif"] { background-image: url(http://i50.tinypic.com/33dgo08.jpg) } img[src*="openid-profile.gif"] { background-image: url(http://i50.tinypic.com/14xe2vt.jpg) } img[src*="userinfo.gif"] { background-image: url(http://i51.tinypic.com/mwaxqx.jpg) } img[src*="talk/none.gif"] { background-image: url(http://i51.tinypic.com/wgx4e9.jpg) } img[src*="help.gif"] { background-image: url(http://i49.tinypic.com/14l0y21.jpg) } img[src*="pencil.gif"] { background-image: url(http://i48.tinypic.com/aael2q.jpg) } img[src*="btn_edit.gif"] { background-image: url(http://i48.tinypic.com/95ynwh.jpg) } img[src*="upgrade-paid-icon.gif"] { background-image: url(http://i45.tinypic.com/x5nrtj.jpg) } .ljuser img { width: 0; height: 0; background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important } .ljuser img[src*="userinfo.gif"] { background: transparent url(http://i51.tinypic.com/mwaxqx.jpg) no-repeat center left !important; padding: 16px 16px 0 2px !important } .ljuser img[src*="community.gif"] { background: transparent url(http://i56.tinypic.com/2r70im1.jpg) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important } /*Metadata Icons*/ .currenttags, .currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic { padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%; float:right } .ljtags { background-image: url(http://i48.tinypic.com/wrkfvr.jpg) } .currentlocation { background-image: url(http://i45.tinypic.com/903fwj.jpg) } .currentmood { background-image: url(http://i49.tinypic.com/eriv5g.jpg) } .currentgroups { background-image: url(http://i50.tinypic.com/33xc56g.jpg) } .currentmusic { background-image: url(http://i47.tinypic.com/2gw7tyh.jpg) } .currenttags { background-image: url() } .currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong { display:none
Installation Instructions
- Go to Journal > Journal Style
- Choose a Flexible Squares theme
- Go to Change Page Setup and choose 2 Column (sidebar on right)
- For Plus accounts, choose Ad Placement > Between Entries !important!
- Go to Customize your Theme > Style
- Go to Custom CSS
- Set the first two options to No and "Use external stylesheets" to Yes
- Paste the code into the Custom stylesheet box and Save
- Tiny Icons by FamFam and pinvoke
- Credit is nice, but not necessary. Just don't remove my name from the code.
- I've done my best to remove all mistakes, but I'm still a newb, so if you notice anything weird, let me know and I'll try to solve it to the best of my ability.
- This layout is not meant to have a title, subtile, or a header image. Don't play around with those unless you know what you're doing.
- Watch mortgraphics if you like what you see!