Harry Potter and the Prisoner of Livejournal layout & profile layout

[fuesch]

Harry Potter and the Prisoner of Livejournal
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 30, Google Chrome 35 and Internet Explorer 11. The widths of maincontent and sidebar are changeable without problem.
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 /* Harry Potter and the Prisoner of Livejournal http://fuesch.livejournal.com/44717.html */ body { margin: 0px; padding: 0px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; color: #4D9981; font-size: 12px; background: #CF1818 url(http://fatfrog.info/Ma/A/layout/hp/3/bg1.jpg) top center fixed; background-size: cover; } body > div[style*="width"] { width: 100%!important; margin: 0px!important; padding: 0px!important; background-color: #731E7B!important; border: none!important; } body > .wrapper + div[style*="width"] { background-color: #000000!important; } a, a:link { color: #FFCE7E; text-decoration: none; } a:visited { color: #D1947D; text-decoration: none; } a:hover { color: #FFCE7E; text-decoration: underline; } a:active { color: #FFE4B7; text-decoration: underline; } code, kbd, pre, tt { font-family: "Courier New", Courier, monospace; font-size: 12px; } p, td, blockquote { font-size: 12px; } blockquote { padding: 15px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } q { font-style: italic; } q i { font-style: normal; } /* ------- GENERAL ------- */ .ljuser a { color: #FFCE7E; } .ljuser a:active { color: #FFE4B7; } .clear { display: none; } #header { margin: 0px 0px 50px 0px; padding: 20px 0px; text-align: center; font-weight: bold; letter-spacing: 2px; background: #731E7B; border-bottom: 5px solid #4D9981; } ul.navheader { display: inline-block; height: 24px; margin: 0px auto; padding: 10px 10px 0px 10px; font-size: 0px; color: #731E7B; text-transform: uppercase; background: url(http://fatfrog.info/Ma/A/layout/hp/3/navheader-left.png) left bottom no-repeat, url(http://fatfrog.info/Ma/A/layout/hp/3/navheader.png) right top; } ul.navheader a, ul.navheader a:link, ul.navheader a:visited { color: #A55D7C; } ul.navheader a:hover, ul.navheader a:active { color: #731E7B; text-decoration: none; } ul.navheader li { display: inline; padding: 10px; font-size: 12px; } .title { margin-top: 11px; padding: 0px 100px; color: #FFCE7E; font-size: 36px; text-transform: uppercase; } .subtitle { padding: 0px 100px; color: #4D9981; font-size: 16px; font-style: italic; letter-spacing: 1px; } #sidebar { float: right; width: 200px; margin: 0px 100px 0px 0px; } #sidebar > div[style*="width"] { position: relative; top: -15px; width: 200px!important; margin: 0px!important; text-align: center; } .sbarbody { background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; } .sbarbody2 { margin: 0px 0px 30px 0px; padding: 5px 10px 7px 10px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-bottom: 5px solid #4D9981; } ul.sbarlist { margin: 0px; padding: 0px; list-style: none; } ul.sbarlist + .sbarlist { margin: 0px 0px 30px 0px; padding: 0px; list-style: none; border-bottom: 5px solid #4D9981; } li.sbartitle { margin: 0px; padding: 5px 5px 6px 5px; list-style: none; text-align: center; font-size: 18px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png) bottom repeat-x; } .tagcloud { padding: 6px 10px 12px 10px; list-style: none; text-align: center; } .tagcloud span { display: inline-block; margin-top: 6px; vertical-align: middle; } .tagcloud a { padding: 2px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } .tagcloud a:hover { padding: 2px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/highlight.png); } li.sbaritem { margin: 0px; padding: 5px 5px 7px 5px; text-align: center; } li.sbaritem + li { margin: 0px; padding: 6px 5px 7px 5px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png) top repeat-x; } li.sbaritem:hover { padding: 5px 5px 7px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/highlight.png); } li.sbaritem + li:hover { margin-top: 1px; padding-top: 4px; border-top: 1px solid #811D6C; border-width: 1px 0px 0px 0px; -moz-border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; -webkit-border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; -o-border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; border-image-outset: 1px 0px 0px 0px; } .defaultuserpic { margin: 0px 0px 30px 0px; padding: 10px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; border-bottom: 5px solid #4D9981; } table.calendar { margin: 8px auto; } .sbarcalendar { padding: 2px 4px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } .sbarcalendarposts { padding: 2px 4px; text-align: center; font-weight: bold; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } .sbarcalendarposts a { display: block; } .sbarcalendarposts:hover { background: url(http://fatfrog.info/Ma/A/layout/hp/3/highlight.png); } #maincontent { margin: 0px 350px 0px 100px; text-align: left; } #maincontent > div[style*="margin"] { position: relative; top: -15px; margin: 0px auto!important; text-align: center; } .clearfoot { height: 1px; margin-bottom: 0px; font-size: 0px; clear: both; } #footer { margin: 0px; padding: 10px; text-align: center; font-weight: bold; text-transform: capitalize; letter-spacing: 1px; background: #000000; border-top: 5px solid #4D9981; z-index: 100; clear: both; } ul.navfooter{ margin: 0px; padding: 0px; } ul.navfooter li { display: inline; margin: 0px 10px; color: #FFFFFF; } div#footer a, div#footer a:link, div#footer a:visited { color: #FFCE7E; } div#footer a:hover { color: #FFFFFF; text-decoration: none; } div#footer a:active { text-decoration: underline; } #footer + .clearfoot { display: none; } /* ------- ENTRIES & FRIENDS ------- */ .subcontent { margin-bottom: 40px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; border-bottom: 5px solid #4D9981; } .userpic { position: relative; float: right; margin: 0px 0px 10px 10px; padding: 0px; background: none!important; border-bottom: 5px solid #4D9981; z-index: 15; } .userpicfriends { position: relative; float: right; margin: 0px 0px 10px 10px; padding: 0px; text-align: center; font-size: 10px; color: #731E7B; font-style: italic; background: #4D9981!important; border-bottom: 5px solid #4D9981; z-index: 15; } .userpicfriends img { padding-bottom: 3px; } .userpicfriends font { color: #FFCE7E; } .datesubject { text-align: center; } .date, .replytoposter { padding: 5px 10px 5px 10px; font-style: italic; } .subject, .replytosubject { padding: 0px 10px 10px 10px; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } .entry { margin: 0px; padding: 0px 10px 10px 10px; text-align: left; } .ljtags, .currents { margin-top: 15px; color: #DB5252; font-size: 10px; font-weight: bold; font-style: italic; } .currentmood img { margin-right: 3px; } .comments { position: relative; top: 29px; height: 24px; margin-top: -20px; padding: 9px 100px 0px 100px; color: #FFCE7E; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/comments.png) top center no-repeat; } div.comments a, div.comments a:link, div.comments a:visited { padding: 0px 5px; color: #A55D7C; } div.comments a:hover, div.comments a:active { color: #731E7B; } .separator { display: none; } /* ------- COMMENTS ------- */ .skiplinks { padding: 10px; font-size: 0px; text-align: center; font-weight: bold; text-transform: capitalize; letter-spacing: 1px; background: #000000; } .skiplinks a, .skiplinks a:link, .skiplinks a:visited { margin: 0px 10px; font-size: 12px; } .skiplinks a:hover { color: #FFFFFF; text-decoration: none; } .skiplinks a:active { text-decoration: underline; } .box center { margin-bottom: 20px; } .box + .box { text-align: center; } .box + .box center { margin-top: 10px; } .commentbox { margin-bottom: 20px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; } .datesubjectcomment { padding: 10px; padding: 5px 10px; font-style: italic; } .datesubjectcomment strong { font-size: 20px; font-style: normal; text-transform: uppercase; letter-spacing: 1px; } .userpiccomment { position: relative; float: left; margin: -5px 10px 5px -10px; padding: 0px; background: none!important; border-bottom: 5px solid #4D9981; z-index: 15; } .commentreply { margin: 10px; } .commentreply + div { padding: 7px 10px 10px 10px; text-align: center!important; font-size: 0px!important; font-weight: bold; text-transform: capitalize; letter-spacing: 1px; background: #000000; border-top: 5px solid #4D9981; } .commentreply + div a { margin: 0px 5px; font-size: 10px; } .commentreply + div a:hover { color: #FFFFFF; text-decoration: none; } .commentreply + div a:active { text-decoration: underline; } .commentreply + div div { display: inline; padding: 0px!important; font-size: 10px; } .commentreply + div div img { width: 12px; height: 12px; vertical-align: text-bottom; } .commentreply + div div input[type="checkbox"] { margin-bottom: 0px; vertical-align: bottom; } .commentboxpartial { margin-bottom: 20px; padding: 10px; font-style: italic; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; } #qrform { margin-bottom: 20px; padding: 10px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; border-bottom: 5px solid #4D9981; } #qrform table { margin: 0px auto; border: none!important; } .commentbox #qrform { margin-top: 10px; margin-bottom: 0px; padding: 0px; text-align: left!important; font-size: 12px!important; font-weight: normal; text-transform: none; letter-spacing: 0px; background: none; border-top: none; border-bottom: none; } .commentbox #qrform a { margin: 0px; font-size: 12px; } .commentbox #qrform input[type="checkbox"] { margin-top: 0px; vertical-align: text-top; } .commentbox #qrform input, .commentbox #qrform textarea { background: #38293D; } input, textarea { padding: 2px; color: #4D9981; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); border-top: 2px solid #4D9981; border-right: none; border-bottom: 2px solid #4D9981; border-left: none; } input[type='radio'], input[type='checkbox'] { padding: 0px; background: none; border: none; } input[type='submit'], input[type='button'], .commentbox #qrform input[type='submit'] { padding: 1px 3px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; color: #FFCE7E; font-weight: bold; background: #4D9981; border-top: 2px solid #66AB96; border-right: 2px solid #378167; border-bottom: 2px solid #378167; border-left: 2px solid #66AB96; } input[type='submit']:active, input[type='button']:active { position: relative; top: 1px; left: 1px; border-top: 2px solid #5DA48E; border-right: 2px solid #3F8A71; border-bottom: 2px solid #3F8A71; border-left: 2px solid #5DA48E; } textarea.textbox { width: 95% !important; } #postform { margin-bottom: 20px; padding: 10px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; border-bottom: 5px solid #4D9981; } #postform table { margin: 0px auto; } /* ------- CALENDAR ------- */ .lj-view-archive #maincontent br { display: none; } .lj-view-archive #maincontent { margin: 0px 340px 0px 90px; text-align: center; } ul.year { margin: 0px 10px -10px 10px; padding: 10px; text-align: center; font-weight: bold; text-transform: capitalize; letter-spacing: 1px; background: #000000; } .year a, .year a:link, .year a:visited { color: #FFCE7E; } .year a:hover, .year a:active { color: #FFFFFF; } ul.year li { margin: 0px 10px; padding: 0px; display: inline; } table.yeartable { display: inline-table; margin: 10px 10px; padding: 3px 10px 8px 10px; vertical-align: top; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; border-bottom: 5px solid #4D9981; } .yeartable td { width: 25px; } td.yearmonth { padding: 0px 0px 10px 0px; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; vertical-align: top; border-style: none; } td.yearmonth a { font-size: 12px; font-weight: normal; text-transform: none; letter-spacing: 0px; font-style: italic; border-style: none; } table.yeartable td.yearday { padding: 10px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } table.yeartable td.yeardate a { display: block; } td.yeardate div { padding: 3px 5px 0px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } td.yeardate div + div { padding: 0px 0px 3px 0px; font-size: 16px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png); } .lj-view-month #maincontent form { margin: 0px; padding: 10px; text-align: center; font-weight: bold; text-transform: capitalize; letter-spacing: 1px; background: #000000; } .lj-view-month #maincontent form a, .lj-view-month #maincontent form a:link, .lj-view-month #maincontent form a:visited { color: #FFCE7E; } .lj-view-month #maincontent forma:hover, .lj-view-month #maincontent form a:active { color: #FFFFFF; } .lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br { display: none; } .lj-view-month .subcontent { margin-bottom: 0px; padding: 0px; background: none; border: none; } .lj-view-month .entry { padding: 0px; font-size: 0px; } .lj-view-month dt { margin: 0px; padding: 5px 10px 0px 10px; text-align: center; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-top: 5px solid #4D9981; } .lj-view-month dd { margin: 0px 0px 30px 0px; padding: 10px 10px 10px 10px; font-size: 12px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) top center fixed; background-size: cover; border-bottom: 5px solid #4D9981; } .lj-view-day .separator + .clear + .clear + .skiplinks { margin-top: -40px;margin-bottom: 20px; padding: 12px 10px; } /* ------- TAGS ------- */ .lj-view-tags h2 { margin: 0px; padding: 10px; text-align: center; font-size: 20px; font-weight: bold!important; text-transform: uppercase; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) bottom center fixed; border-top: 5px solid #4D9981; font-weight: normal; } .ljtaglist { margin: 0px 0px 40px 0px; padding: 0px 10px 0px 10px; list-style: none; background: url(http://fatfrog.info/Ma/A/layout/hp/3/bg2.jpg) bottom center fixed; border-bottom: 5px solid #4D9981; } ul.ljtaglist li { padding: 5px 5px 7px 5px; } ul.ljtaglist li + li { margin: 0px; padding: 6px 5px 7px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight.png) top repeat-x; } ul.ljtaglist li:hover { padding: 5px 5px 7px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/3/highlight.png); } ul.ljtaglist li + li:hover { border-top: 1px solid #4D416C; border-width: 1px 0px 0px 0px; -moz-border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; -webkit-border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; -o-border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; border-image: url(http://fatfrog.info/Ma/A/layout/hp/3/lowlight100x100.png) 1 round; border-image-outset: 1px 0px 0px 0px; } ul.ljtaglist li:hover a { color: #FFCE7E; } ul.ljtaglist li:hover a:active { color: #FFE4B7; }

	This profile layout has a fixed width, changing the width would mess up the layout. 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 bgcolor="#FFFFEA" background="http://fatfrog.info/Ma/A/layout/hp/3/profile-left.jpg" width="650" cellpadding="0" cellspacing="0" border="0"> <tr><td width="193"> </td> <td rowspan="2" background="http://fatfrog.info/Ma/A/layout/hp/3/profile-middle.jpg"> <br><font face="Georgia, Times New Roman, Times, serif" size="2"> CONTENT HERE </font><br> </td> <td rowspan="2" width="50" background="http://fatfrog.info/Ma/A/layout/hp/3/profile-right.jpg"> </td></tr> <tr><td height="370" background="http://fatfrog.info/Ma/A/layout/hp/3/profile-Padfoot.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="#C7977C">LINK TEXT</font></a>