fuesch | Photoshop CS layout & matching profile layout (Reply)

Because I love my old Photoshop CS, I made it into a layout. For everyone who also loves Photoshop. Or just likes having a confusing layout that has buttons you can't click.

Photoshop CS
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 26, Google Chrome 32 and Internet Explorer 10. The sidebar width isn't changeable, but you can change the width of the maincontent.
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 /* Photoshop CS http://fuesch.livejournal.com/42906.html / body { margin: 0px; padding: 0px; text-align: center; font-family: "Verdana", sans-serif; color: #000000; font-size: 12px; background: #C0C0C0; } body > div[style="width"] { position: absolute; margin: 0px auto!important; padding: 75px 0px 0px 0px!important; background-color: none!important; border: none!important; z-index: 1; } body > #content-outer + div[style="width"] { position: static; padding: 0px!important; } a, a:link { color: #3399FF; text-decoration: none; } a:visited { color: #2570BA; text-decoration: none; } a:hover { color: #3399FF; text-decoration: underline; } a:active { color: #0080FF; text-decoration: none; } code, kbd, pre, tt { font-family: "Courier New", Courier, monospace; font-size: 12px; } p, td, blockquote { font-size: 12px; } blockquote { padding: 10px 12px; border: 1px dashed #000000; } q { font-style: italic; } q i { font-style: normal; } / ------- GENERAL ------- / .clear { display: none; } .headerimage { position: fixed; display: block; left: 5px; bottom: 18px; width: 64px; height: 442px; background: url(http://fatfrog.info/Ma/A/layout/pscs/Toolbar.png); z-index: 15; } #content-outer { position: relative; z-index: 10; } #content { padding-bottom: 32px; background: url(http://fatfrog.info/Ma/A/layout/pscs/content.png) left top repeat-x; } #header { height: 76px; margin: 0px 0px 15px 0px; text-align: left; font-size: 11px; background: url(http://fatfrog.info/Ma/A/layout/pscs/header.png) right top no-repeat; } ul.navheader { position: absolute; margin: 0px; padding: 22px 0px 0px 3px; } ul.navheader li { display: inline; margin-left: -2px; font-size: 0px; } ul.navheader a, ul.navheader a:link, ul.navheader a:visited { display: inline-block; padding: 2px 6px 0px 6px; font-size: 11px; color: #000000; text-decoration: none; } ul.navheader a:hover { padding: 1px 5px 2px 5px; border-top: 1px solid #B0B1B1; border-left: 1px solid #959AA7; border-right: 1px solid #959AA7; border-bottom: 1px solid #7F838E; text-decoration: none; background: url(http://fatfrog.info/Ma/A/layout/pscs/navhover.gif) top; box-shadow: inset 0px 0px 1px #FFFFFF; border-radius: 3px; } ul.navheader a:active, ul.navheader li.view { padding: 1px 5px 2px 5px; border-top: 1px solid #585859; border-left: 1px solid #4A4C53; border-right: 1px solid #4A4C53; border-bottom: 1px solid #404247; text-decoration: none; font-size: 11px; text-decoration: none; background: url(http://fatfrog.info/Ma/A/layout/pscs/navactive.png); box-shadow: inset 1px 1px 2px #787878; border-radius: 3px; } .title { display: inline-block; margin: 3px 0px 0px 26px; } .subtitle { display: inline; margin-left: -1px; padding-left: 8px; background: url(http://fatfrog.info/Ma/A/layout/pscs/subtitle.png) left 7px no-repeat; } #sidebar { float: right; margin-right: 15px; width: 200px; text-align: left; font-size: 9px; } #sidebar .ljuser img[src="userinfo"], #sidebar .ljuser img[src="userhead"] { width: 0px!important; height: 0px!important; padding: 7px 0px 3px 9px!important; background: url(http://fatfrog.info/Ma/A/layout/pscs/user.png) no-repeat!important; } #sidebar .ljuser img[src="community.gif"] { width: 0px!important; height: 0px!important; padding: 7px 0px 3px 15px!important; background: url(http://fatfrog.info/Ma/A/layout/pscs/comm.png) no-repeat!important; } #sidebar a, #sidebar a:link { color: #000000; } #sidebar a:visited { color: #6A6A6A; } #sidebar a:active { text-decoration: underline; } #sidebar > div[style="width"] { margin: 0px auto!important; } .sbarbody { margin: 0px 0px 1px 0px; background: url(http://fatfrog.info/Ma/A/layout/pscs/sbarbody.png) top no-repeat; } .sbarbody2 { margin: -3px 0px 1px 0px; padding: 8px; background: url(http://fatfrog.info/Ma/A/layout/pscs/sbarbody2-bottom.png) bottom repeat-x, url(http://fatfrog.info/Ma/A/layout/pscs/sbarbody2-bg.png); } #sidebar .sbarbody2 a { color: #3399FF; } #sidebar .sbarbody2 a:visited { color: #2570BA; } #sidebar .sbarbody2 a:hover { color: #3399FF; text-decoration: underline; } #sidebar .sbarbody2 a:active { color: #0080FF; text-decoration: none; } ul.sbarlist { margin: 0px; padding: 18px 0px 2px 0px; list-style: none; } ul.sbarlist + .sbarlist { margin: 0px; padding: 0px 3px 3px 3px; list-style: none; background: url(http://fatfrog.info/Ma/A/layout/pscs/sbarbody2-bottom.png) bottom repeat-x, url(http://fatfrog.info/Ma/A/layout/pscs/sbarbody2-bg.png); } li.sbartitle { display: inline-block; height: 15px; margin: 0px 14px 0px 9px; padding: 1px 16px 0px 5px; list-style: none; font-weight: bold; background: url(http://fatfrog.info/Ma/A/layout/pscs/sbartitle-right.png) bottom right no-repeat, url(http://fatfrog.info/Ma/A/layout/pscs/sbartitle-bg.png) bottom repeat-x; } li.sbaritem { margin: 0px; padding: 1px 5px 6px 30px; color: #A0A0A0; background: url(http://fatfrog.info/Ma/A/layout/pscs/listitem.png) left top no-repeat; } li.sbaritem + li { border-top: 1px solid #FFFFFF; } li.sbaritem:hover { color: #000000; background: #3399FF url(http://fatfrog.info/Ma/A/layout/pscs/listitem-hover.png) left top no-repeat; } #sidebar li.sbaritem:hover a { color: #FFFFFF; font-weight: bold; text-decoration: none; } .defaultuserpic { height: 126px; margin: 0px 0px 1px 0px; padding-top: 42px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pscs/defaulticon.png); } #sidebar_calendar ul.sbarlist + .sbarlist { margin-top: -2px; padding: 5px 0px; } table.calendar { margin: 0px auto; } .sbarcalendar { padding: 2px 4px; text-align: right; font-size: 9px; color: #808080; border: 1px solid #ABADB3; box-shadow: inset 0px 0px 0px 1px #FFFFFF; } .sbarcalendarposts { padding: 2px 4px; text-align: right; font-size: 9px; background: #FFFFFF; border: 1px solid #E2E3EA; border-top: 1px solid #ABADB3; border-bottom: 1px solid #E3E9EF; } .sbarcalendarposts a { display: block; } .tagcloud { padding: 8px; list-style: none; font-size: 12px; } .tagcloud span { margin-right: 3px; vertical-align: middle; } #sidebar_linklist li.sbaritem { padding: 0px 0px 0px 45px; background: url(http://fatfrog.info/Ma/A/layout/pscs/listitem-links.png) left top no-repeat; } #sidebar_linklist li.sbaritem:hover a { color: #000000; font-weight: normal; } #sidebar_linklist li.sbaritem a { display: block; padding: 4px 5px 9px 5px; } #sidebar_linklist li.sbaritem a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; background: #3399FF; } #maincontent { margin: 0px 250px 0px 100px; text-align: left; } #maincontent > div[style="margin"] { margin: 10px auto!important; text-align: center; } #footer { display: block; position: fixed; bottom: 0px; width: 100%; height: 17px; padding: 0px 1px 1px 48px; text-align: left; background: #F0F0F0 url(http://fatfrog.info/Ma/A/layout/pscs/footer.png) left top no-repeat; z-index: 100; clear: both; } ul.navfooter{ height: 15px; margin: 0px; padding: 0px; font-size: 9px; border: 1px solid #FFFFFF; border-left: none; } ul.navfooter li { display: inline-block; margin: 0px 5px; padding: 1px 0px 2px 0px; text-transform: capitalize; } ul.navfooter li + li { padding-left: 21px; background: url(http://fatfrog.info/Ma/A/layout/pscs/navfooter.png) left top no-repeat; } .clearfoot { display: none; clear: both; } /* ------- ENTRIES & FRIENDS ------- / .subcontent { position: relative; min-height: 124px; background: #FFFFFF; border: 1px solid #000000; margin-bottom: 15px; z-index: 1; } .userpic { position: relative; float: right; padding-right: 2px; margin: 0px 0px 5px 10px; background: none!important; z-index: 15; } .userpicfriends { position: relative; float: right; margin: 0px 0px 5px 10px; padding-right: 2px; text-align: right; font-size: 10px; background: none!important; z-index: 15; } .userpic img, .userpicfriends img { margin-right: -2px; } .userpicfriends font { background: #FFFFFF; color: #3399FF; } .userpicfriends font:hover { text-decoration: underline; } .datesubject { margin: 0px 10px 2px 10px; font-family: Georgia, "Times New Roman", Times, serif; border-bottom: 1px solid #7F7F7F; } .date, .replytoposter { padding: 10px 2px 0px 2px; font-size: 10px; text-transform: uppercase; } .subject, .replytosubject { margin-bottom: -5px; padding: 0px 2px 10px 2px; font-size: 20px; background: url(http://fatfrog.info/Ma/A/layout/pscs/path.png) left bottom no-repeat, url(http://fatfrog.info/Ma/A/layout/pscs/path.png) right bottom no-repeat; } .entry { padding: 0px 10px; text-align: left; } .entry_text { margin: 0px 2px; padding: 10px 10px 12px 10px; border-left: 1px solid #7F7F7F; border-right: 1px solid #7F7F7F; } .ljtags { margin-top: 12px; color: #ABABAB; font-size: 10px; font-weight: bold; } .currents { margin: 0px 2px; padding: 0px 10px 12px 10px; color: #ABABAB; font-size: 10px; font-weight: bold; border-left: 1px solid #7F7F7F; border-right: 1px solid #7F7F7F; } .comments { margin-top: -5px; padding: 10px 2px 5px 2px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #FFFFFF; background: url(http://fatfrog.info/Ma/A/layout/pscs/path.png) top left no-repeat, url(http://fatfrog.info/Ma/A/layout/pscs/comments.png) right top repeat-x; } .comments a { padding: 0px 5px; } .separator { display: none; } / ------- COMMENTS ------- / .skiplinks { position: relative; margin-bottom: -1px; padding: 10px 10px 0px 10px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #FFFFFF; background: #FFFFFF; border: 1px solid #000000; border-bottom: none; z-index: 2; } .box { position: relative; margin-top: -16px; padding: 0px 10px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; background: #FFFFFF; border: 1px solid #000000; border-top: none; z-index: 2; } .box center { margin-bottom: 10px; } .box center b { display: none; } .box + .box { margin-top: -1px; } .box + .box center b { display: inline; font-weight: normal; } .commentbox { margin: 0px 0px 16px 0px; text-align: left; border: 1px solid #7F7F7F; } .datesubjectcomment { margin: -3px -3px 0px -3px; padding: 13px 13px 0px 13px; font-size: 10px; text-transform: uppercase; background: url(http://fatfrog.info/Ma/A/layout/pscs/anchorpoint.png) left top no-repeat, url(http://fatfrog.info/Ma/A/layout/pscs/anchorpoint.png) right top no-repeat; } .datesubjectcomment strong { font-size: 20px; text-transform: none; font-weight: normal; } .userpiccomment { position: relative; float: right; margin: -10px -10px 5px 10px; z-index: 15; } .commentreply { position: relative; margin: 0px -3px; padding: 10px 13px 18px 13px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: url(http://fatfrog.info/Ma/A/layout/pscs/path.png) left bottom no-repeat; } .commentreply + div { margin: 0px -3px -3px -3px!important; padding: 5px 13px 13px 13px; text-align: left!important; font-size: 0px!important; background: url(http://fatfrog.info/Ma/A/layout/pscs/anchorpoint.png) left bottom no-repeat, url(http://fatfrog.info/Ma/A/layout/pscs/anchorpoint.png) right bottom no-repeat; } .commentreply + div a { padding: 0px 7px 0px 0px; font-size: 10px; } .commentreply + div div { padding: 3px 0px 0px 0px!important; text-align: left!important; font-size: 10px; } .commentreply + div div a { padding: 0px; } .commentreply + div div img { height: 15px; width: 15px; vertical-align: text-bottom; } .commentboxpartial { margin: 0px 0px 13px 0px; text-align: left; font-size: 10px; text-transform: uppercase; } .datesubjectcomment .ljuser img[src="userinfo"], .datesubjectcomment .ljuser img[src="userhead"], .commentboxpartial .ljuser img[src="userinfo"], .commentboxpartial .ljuser img[src="userhead"], .replytoposter .ljuser img[src="userinfo"], .replytoposter .ljuser img[src="userhead"] { width: 0px!important; height: 0px!important; padding: 7px 0px 4px 9px!important; background: url(http://fatfrog.info/Ma/A/layout/pscs/user.png) no-repeat!important; } #qrform, #postform { margin-bottom: 13px; text-align: left; } #qrform table { border: none!important; } .commentbox #qrform { margin-bottom: 0px; padding-top: 10px; } .commentbox #qrform a { font-size: 12px; } .commentbox #qrform td > b { font-weight: normal; } input, textarea { padding: 2px; color: #000000; text-shadow: 0px 0px 1px #FFFFFF; background: #FFFFFF url(http://fatfrog.info/Ma/A/layout/pscs/input.png) left top; border: 1px solid #CCCCCC; } input[type='radio'], input[type='checkbox'] { padding: 0px; background: none; } input[type='submit'], input[type='button'] { padding: 1px; color: #FFFFFF; font-size: 9px; font-weight: bold; text-shadow: none; background: #000000; border: none; } input[type='submit']:active, input[type='button']:active { position: relative; top: 1px; left: 1px; } textarea.textbox { width: 95% !important; } .lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div { display: none; } .lj-view-reply .box { padding-top: 13px; } / ------- CALENDAR ------- / .lj-view-archive #maincontent { background: #FFFFFF; padding: 10px 10px 0px 10px; text-align: center; border: 1px solid #000000; } .lj-view-archive #maincontent br { display: none; } ul.year { margin: 0px; padding: 0px 0px 10px 0px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; } ul.year li { padding: 0px 2px; display: inline; } table.yeartable { display: inline-table; margin: 0px 10px 10px 10px; } td.yearmonth { font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif; border-style: none; } td.yearmonth a { font-size: 10px; text-transform: uppercase; border-style: none; } table.yeartable td.yearday { width: 30px; padding: 10px; text-align: center; background: #F0F0F0; } table.yeartable td.yeardate { text-align: right; font-size: 9px; color: #808080; } table.yeartable td.yeardate a { display: block; padding: 2px 4px; text-align: center; font-size: 9px; background: #FFFFFF; border: 1px solid #E2E3EA; border-top: 1px solid #ABADB3; border-bottom: 1px solid #E3E9EF; } td.yeardate div { padding: 3px 5px; background: #F0F0F0; border: 1px solid #ABADB3; border-bottom: none; } td.yeardate div + div { height: 18px; padding: 0px 5px 3px 5px; background: #F0F0F0; border-top: none; border-bottom: 1px solid #ABADB3; } .lj-view-month #maincontent form { position: relative; margin: 0px 0px -1px 0px; padding: 10px; background: #FFFFFF; border: 1px solid #000000; border-bottom: none; z-index: 2; } .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 { font-size: 0px; } .lj-view-month dt { margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; } .lj-view-month dt b { font-weight: normal; } .lj-view-month dd { margin: 0px 0px 10px 0px; font-size: 12px; } .lj-view-day .skiplinks { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #000000; } / ------- TAGS ------- */ .lj-view-tags #maincontent { background: #FFFFFF; padding: 10px; text-align: left; border: 1px solid #000000; } .lj-view-tags h2 { margin: 0px; padding: 0px 0px 10px 0px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: normal; background: url(http://fatfrog.info/Ma/A/layout/pscs/path.png) left bottom no-repeat; } ul.ljtaglist { margin: -2px 0px 0px 2px; padding: 0px; list-style: none; font-weight: normal; border-left: 1px solid #7F7F7F; } ul.ljtaglist li { margin: 0px 0px 0px -3px; padding: 7px 0px 0px 10px; background: url(http://fatfrog.info/Ma/A/layout/pscs/anchorpoint.png) left 12px no-repeat; }

Profile Layout

You can put links here or more text, if you want.

This profile layout's width is flexible.

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>

HEADLINE HERE

</font></td><td rowspan="2" colspan="2" background="http://fatfrog.info/Ma/A/layout/pscs/header.png"></td></tr>
<tr><td colspan="2" height="18" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000">

<a href="">LINKS</a>  <a href="">HERE</a>

</font></td></tr>
<tr><td height="36" width="20"></td><td></td><td width="80"><td width="20"></td></tr>
<tr><td height="20" colspan="4" bgcolor="#C0C0C0"></td></tr>
<tr><td bgcolor="#C0C0C0"></td><td colspan="2" bgcolor="#C0C0C0"><table width="100%" cellpadding="10" cellspacing="1" bgcolor="#000000"><tr><td bgcolor="#FFFFFF"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000">

CONTENT HERE

</font></td></tr></table></td><td bgcolor="#C0C0C0"></td></tr>
<tr><td height="20" colspan="4" bgcolor="#C0C0C0"></td></tr>
<tr><td colspan="4" height="18" background="http://fatfrog.info/Ma/A/layout/pscs/profile-footer.png"></td></tr></table>

</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.

Photoshop CS layout & matching profile layout

Post a comment in response: