This is the first entry in another series of HP layouts. This time the theme is the covers/back covers of the UK children's edition. Because I'm rather fond of them and their colorfulness.

Harry Potter and the Philosopher's Layout
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 28, Google Chrome 34 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 Philospher's Layout http://fuesch.livejournal.com/44070.html */ body { margin: 0px; padding: 0px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; color: #FFFFFF; font-size: 12px; background: #63409E url(http://fatfrog.info/Ma/A/layout/hp/1/bg1.jpg) bottom center fixed; background-size: cover; } body > div[style*="width"] { width: 100%!important; margin: 0px!important; padding: 0px!important; background-color: #BF2760!important; border: none!important; } body > .wrapper + div[style*="width"] { background-color: #000000!important; } a, a:link { color: #FFDB50; text-decoration: none; } a:visited { color: #EBA156; text-decoration: none; } a:hover { color: #FFDB50; text-decoration: underline; } a:active { color: #FFE686; 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/1/purple15percent.png); } q { font-style: italic; } q i { font-style: normal; } /* ------- GENERAL ------- */ .ljuser a { color: #FFDB50; } .ljuser a:active { color: #FFE686; } .clear { display: none; } #header { margin: 0px 0px 50px 0px; padding: 20px 0px; text-align: center; font-weight: bold; letter-spacing: 2px; background: #BF2760; border-bottom: 5px solid #198673; } ul.navheader { display: inline-block; height: 24px; margin: 0px auto; padding: 10px 10px 0px 10px; font-size: 0px; color: #000000; text-transform: uppercase; background: url(http://fatfrog.info/Ma/A/layout/hp/1/navheader-left.png) left bottom no-repeat, url(http://fatfrog.info/Ma/A/layout/hp/1/navheader.png) right top; } ul.navheader a, ul.navheader a:link, ul.navheader a:visited { color: #45383C; } ul.navheader a:hover, ul.navheader a:active { color: #000000; text-decoration: none; } ul.navheader li { display: inline; padding: 10px; font-size: 12px; } .title { margin-top: 11px; padding: 0px 100px; color: #FFDB50; font-size: 36px; text-transform: uppercase; } .subtitle { padding: 0px 100px; color: #FFFFFF; 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/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; } .sbarbody2 { margin: 0px 0px 30px 0px; padding: 5px 10px 7px 10px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/bg2.jpg) bottom center fixed; background-size: cover; border-bottom: 5px solid #198673; } 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 #198673; } 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/1/purple15percent.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/1/purple15percent.png); } .tagcloud a:hover { padding: 2px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/orange20percent.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/1/purple15percent.png) top repeat-x; } li.sbaritem:hover { padding: 5px 5px 7px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/orange20percent.png); } li.sbaritem + li:hover { margin-top: 1px; padding-top: 4px; border-top: 1px solid #A8376B; border-width: 1px 0px 0px 0px; -moz-border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; -webkit-border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; -o-border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; border-image-outset: 1px 0px 0px 0px; } li.sbaritem:hover a { color: #FFDB50; } li.sbaritem:hover a:active { color: #FFE686; } .defaultuserpic { margin: 0px 0px 30px 0px; padding: 10px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/hp/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; border-bottom: 5px solid #198673; } table.calendar { margin: 8px auto; } .sbarcalendar { padding: 2px 4px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/hp/1/purple15percent.png); } .sbarcalendarposts { padding: 2px 4px; text-align: center; font-weight: bold; background: url(http://fatfrog.info/Ma/A/layout/hp/1/purple15percent.png); } .sbarcalendarposts a { display: block; } .sbarcalendarposts:hover { background: url(http://fatfrog.info/Ma/A/layout/hp/1/orange20percent.png); } .sbarcalendarposts:hover a { color: #FFDB50; } .sbarcalendarposts:hover a:active { color: #FFE686; } #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 #198673; z-index: 100; clear: both; } ul.navfooter{ margin: 0px; padding: 0px; } ul.navfooter li { display: inline; margin: 0px 10px; } div#footer a, div#footer a:link, div#footer a:visited { color: #8EC1B8; } 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/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; border-bottom: 5px solid #198673; } .userpic { position: relative; float: right; margin: 0px 0px 10px 10px; padding: 0px; background: none!important; border-bottom: 5px solid #198673; z-index: 15; } .userpicfriends { position: relative; float: right; margin: 0px 0px 10px 10px; padding: 0px; text-align: center; font-size: 10px; font-style: italic; background: #198673!important; border-bottom: 5px solid #198673; z-index: 15; } .userpicfriends img { padding-bottom: 3px; } .userpicfriends font { color: #FFDB50; } .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: #4B3752; 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: #F67D55; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/comments.png) top center no-repeat; } div.comments a, div.comments a:link, div.comments a:visited { padding: 0px 5px; color: #45383C; } div.comments a:hover, div.comments a:active { color: #000000; } .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; color: #8EC1B8; } .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/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; } .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 #198673; 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 #198673; } .commentreply + div a { margin: 0px 5px; font-size: 10px; color: #8EC1B8; } .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 label { margin: 0px 0px 0px 5px; } .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/1/bg2.jpg) bottom center fixed; background-size: cover; } #qrform { margin-bottom: 20px; padding: 10px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; border-bottom: 5px solid #198673; } #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: #FFFFFF; background: url(http://fatfrog.info/Ma/A/layout/hp/1/purple15percent.png); border-top: 2px solid #198673; border-right: none; border-bottom: 2px solid #198673; 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; font-weight: bold; background: #198673; border-top: 2px solid #259381; border-right: 2px solid #137663; border-bottom: 2px solid #137663; border-left: 2px solid #259381; } input[type='submit']:active, input[type='button']:active { position: relative; top: 1px; left: 1px; border-top: 2px solid #1F8C7A; border-right: 2px solid #167E6B; border-bottom: 2px solid #167E6B; border-left: 2px solid #1F8C7A; } textarea.textbox { width: 95% !important; } #postform { margin-bottom: 20px; padding: 10px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; border-bottom: 5px solid #198673; } #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: #8EC1B8; } .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/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; border-bottom: 5px solid #198673; } .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/1/purple15percent.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/1/purple15percent.png); } td.yeardate div + div { padding: 0px 0px 3px 0px; font-size: 16px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/purple15percent.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: #8EC1B8; } .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/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; } .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/1/bg2.jpg) bottom center fixed; background-size: cover; border-bottom: 5px solid #198673; } .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/1/bg2.jpg) bottom center fixed; background-size: cover; border-top: 5px solid #198673; 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/1/bg2.jpg) bottom center fixed; background-size: cover; border-bottom: 5px solid #198673; } 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/1/purple15percent.png) top repeat-x; } ul.ljtaglist li:hover { padding: 5px 5px 7px 5px; background: url(http://fatfrog.info/Ma/A/layout/hp/1/orange20percent.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/1/lowlight100x100.png) 1 round; -webkit-border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; -o-border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; border-image: url(http://fatfrog.info/Ma/A/layout/hp/1/lowlight100x100.png) 1 round; border-image-outset: 1px 0px 0px 0px; } ul.ljtaglist li:hover a { color: #FFDB50; } ul.ljtaglist li:hover a:active { color: #F6D1D8; }

This profile layout is flexible in width and height. If you want to add a column, put this <td width="350"><font face="Georgia, Times New Roman, Times, serif" size="2" color="#FFFFFF">TEXT GOES HERE</font></td> <td background="profile-stars.jpg" width="20">&nbsp;</td> between the last </td> and </tr>. 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="#63409E" cellpadding="10" cellspacing="0" border="0"><tr> <td valign="top" width="182"><img src="http://fatfrog.info/Ma/A/layout/hp/1/profile-Dumbledore.jpg"></td> <td width="350"><font face="Georgia, Times New Roman, Times, serif" size="2" color="#FFFFFF"> CONTENT HERE </font></td> <td background="http://fatfrog.info/Ma/A/layout/hp/1/profile-stars.jpg" width="20"> </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="#FFE74A">LINK TEXT</font></a>