I love Pottermore, so I had to make a layout. This one is of what it looks like when you're not logged in. The title is also a play on Pottermore Insider.

Pottermore Outsider
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 7, Google Chrome 14 and Internet Explorer 8. There are 2 alternative backgrounds: just change the body background to bg2.jpg or bg3.jpg. You can't change widths in this layout, but you can adjust how high the header, maincontent and sidebar hang. The pictures are pulled up (by the negative numbers in the background lines - don’t change the numbers to something higher than 0) and when you move them, you have to change the top margin/padding (that's the first number in the lines) too. If you have a 258px high picture and it's pulled up 148px, you have a margin/padding of 110px. That's how you can calculate the numbers. For the #header you have to change the negative number in the background line and adjust the first number in padding. The picture (258px high) for the maincontent is in #content, the padding in #maincontent. The sidebar picture (257px) is in #content-outer, the margin in #sidebar.
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 /* Pottermore Outsider http://fuesch.livejournal.com/26393.html */ body { margin: 0px; padding: 0px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; color: #FFFFFF; font-size: 12px; background: #000000 url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/bg1.jpg) center top no-repeat fixed; } a, a:link { color: #FFFF50; text-decoration: none; } a:visited { color: #FFD850; text-decoration: none; } a:hover { color: #FFFFAD; text-decoration: none; } a:active { color:#FFFFD5; text-decoration: none; } code, kbd, pre, tt { font-family: "Courier New", Courier, monospace; font-size: 12px; } p, td, blockquote { font-size: 12px; } blockquote { padding: 5px 0px; border-top: 1px dashed #B05284; border-bottom: 1px dashed #B05284; } q { font-style: italic; } q i { font-style: normal; } /* ------- GENERAL ------- */ .clear { height: 15px; } #content-outer { width: 1000px; margin: 0px auto; padding: 0px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/sidebar-top.png) right -144px no-repeat; } #content { background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-top.png) 280px -118px no-repeat; } #header { float: left; width: 280px; margin: 0px 0px 15px 0px; padding: 110px 0px 0px 0px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/header-top.png) 0px -148px no-repeat; } ul.navheader { margin: 0px; padding: 0px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/header-middle.png) top; } ul.navheader a, ul.navheader a:link, ul.navheader a:visited { color: #FFFF9F; } ul.navheader a:hover { color: #FFFFFF; } ul.navheader a:active { color: #FFFF9F; } ul.navheader li { display: inline; padding: 0px 3px; } .title { padding: 15px 30px 0px 30px; font-size: 28px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/header-middle.png) top; } .subtitle { padding: 0px 30px 80px 30px; font-size: 18px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/header-bottom.png) bottom no-repeat; } #sidebar { width: 280px; margin: 113px 0px 0px 0px; padding: 0px 0px 80px 0px; text-align: left; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/sidebar-bottom.png) bottom no-repeat; float: right; } div#sidebar a, div#sidebar a:link { color: #D2E099; } div#sidebar a:visited { color: #A3AF75; } div#sidebar a:hover { color: #EFFFAD; } div#sidebar a:active { color: #F8FFD9; } .sbarbody { padding: 0px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/sidebar-middle.png) top; } .sbarbody2 { margin: 0px; padding: 10px 30px 15px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/sidebar-middle.png) top; } ul.sbarlist { margin: 0px; padding: 0px; list-style: none; } ul.sbarlist + .sbarlist { margin: 0px; padding: 0px 0px 15px 0px; list-style: none; } li.sbartitle { margin: 0px; padding: 20px 0px 5px 0px; list-style: none; text-align: center; font-size: 16px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/sbartitle.gif) center top no-repeat; } .tagcloud { padding: 0px; list-style: none; } li.sbaritem { margin: 0px; padding: 3px 0px; border-bottom: 1px solid #2E4D50; } .defaultuserpic { margin: 0px; padding: 10px 10px 15px 10px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/sidebar-middle.png) top; } .defaultuserpic img { padding: 10px; border: 1px solid #395E62; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { padding: 2px 4px; text-align: center; border: 1px solid #2E4D50; } .sbarcalendarposts { text-align: center; font-weight: bold; background: #395E62; border: 1px solid #2E4D50; } #maincontent { margin: 0px 280px 0px 280px; padding: 140px 0px 80px 0px; text-align: left; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-bottom.png) bottom no-repeat; } #footer { margin: 15px 0px 0px 0px; padding: 10px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; text-transform: capitalize; z-index: 100; clear: both; } ul.navfooter{ margin: 0px; padding: 0px; } ul.navfooter li { display: inline; margin: 0px; padding: 0px 15px; } ul.navfooter li + li { border-left: 1px solid #999999; } div#footer a, div#footer a:link, div#footer a:visited { color: #999999; } div#footer a:hover, div#footer a:active { color: #FFFFFF; } .clearfoot { display: none; clear: both; } /* ------- ENTRIES & FRIENDS ------- */ .subcontent { padding: 0px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } #maincontent .clear { background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } * html div.subcontent { /* fixes an IE reply page bug */ height: 1%; clear: none; } .userpic { margin: 0px 0px 10px 10px; padding: 0px; position: relative; float: right; background: none!important; z-index: 15; } .userpicfriends { margin: 0px 0px 10px 10px; padding: 0px; position: relative; float: right; text-align: center; font-size: 10px; background: none!important; z-index: 15; } .userpicfriends img { padding-bottom: 3px; } .userpicfriends font { color: #FFFF50; font-style: italic; } .datesubject { padding: 0px; } .date, .replytoposter { padding: 0px; color: #912C61; } .subject, .replytosubject { padding-bottom: 10px; font-size: 28px; } .entry { margin: 0px; padding: 15px 0px 0px 0px; text-align: left; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/line.gif) center top no-repeat; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } .ljtags { margin-top: 15px; color: #B05284; font-size: 11px; font-style: italic; } .entry .clear { height: 15px; background: none!important; } .currents { margin-top: -15px; color: #B05284; font-size: 11px; font-style: italic; } .currents strong { font-weight: normal; } .comments { padding: 10px 0px 0px 0px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/line.gif) center top no-repeat; } .separator { height: 35px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } /* ------- COMMENTS ------- */ .skiplinks { padding: 10px 30px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } .box { margin: 0px 0px -30px 0px; padding: 0px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); clear: left; } .box center { margin-bottom: 10px; } .commentbox { margin: 10px 0px 30px 0px; padding: 0px; border-top: 1px dashed #B05284; border-bottom: 1px dashed #B05284; } .datesubjectcomment { margin: 0px; padding: 5px 0px 7px 0px; font-size: 11px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/line.gif) center bottom no-repeat; } .datesubjectcomment strong { font-size: 16px; font-weight: normal; font-style: italic; } .userpiccomment { position: relative; margin: 0px 10px 5px 0px; z-index: 15; float: left; } .commentreply { position: relative; margin: 10px 0px; } .commentreply + div { padding: 5px 0px 0px 0px; font-style: italic; } .commentboxpartial { margin: 10px 0px 30px 0px; padding: 5px; font-size: 11px; border: 1px dashed #B05284; } .box + .separator { display: none; } #content + div { background-color: transparent!important; border: none!important; } * html div.box#commentform { /* fixes an IE reply page bug */ position: absolute; } #postform .textbox { width: 180px; } select { width: 190px; } .subcontent + .separator + .clear + div, .subcontent + .clear + div { height: 40px; margin: 0px!important; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } input, textarea { color: #FFFFFF; background: #912C61; } textarea.textbox { width: 95%!important; } /* ------- CALENDAR ------- */ .lj-view-archive { } ul.year { margin: 0px; padding: 10px 30px 40px 30px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } ul.year li { display: inline; padding: 0px 2px; } .active { font-size: 16px; } table.yeartable { margin: 0px auto -45px auto; padding: 0px 30px 45px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } td.yearmonth { font-size: 16px; border-style: none; } td.yearmonth a { font-size: 12px; border-style: none; } table.yeartable td.yearday { padding: 5px; text-align: center; background: #6C043B; } table.yeartable td.yeardate { padding: 2px 4px; border: 1px solid #53032D; } table.yeartable td.yeardate a { font-size: 16px; font-weight: bold; } .lj-view-day .skiplinks { padding-bottom: 30px; } .lj-view-day .separator + .clear + .clear + .skiplinks { margin-top: -50px; } .lj-view-month #maincontent form { margin: 0px 0px -30px 0px; padding: 0px 0px 30px 0px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } .lj-view-month .entry { margin-bottom: -12px; background: none; } .lj-view-month dt { margin: 20px 0px 0px 0px; padding: 0px 0px 3px 0px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/line.gif) bottom no-repeat; } .lj-view-month dd { padding: 4px 0px; } /* ------- TAGS ------- */ .lj-view-tags #maincontent { padding: 140px 0px 80px 0px; } .lj-view-tags h2 { margin: 0px; padding: 0px 30px; font-size: 16px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } .ljtaglist { margin: 0px; padding: 20px 30px 10px 30px; background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-middle.png); } ul.ljtaglist { list-style: none; } ul.ljtaglist li { padding: 5px 0px; } ul.ljtaglist li + li { background: url(http://fatfrog.info/Ma/A/layout/pottermoreoutsider/line.gif) top no-repeat; } /* ------- EXTRAS ------- */ .caption img { margin-bottom: 5px; } .caption { margin: 0px auto; padding: 10px 10px 5px 10px; text-align: center; font-size: 11px; border: 1px dashed #B05284; } .captionless { margin: 0px auto; padding: 10px; border: 1px dashed #B05284; } .spoiler { padding: 2px; background: #355A5E!important; color: #355A5E!important; } .spoiler a, .spoiler a:link, .spoiler a:visited, .spoiler a:hover, .spoiler a:active { color: #355A5E!important; }

	This profile layout has a fixed width, changing the width would mess up the layout. You can use http://fatfrog.info/Ma/A/layout/pottermoreoutsider/line.gif as a divider. 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 width="440" cellpadding="0" cellspacing="0" border="0"><tr><td height="173" colspan="3" height="173" background="http://fatfrog.info/Ma/A/layout/pottermoreoutsider/profile-top.png"></td></tr> <tr><td width="30" background="http://fatfrog.info/Ma/A/layout/pottermoreoutsider/profile-left.png"> </td> <td width="380" background="http://fatfrog.info/Ma/A/layout/pottermoreoutsider/profile-middle.png"><font face="Georgia, Times New Roman, Times, serif" size="2" color="#FFFFFF">TEXT GOES HERE</font></td> <td width="30" background="http://fatfrog.info/Ma/A/layout/pottermoreoutsider/profile-right.png"> </td></tr> <tr><td height="80" colspan="3"><img src="http://fatfrog.info/Ma/A/layout/pottermoreoutsider/maincontent-bottom.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="#FFFF50">LINK TEXT</font></a>