The first of my Jim ships to get a layout (not that this means I'll make layouts featuring my other Jim ships, so far I don't have any planned)! This layout also features the delicious OTP of Jim's IOU apple/Molly's cherries.
I had fun trying out 2 new things here: a fake drop-down menu and making the entry-security a lot more prominent.

ETA (20.4.14): Font problem solved. Fortunately it was just the Cookie font that didn't work, not all Google Fonts. So I choose a similar font.

Office Romance
preview	Click here for live preview, then click on the layout's icon.
layout info	Based on Flexible Squares. Works for all account types. Tested in Firefox 27, Google Chrome 33 and Internet Explorer 11. The widths of content, maincontent and sidebar are changeable without problem. IMPORTANT: LJ seems to have changed something regarding Google fonts. Currently the layout won't show at all, if the font is still in the CSS. You'll have to remove all font-family: 'Cookie'; lines and @font-face { font-family: 'Cookie'; font-style: normal; font-weight: 400; src: local('Cookie-Regular'), url(http://themes.googleusercontent.com/static/fonts/cookie/v4/Tvkve1y-JrkMx2S9u2OW1g.woff) format('woff'); }
how to implement this layout	Go to the Customize Journal page. Make sure Style System is S2. Choose the Flexible Squares layout. Go to Custom CSS » Use layout's stylesheet(s): No » Use layout's stylesheet(s) when including custom external stylesheet: No » Use external stylesheets: No insert custom stylesheet /* Office Romance http://fuesch.livejournal.com/43482.html */ body { margin: 20px 0px 0px 0px; padding: 0px 0px 30px 0px; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #AA0003; font-size: 12px; background: #878E29 url(http://fatfrog.info/Ma/A/layout/officeromance/bg.png); } @font-face { font-family: 'Cookie'; font-style: normal; font-weight: 400; src: local('Cookie-Regular'), url(http://themes.googleusercontent.com/static/fonts/cookie/v4/Tvkve1y-JrkMx2S9u2OW1g.woff) format('woff'); } body > div[style*="width"] { margin: 0px auto!important; padding: 0px!important; background-color: none!important; border: none!important; } body > #content-outer + div[style*="width"] { margin: 15px auto -15px auto!important; } a, a:link { color: #616723; text-decoration: none; } a:visited { color: #989F41; text-decoration: none; } a:hover { color: #616723; text-decoration: underline; } a:active { color: #B5C400; text-decoration: none; } code, kbd, pre, tt { font-family: "Courier New", Courier, monospace; font-size: 12px; } p, td, blockquote { font-size: 12px; } blockquote { min-height: 25px; margin-left: 0px; padding: 8px 0px 0px 50px; background: url(http://fatfrog.info/Ma/A/layout/officeromance/blockquote.png) left top no-repeat; } q { font-style: italic; } q i { font-style: normal; } /* ------- GENERAL ------- */ .clear { display: none; } .ljuser img[src*="userinfo.gif"] { width: 0px!important; height: 0px!important; padding: 17px 0px 0px 10px !important; background: transparent url(http://fatfrog.info/Ma/A/layout/officeromance/ljuser.png) no-repeat!important; } .ljuser img[src*="community.gif"] { width: 0px!important; height: 0px!important; padding: 17px 0px 0px 16px !important; background: transparent url(http://fatfrog.info/Ma/A/layout/officeromance/ljcomm.png) no-repeat!important; } .headerimage { position: relative; height: 321px; width: 950px; margin: 0px auto; background: url(http://fatfrog.info/Ma/A/layout/officeromance/JimMolly.png) right no-repeat; z-index: 1; } #content { width: 930px; padding: 10px 10px 0px 10px; margin: -26px auto 0px auto; background: #F2EDD4; border-radius: 30px; } #header { height: 34px; margin-bottom: 10px; padding: 6px 12px 0px 8px; text-align: right; background: #989F41; border-radius: 20px; } ul.navheader { position: absolute; height: 17px; margin: 2px 0px 0px 0px; padding: 2px 20px 5px 7px; text-align: left; font-variant: small-caps; font-weight: bold; letter-spacing: 1px; background: #F2EDD4 url(http://fatfrog.info/Ma/A/layout/officeromance/arrow.png) right 11px no-repeat; border-radius: 12px; box-shadow: 0px 0px 5px #989F41; overflow: hidden; z-index: 50; } ul.navheader li { display: table-row-group; margin: 0px; padding: 5px 0px 0px 0px; list-style: none; line-height: 19px; } ul.navheader li.view { display: table-header-group; } ul.navheader:hover { display: table; } ul.navheader a, ul.navheader a:link { color: #989F41; text-decoration: none; } ul.navheader a:hover { color: #616723; text-decoration: none; } ul.navheader a:active { color: #B5C400; text-decoration: none; } .title, .subtitle { display: inline; padding-left: 10px; font-size: 22px; font-family: 'Cookie'; color: #F2EDD4; } #sidebar { float: right; width: 200px; margin: 0px; padding: 0px; text-align: left; } #sidebar > div[style*="width"] { width: 200px!important; margin: -10px 0px 10px 0px!important; text-align: center; } .sbarbody { padding: 0px; } .sbarbody2 { margin: 0px 0px 20px 0px; padding: 10px 10px 0px 0px; } ul.sbarlist { margin: 0px; padding: 0px; list-style: none; } ul.sbarlist + .sbarlist { margin: 0px 0px 20px 0px; padding: 3px 10px 0px 0px; list-style: none; } li.sbartitle { height: 34px; margin: 0px; padding: 7px 40px 0px 12px; text-align: right; font-size: 24px; color: #F2EDD4; background: url(http://fatfrog.info/Ma/A/layout/officeromance/sbar-blurb.png) right top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; font-family: 'Cookie'; } #sidebar_tags li.sbartitle { background: url(http://fatfrog.info/Ma/A/layout/officeromance/sbar-tags.png) right top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; } #sidebar_summary li.sbartitle { background: url(http://fatfrog.info/Ma/A/layout/officeromance/sbar-summary.png) right top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; } #sidebar_calendar li.sbartitle { background: url(http://fatfrog.info/Ma/A/layout/officeromance/sbar-calendar.png) right top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; } #sidebar_linklist li.sbartitle { background: url(http://fatfrog.info/Ma/A/layout/officeromance/sbar-links.png) right top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; } li.sbaritem { margin: 0px; padding: 7px 0px 0px 0px; } .tagcloud { padding: 7px 0px 0px 0px; list-style: none; } .tagcloud span { margin-right: 5px; vertical-align: middle; } .defaultuserpic { margin: 0px 0px 20px 0px; padding: 53px 0px 0px 0px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/officeromance/sbar-defaulticon.png) right top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; } table.calendar { margin: 5px auto 0px 0px; } .sbarcalendar { padding: 3px 4px; text-align: center; border: 1px solid #C6AF63; border-radius: 3px; } .sbarcalendarposts { padding: 3px 4px; text-align: center; border: 1px solid #616723; border-radius: 3px; } .sbarcalendarposts a { display: block; } #maincontent { margin: 0px 210px 0px 0px; text-align: left; } #maincontent > div[style*="margin"] { margin: -10px auto 10px auto!important; text-align: center; } .clearfoot { height: 1px; clear: both; } #footer { height: 34px; margin-top: -1px; padding: 6px 12px 0px 8px; text-align: right; background: #989F41; text-transform: capitalize; border-radius: 20px; } ul.navfooter { position: absolute; height: 17px; margin: 2px 0px 0px 0px; padding: 2px 20px 5px 7px; text-align: left; font-variant: small-caps; font-weight: bold; letter-spacing: 1px; background: #F2EDD4 url(http://fatfrog.info/Ma/A/layout/officeromance/arrow.png) right 11px no-repeat; border-radius: 12px; box-shadow: 0px 0px 5px #989F41; overflow: hidden; z-index: 50; } ul.navfooter li { display: table-row-group; margin: 0px; padding: 5px 0px 0px 0px; list-style: none; line-height: 19px; } ul.navfooter li.viewing { display: table-header-group; } ul.navfooter:hover { display: table; } ul.navfooter a, ul.navfooter a:link { color: #989F41; text-decoration: none; } ul.navfooter a:hover { color: #616723; text-decoration: none; } ul.navfooter a:active { color: #B5C400; text-decoration: none; } #footer + .clearfoot { height: 10px; } /* ------- ENTRIES & FRIENDS ------- */ .subcontent { margin-bottom: 20px; } .userpic { position: relative; float: right; margin: 5px 5px 10px 10px; background: none!important; z-index: 15; } .userpicfriends { position: relative; float: right; margin: 5px 5px 10px 10px; text-align: right; color: #C6AF63; font-size: 10px; background: none!important; z-index: 15; } .userpicfriends font { color: #616723; } .datesubject { height: 75px; padding: 0px 12px 0px 70px; background: #AA0003 url(http://fatfrog.info/Ma/A/layout/officeromance/entry-public.png) 5px center no-repeat; border-top-left-radius: 38px; border-bottom-left-radius: 38px; } .date, .replytoposter { padding: 9px 0px 5px 0px; font-size: 11px; color: #C5676A; font-variant: small-caps; font-weight: bold; } .replytoposter a { color: #FFFFFF; } .replytoposter .ljuser b { font-weight: bold; } .subject, .replytosubject { padding-left: 6px; font-size: 24px; color: #F2EDD4; font-family: 'Cookie'; line-height: 22px; } .subject a, .subject a:link { color: #FFFFFF; } .subject img[src*="protected"] { position: absolute; margin: -23px 0px 0px -71px; width: 0; height: 0; padding: 65px 0px 0px 65px !important; background: transparent url(http://fatfrog.info/Ma/A/layout/officeromance/entry-friends.png) no-repeat; z-index: 1; } .subject img[src*="groups"] { position: absolute; margin: -23px 0px 0px -71px; width: 0; height: 0; padding: 65px 0px 0px 65px !important; background: transparent url(http://fatfrog.info/Ma/A/layout/officeromance/entry-group.png) no-repeat; z-index: 1; } .subject img[src*="private"] { position: absolute; margin: -23px 0px 0px -71px; width: 0; height: 0; padding: 65px 0px 0px 65px !important; background: transparent url(http://fatfrog.info/Ma/A/layout/officeromance/entry-private.png) no-repeat; z-index: 1; } .subject img[src*="sticky"] { position: absolute; margin: -37px 0px 0px -83px; width: 0; height: 0; padding: 48px 0px 0px 32px !important; background: transparent url(http://fatfrog.info/Ma/A/layout/officeromance/entry-sticky.png) no-repeat; z-index: 2; } .entry { padding: 10px 5px 0px 19px; text-align: left; } .ljtags { margin-top: 12px; color: #C6AF63; font-weight: bold; } .currents { margin-top: 12px; color: #C6AF63; font-weight: bold; } .currents strong { font-weight: bold; } .currents div + div { margin-top: 3px; } .ljtags a, .currents a { font-weight: normal; } .comments { margin: 12px -5px 0px -19px; text-align: center; font-size: 0px; font-weight: bold; text-transform: capitalize; font-variant: small-caps; letter-spacing: 1px; background: #AA0003 url(http://fatfrog.info/Ma/A/layout/officeromance/comments.png) center top no-repeat; border-radius: 12px; } div.comments a { display: inline-block; width: 49%; padding: 5px 0px; font-size: 11px; color: #F2EDD4; background: url(http://fatfrog.info/Ma/A/layout/officeromance/nocomments.png) center top no-repeat; } div.comments a:hover { color: #FFFFFF; text-decoration: none; } .separator { display: none; } /* ------- COMMENTS ------- */ .skiplinks { margin-top: -14px; padding: 0px 5px 0px 32px; text-align: right; font-size: 0px; } .skiplinks a { padding: 2px 7px 0px 7px; font-size: 11px; font-weight: bold; text-transform: capitalize; font-variant: small-caps; letter-spacing: 1px; background: #F2EDD4; border: 1px solid #989F41; border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px; } .skiplinks a:hover { text-decoration: none; border: 1px solid #616723; border-bottom: none; } .skiplinks a + a { margin-left: 5px; } .box center { margin-bottom: 20px; } .box + .box center { margin-top: 10px; } .box + .box { text-align: center; } .commentbox { margin: 0px 0px 20px 0px; } .datesubjectcomment { min-height: 31px; padding: 10px 10px 0px 40px; text-align: left; font-size: 11px; color: #C5676A; font-variant: small-caps; font-weight: bold; background: url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bubble.png) left top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) repeat-x; } .datesubjectcomment a { color: #FFFFFF; } .datesubjectcomment br { display: none; } .datesubjectcomment strong { display: block; margin: 20px 0px -7px -20px; font-family: 'Cookie'; font-size: 24px; color: #AA0003; font-variant: normal; font-weight: normal; line-height: 22px; } .datesubjectcomment .ljuser b { font-weight: bold; } .userpiccomment { position: relative; float: right; margin: -5px -5px 5px 10px; z-index: 15; } .commentreply { padding: 12px 20px; } .commentreply + div { margin: 0px!important; padding: 1px 0px 2px 0px; text-align: right!important; font-size: 0px!important; } .commentreply + div a { padding: 2px 7px; font-size: 11px; font-weight: bold; text-transform: capitalize; font-variant: small-caps; letter-spacing: 1px; border: 1px solid #989F41; border-radius: 10px; } .commentreply + div a + a, .commentreply + div span a , .commentreply + div span + a { margin-left: 5px; } .commentreply + div div { display: inline; padding: 0px 0px 0px 5px!important; font-size: 11px; } .commentreply + div div a { padding: 2px; border-radius: 5px; } .commentreply + div div a + a { margin-left: 3px; } .commentreply + div div img { height: 13px; width: 13px; margin-bottom: -3px; } .commentboxpartial { margin: 0px 0px 20px 0px; padding: 4px 7px 5px 7px; text-align: left; font-size: 11px; color: #C5676A; font-variant: small-caps; font-weight: bold; background: #AA0003; border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .commentboxpartial a { color: #FFFFFF; } .commentboxpartial .ljuser img[src*="userinfo.gif"] { padding: 0px!important; } .commentboxpartial .ljuser b { font-weight: bold; } #qrform { margin-bottom: 20px; text-align: left; } #qrform table { border: none!important; } .commentbox #qrform { margin: 20px 0px 0px 0px; } .commentbox #qrform a { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; text-transform: none; font-variant: normal; letter-spacing: 0px; border: none; border-radius: 0px; } input[type='text'], textarea { padding: 3px 5px; color: #AA0003; background: #FFFFFF; border: 3px solid #989F41!important; border-radius: 12px; } input[type='submit'], input[type='button'] { margin: 0px 0px 1px 0px; padding: 0px 4px; font-size: 11px; color: #FFFFFF; font-weight: bold; text-transform: capitalize; font-variant: small-caps; letter-spacing: 1px; background: #989F41; border: 2px solid #616723!important; border-top: 1px solid #616723!important; border-bottom: 3px solid #616723!important; border-radius: 10px; } input[type='submit']:active, input[type='button']:active { position: relative; top: 1px; border: 2px solid #616723!important; } textarea.textbox { width: 95%!important; } .lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div { display: none; } /* ------- CALENDAR ------- */ .lj-view-archive #maincontent br { display: none; } ul.year { margin: 0px 0px 10px 0px; padding: 1px 0px 3px 0px; text-align: center; } ul.year li { display: inline; } ul.year li.active { padding: 2px 7px; font-size: 11px; font-weight: bold; letter-spacing: 1px; border: 1px solid #AA0003; border-radius: 10px; } ul.year a { padding: 2px 7px; font-size: 11px; font-weight: bold; letter-spacing: 1px; border: 1px solid #989F41; border-radius: 10px; } ul.year a:hover { text-decoration: none; border: 1px solid #616723; } table.yeartable { margin: 0px 0px 20px auto; background: url(http://fatfrog.info/Ma/A/layout/officeromance/calendar.png) left top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top repeat-x; } td.yearmonth { padding: 6px 0px 9px 40px; font-size: 24px; color: #F2EDD4; font-family: 'Cookie'; } td.yearmonth + td { padding: 11px 10px 0px 0px; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-variant: small-caps; font-weight: bold; } td.yearmonth a { color: #FFFFFF; } table.yeartable td.yearday { padding: 0px 10px; text-align: center; font-family: 'Cookie'; font-size: 24px; } table.yeartable td.yeardate { padding: 0px; } table.yeartable td.yeardate a { display: block; } td.yeardate div { padding: 3px 5px 0px 5px; border: 1px solid #C6AF63; border-bottom: none; border-top-left-radius: 7px; border-top-right-radius: 7px; } td.yeardate div + div { padding: 0px 5px 4px 5px; font-weight: bold; border-top: none; border-bottom: 1px solid #C6AF63; border-radius: 0px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } .lj-view-month #maincontent form { padding: 0px 0px 10px 0px; } .lj-view-month #maincontent form input[type='submit']:active { margin-bottom: 2px; } .lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br { display: none; } .lj-view-month .entry { padding: 0px; font-size: 0px; } .lj-view-month dt { height: 33px; margin: 0px; padding: 8px 0px 0px 40px; font-size: 24px; font-family: 'Cookie'; background: url(http://fatfrog.info/Ma/A/layout/officeromance/calendar.png) left top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top; } .lj-view-month dt a { color: #FFFFFF; } .lj-view-month dt b { font-weight: normal; } .lj-view-month dd { margin: 0px; padding: 10px 5px 20px 19px; text-align: left; font-size: 12px; } .lj-view-day .skiplinks { margin: 0px 0px 10px 0px; padding: 0px; text-align: center; } .lj-view-day .skiplinks a { padding: 2px 7px; border: 1px solid #989F41; border-radius: 10px; } .lj-view-day .skiplinks a:hover { border: 1px solid #616723; } .lj-view-day .separator + .clear + .clear + .skiplinks { margin-top: -10px; } /* ------- TAGS ------- */ .lj-view-tags h2 { margin: 0px; padding: 8px 0px 6px 40px; font-size: 24px; color: #F2EDD4; font-family: 'Cookie'; font-weight: normal; background: url(http://fatfrog.info/Ma/A/layout/officeromance/calendar.png) left top no-repeat, url(http://fatfrog.info/Ma/A/layout/officeromance/comment-bg.gif) top; } ul.ljtaglist { margin: 0px; padding: 3px 0px 10px 19px; list-style: none; } ul.ljtaglist li { padding: 7px 0px 0px 0px; }

	You can change this profile layout's width, if you want, but it should be at least 450px wide. Go to Edit Profile and insert the code into the Bio part. To copy the code, click in the text area and then press Ctrl+A and Ctrl+C. <lj-raw> <center><table cellpadding="0" cellspacing="0" background="http://fatfrog.info/Ma/A/layout/officeromance/bg.png"> <tr><td width="29" height="29" background="http://fatfrog.info/Ma/A/layout/officeromance/profile-topleft.png"></td><td></td><td width="420"></td><td width="29" background="http://fatfrog.info/Ma/A/layout/officeromance/profile-topright.png"></td></tr> <tr><td></td><td></td><td height="229" colspan="2" background="http://fatfrog.info/Ma/A/layout/officeromance/profile-header.png"></td></tr> <tr><td height="29" background="http://fatfrog.info/Ma/A/layout/officeromance/profile-middleleft.png"></td><td colspan="2" bgcolor="#F2EDD4"></td><td background="http://fatfrog.info/Ma/A/layout/officeromance/profile-middleright.png"></td></tr> <tr><td bgcolor="#F2EDD4"></td><td colspan="2" bgcolor="#F2EDD4"><font face="Arial, Helvetica, sans-serif" size="2" color="#AA0003"> CONTENT HERE </font></td><td bgcolor="#F2EDD4"></td></tr> <tr><td height="29" bgcolor="#FFFFFF" background="http://fatfrog.info/Ma/A/layout/officeromance/profile-bottomleft.png"></td><td colspan="2" bgcolor="#F2EDD4"></td><td bgcolor="#FFFFFF" background="http://fatfrog.info/Ma/A/layout/officeromance/profile-bottomright.png"></td></tr> </table></center> </lj-raw> You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with <br> and <p>. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key. If you want to change the link color, put a font tag with a different color in your link. Like so: <a href="URL"><font color="#616723">LINK TEXT</font></a>