/ CALL IT DESPERATION DESIGNS /

BEAUTY OF HOGWARTS

Looks best in: All Browsers (tested in Firefox, Opera & IE)

Works with: Basic, Paid & Sponsored (looks odd with ads, though)

Live Preview: HERE.

If you have any questions, comments, or concerns about this layout, please go to THIS POST in my livejournal community to ask.

Instructions to Use

Don't forget to please credit CID for the layout and header in your userinfo if using this layout.

The following descriptions are for the new livejournal customize journal page. I tried to make it as easy to follow as possible, but I'm not quite used to it yet.

1) Go to the CUSTOMIZE page.
2) Make sure you have "S2" selected.
3) In the Search bar on the first page, type "Smooth Sailing". Find "Blue Days" (should be third one) and select "Apply".
4) On the very bottom of the page, under "Choose a Page Setup", select "2 Column (sidebar on right)".
5) In top right, under "Name's Current Theme" click "Customize Your Theme".
6) Go to Display and then scroll down to Presentation. Under "Additional Options", find "Wrap Entry text under userinfo" and set to "Yes". Find "Userinfo Position in Entries" and set to "Left".
7) Next go to "Custom CSS". Make sure that all drop-down options are set to "No".
8) Copy the codes from the textarea below and paste them into the box. Hit save and voila!

CSS Code

/*---------------------------------------------------
Layout: Hogwarts School
Stylesheet Created By: Amy of CID ( http://call-it-desperation.org).
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browsers: Firefox, Opera and IE
-----------------------------------------------------*/

/* PAGE */

body {
     font-family: Trebuchet MS, sans-serif;
     font-size: 12px;
     margin: 0px;
     background-color: #ffffff;
     color: #959595;
     background-image: url('http://img140.imageshack.us/img140/5175/s6qd9.png');
     background-repeat: repeat;
     }
  a {
     color: #cccccc;
     }
  a:visited {
     color: #898989;
     }

.pageblock{
     width:800px;
     margin: 0 auto;
     }
  .pagefooterblock {
     border-top: 0px solid #ffffff;
     background-color: #ffffff;
     color: #959595;
     padding: 4px 4px 4px 24px;
     margin-top: 4px;
     text-align: center;
     }
  .pagefooterblock a, .pagefooterblock a:visited {
     color: #cccccc;
     }

blockquote {
     margin: 0px 0px 0px 15px;
     padding: 2px 2px 2px 2px;
     border: 1px dashed #c2c2c2;
     background-color: #ebebeb;}

/* HEADER */

.pageheaderblock {
     text-align: left;
     height: 430px;
     margin-top: 35px;
     background-image: url('http://img405.imageshack.us/img405/2202/hogwartsheaderxm9.png');
     background-repeat: no-repeat;
     background-position: bottom center;}

.header-title {
     background-color: #6b7da6;
     font-family: ;
     font-size: 30px;
     color: #ffffff;
     padding: 0px 20px 0px 20px;
     display: none;
     }
  .header-subtitle {
     background-color: #6b7da6;
     color: #ffffff;
     font-family: ;
     font-size: 24px;
     padding: 0px 24px 0px 24px;
     display: none;
     }
  .header-icon {
     top: 0px;
     right: 0px;
     position: absolute;
     z-index: 1;
     border-left: 0px solid #ffffff;
     border-bottom: 0px solid #ffffff;
     }
  .header-menu {
     padding: 0px;
     height: 25px;
     background-color: transparent;
     border-top: 0px solid #ffffff;
     color: #FFFFFF;
     padding-left: 0px;
     font-family: ;
     text-transform: uppercase;
     text-align: center;
     font-size: 12px;
     line-height: 20px;
     }
  .header-menu a, .header-menu a:visited {
     white-space: nowrap;
     text-align: left;
     padding: 2px 6px 2px 6px;
     color: #ffffff;
     text-decoration: none;
     }
  .header-menu a:hover {
     background-color: #ffffff;
     color: #96ca4e;
     }
  .header-menu ul, #footer-menu ul {
     margin: 0px;
     padding: 0px;
     }
  .header-menu li, #footer-menu li {
     display: inline;
     }

/* BODY */

.bodyblock {
     padding: 10px 20px 0px 20px;
     background-color: #ffffff;
     text-align: left;
     clear: left;
     }
  .bodyheaderblock {
     border-top: 0px solid #ffffff;
     background-color: #ffffff;
     padding: 4px 0px 4px 0px;
     }
  .bodynavblock {
     border-top: 0px solid #ffffff;
     background-color: #ffffff;
     color: #ffffff;
     margin: 10px 0px 4px 0px;
     padding: 8px;
     }
  .bodynavblock a, .bodynavblock a:visited {
     color: #ffffff;
     }
  .body-title {
     font-family: ;
     font-size: 18px;
     color: #ffffff;
     text-align: left;
     padding-left: 24px;
     display: none;
     }
  .body-midtitle {
     font-family: ;
     font-size: 18px;
     color: #ffffff;
     text-align: left;
     padding-left: 8px;
     }

/*ENTRIES*/
.entryHolder {
     color: #959595;
     background-color: #ffffff;
     font-family: ;
     font-size: 11px;
     padding-bottom: 10px;
     border-bottom: 1px dotted #c2c2c2;
     margin: 4px 0px 15px 0px;
     }

.entryUserinfo {
     text-align: center;
     margin: 20px 8px 5px 0px;
     background-color: #ffffff;
     }
  .entryUserinfo-usericon img {
     border: 3px solid #ebebeb;
     padding: 5px;
     }
  .entryText {
     padding: 6px;
     padding-top: 5px;
     padding-bottom:20px;
     text-align: justify;
     }
  .entryHeader {
     background-color: #96ca4e;
     color: #FFFFFF;
     font-family: ;
     font-size: 14px;
     padding: 0px 0px 0px 5px;
     margin-bottom: 5px;
     border-bottom: 0px solid #96ca4e;
     }
  .entryHeader a{
     color: #cccccc;
     }
  .entryHeaderSubject {
     text-transform: uppercase;
     font-size: 14px;
     }
  .entryHeaderDate {
     text-transform: uppercase;
     font-size: 14px;
     }
  .entryHeaderDate a {
     color : #cccccc;
     text-decoration : none;
     }
  .entryHeaderDate a:hover {
     color : #cccccc;
     text-decoration : underline;
     }
  .entryMetadata {
     margin-top: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     }
  .entryMetadata-content img {
     }
  .entryMetadata ul {
     list-style-type: none;
     }
  .entryMetadata-label {}
     }
  .entryLinkbar {
     font-family: ;
     font-size: 12px;
     color: #ffffff;
     text-align: right;
     padding: 4px 0px 4px 0px;
     }
  .entryLinkbar ul {
     margin: 0px;
     padding: 0px;
     }
  .entryLinkbar li {
     padding: 0px 5px 0px 5px;
     margin: 0px;    
     display: inline;
     }

/*FOOTER*/

#footer-menu {
     font-size: 12px;
     }
  #footer-menu a, .footer-menu a:visited {
     color: #959595;
     white-space: nowrap;
     padding: 6px;
     text-align: left;
     }

/*SIDEBAR*/
 
  .sidebar {
    width: 200px;
    margin: 0px 0px 0px 20px;
    padding: 3px 0px 0px 0px;
     }
     }
  .sidebox {
     color: #959595;
     margin: 0px 0px 20px 0px;
     padding: 15px 0px 0px 20px;
     background-color: #ffffff;
     background-repeat: no-repeat;
     }
  .sideboxTitle {
     background-color: #96ca4e;
     color: #FFFFFF;
     font-family: ;
     font-size: 13px;
     padding: 0px 0px 0px 5px;
     border-bottom: 0px solid #96ca4e;
     text-transform: uppercase;
    }

.sideboxContent {
    padding: 10px 0px 15px 0px;
    text-align: left;
    }
  .sidebox #profile, .sidebox #latestmonth, .sidebox #search {
     text-align: center;
     }
  .sidebox #tags_sidebox {
     text-align: center;
     }
  .sidebox #systemlinks {
     text-align: center;
     }
  .sidebox #latestmonth table{
     width: 90%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 4px;
     }
  .listtitle {
     font-weight: bold;
     }
  .profile-label {
     font-weight: bold;
     }
.sidebar input,
.sidebar textarea,
.sidebar option,
.sidebar select  {
    margin: 0px 1px 1px 0px;
    border: 1px solid #8f7e63;
    background: #FFFFFF;
    color: #c2c2c2;
    }

/*OTHER PAGES*/

/* COMMENT PAGE */

.commentHolder {
     color: #757575;
     background-color: #ffffff;
     border-top: 2px solid #ffffff;
     font-family: ;
     font-size: 12px;
     margin: 4px 0px 4px 0px;
     }
  .commentUserinfo {
     text-align: center;
       margin: 0px 8px 8px 0px;
    
     background-color: #ffffff;
     }
  .commentUserinfo-usericon img {
     border: 0;
     }
  .commentText {
     padding: 6px;
     }
  .commentHeader {
     background-color: #dddddd;
     color: #ffffff;
     font-family: ;
     font-size: 12px;
     padding: 4px 0px 4px 8px;
     }
  .commentHeader a{
     color: #ffffff;
     }
  .commentHeaderScreened {
     font-family: ;
     font-size: 12px;
     background-color: #cccccc;
     padding: 4px 0px 4px 8px;
     }
  .commentHeaderSubject {
     font-weight: bold;
     }
  .commentLinkbar {
     font-family: ;
     font-size: 12px;
     color: #ffffff;
     text-align: right;
     padding-top: 4px;
     padding-bottom: 4px;
     }
  .commentLinkbar ul {
     margin: 0px;
     padding: 0px;
     }
  .commentLinkbar li {
     padding: 0px 5px 0px 5px;
     margin: 0px;
     display: inline;
     }
  .replyform {
     background-color: #ffffff;
     color: #757575;
     padding-left: 10px;
     }
  #commenttext{
     width:100%;
     }

/*ARCHIVE PAGE*/
  .yearlinks{
     text-align: right;
     }
  .yearlink{
     padding-left:4px;
     padding-right: 4px;
     }
  .month {
     width: 500px;
     border: 1px solid #dddddd;
     margin: 8px 8px 8px 40px;
     }
  .daysubjects {
     color: #ffffff;
     padding: 8px 8px 8px 40px;
     }
  .daytitles {
     text-align: center;
     border: 1px solid #dddddd;
     background: #eeeeee;
     color: #959595;
     }
  .day-blank {
     border: 1px solid #dddddd;
    }
  .day {
     border: 1px solid #dddddd;
     }
  .day-date {
     border-right: 1px solid #dddddd;
     border-bottom: 1px solid #dddddd;
     color: #959595;
     width: 50%;
     text-align: center;
     }
  .day-count {
     width: 50%;
     text-align: center;
     float: right;
     font-size: 20px;
     }
  .day-count a {
     text-decoration: none;
     color: #959595;
     }

/*TAGS PAGE*/

.tagstable, .tagstable td {
     border: 1px solid #dddddd;
     }
  .tagstable { width: 500px; }

Other Versions

/* PAGE */

body {
     font-family: Trebuchet MS, sans-serif;
     font-size: 12px;
     margin: 0px;
     background-color: #ffffff;
     color: #959595;
     background-image: url('http://img135.imageshack.us/img135/4141/s25ap6.png');
     background-repeat: repeat;
     }
  a {
     color: #cccccc;
     }
  a:visited {
     color: #898989;
     }

blockquote {
     margin: 0px 0px 0px 15px;
     padding: 2px 2px 2px 2px;
     border: 1px dashed #c2c2c2;
     background-color: #ebebeb;}

/* HEADER */

.header-title {
     background-color: #6b7da6;
     font-family: ;
     font-size: 30px;
     color: #ffffff;
     padding: 0px 20px 0px 20px;
     display: none;
     }
  .header-subtitle {
     background-color: #6b7da6;
     color: #ffffff;
     font-family: ;
     font-size: 24px;
     padding: 0px 24px 0px 24px;
     display: none;
     }
  .header-icon {
     top: 0px;
     right: 0px;
     position: absolute;
     z-index: 1;
     border-left: 0px solid #ffffff;
     border-bottom: 0px solid #ffffff;
     }
  .header-menu {
     padding: 0px;
     height: 25px;
     background-color: transparent;
     border-top: 0px solid #ffffff;
     color: #FFFFFF;
     padding-left: 0px;
     font-family: ;
     text-transform: uppercase;
     text-align: center;
     font-size: 12px;
     line-height: 20px;
     }
  .header-menu a, .header-menu a:visited {
     white-space: nowrap;
     text-align: left;
     padding: 2px 6px 2px 6px;
     color: #ffffff;
     text-decoration: none;
     }
  .header-menu a:hover {
     background-color: #ffffff;
     color: #87aedb;
     }
  .header-menu ul, #footer-menu ul {
     margin: 0px;
     padding: 0px;
     }
  .header-menu li, #footer-menu li {
     display: inline;
     }

/* BODY */

.entryUserinfo {
     text-align: center;
     margin: 20px 8px 5px 0px;
     background-color: #ffffff;
     }
  .entryUserinfo-usericon img {
     border: 3px solid #ebebeb;
     padding: 5px;
     }
  .entryText {
     padding: 6px;
     padding-top: 5px;
     padding-bottom:20px;
     text-align: justify;
     }
  .entryHeader {
     background-color: #87aedb;
     color: #FFFFFF;
     font-family: ;
     font-size: 14px;
     padding: 0px 0px 0px 5px;
     margin-bottom: 5px;
     border-bottom: 0px solid #87aedb;
     }
  .entryHeader a{
     color: #cccccc;
     }
  .entryHeaderSubject {
     text-transform: uppercase;
     font-size: 14px;
     }
  .entryHeaderDate {
     text-transform: uppercase;
     font-size: 14px;
     }
  .entryHeaderDate a {
     color : #cccccc;
     text-decoration : none;
     }
  .entryHeaderDate a:hover {
     color : #cccccc;
     text-decoration : underline;
     }
  .entryMetadata {
     margin-top: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     }
  .entryMetadata-content img {
     }
  .entryMetadata ul {
     list-style-type: none;
     }
  .entryMetadata-label {}
     }
  .entryLinkbar {
     font-family: ;
     font-size: 12px;
     color: #ffffff;
     text-align: right;
     padding: 4px 0px 4px 0px;
     }
  .entryLinkbar ul {
     margin: 0px;
     padding: 0px;
     }
  .entryLinkbar li {
     padding: 0px 5px 0px 5px;
     margin: 0px;    
     display: inline;
     }

/*FOOTER*/

#footer-menu {
     font-size: 12px;
     }
  #footer-menu a, .footer-menu a:visited {
     color: #959595;
     white-space: nowrap;
     padding: 6px;
     text-align: left;
     }

/*SIDEBAR*/
 
  .sidebar {
    width: 200px;
    margin: 0px 0px 0px 20px;
    padding: 3px 0px 0px 0px;
     }
     }
  .sidebox {
     color: #959595;
     margin: 0px 0px 20px 0px;
     padding: 15px 0px 0px 20px;
     background-color: #ffffff;
     background-repeat: no-repeat;
     }
  .sideboxTitle {
     background-color: #87aedb;
     color: #FFFFFF;
     font-family: ;
     font-size: 13px;
     padding: 0px 0px 0px 5px;
     border-bottom: 0px solid #87aedb;
     text-transform: uppercase;
    }

/*OTHER PAGES*/

/* COMMENT PAGE */

/*TAGS PAGE*/

.tagstable, .tagstable td {
     border: 1px solid #dddddd;
     }
  .tagstable { width: 500px; }

/* PAGE */

body {
     font-family: Trebuchet MS, sans-serif;
     font-size: 12px;
     margin: 0px;
     background-color: #ffffff;
     color: #959595;
     background-image: url('http://img519.imageshack.us/img519/665/yellowstripedl4.png');
     background-repeat: repeat;
     }
  a {
     color: #cccccc;
     }
  a:visited {
     color: #898989;
     }

blockquote {
     margin: 0px 0px 0px 15px;
     padding: 2px 2px 2px 2px;
     border: 1px dashed #c2c2c2;
     background-color: #ebebeb;}

/* HEADER */

.header-title {
     background-color: #6b7da6;
     font-family: ;
     font-size: 30px;
     color: #ffffff;
     padding: 0px 20px 0px 20px;
     display: none;
     }
  .header-subtitle {
     background-color: #6b7da6;
     color: #ffffff;
     font-family: ;
     font-size: 24px;
     padding: 0px 24px 0px 24px;
     display: none;
     }
  .header-icon {
     top: 0px;
     right: 0px;
     position: absolute;
     z-index: 1;
     border-left: 0px solid #ffffff;
     border-bottom: 0px solid #ffffff;
     }
  .header-menu {
     padding: 0px;
     height: 25px;
     background-color: transparent;
     border-top: 0px solid #ffffff;
     color: #FFFFFF;
     padding-left: 0px;
     font-family: ;
     text-transform: uppercase;
     text-align: center;
     font-size: 12px;
     line-height: 20px;
     }
  .header-menu a, .header-menu a:visited {
     white-space: nowrap;
     text-align: left;
     padding: 2px 6px 2px 6px;
     color: #ffffff;
     text-decoration: none;
     }
  .header-menu a:hover {
     background-color: #ffffff;
     color: #e3d842;
     }
  .header-menu ul, #footer-menu ul {
     margin: 0px;
     padding: 0px;
     }
  .header-menu li, #footer-menu li {
     display: inline;
     }

/* BODY */

.entryUserinfo {
     text-align: center;
     margin: 20px 8px 5px 0px;
     background-color: #ffffff;
     }
  .entryUserinfo-usericon img {
     border: 3px solid #ebebeb;
     padding: 5px;
     }
  .entryText {
     padding: 6px;
     padding-top: 5px;
     padding-bottom:20px;
     text-align: justify;
     }
  .entryHeader {
     background-color: #e3d842;
     color: #FFFFFF;
     font-family: ;
     font-size: 14px;
     padding: 0px 0px 0px 5px;
     margin-bottom: 5px;
     border-bottom: 0px solid #e3d842;
     }
  .entryHeader a{
     color: #cccccc;
     }
  .entryHeaderSubject {
     text-transform: uppercase;
     font-size: 14px;
     }
  .entryHeaderDate {
     text-transform: uppercase;
     font-size: 14px;
     }
  .entryHeaderDate a {
     color : #cccccc;
     text-decoration : none;
     }
  .entryHeaderDate a:hover {
     color : #cccccc;
     text-decoration : underline;
     }
  .entryMetadata {
     margin-top: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     }
  .entryMetadata-content img {
     }
  .entryMetadata ul {
     list-style-type: none;
     }
  .entryMetadata-label {}
     }
  .entryLinkbar {
     font-family: ;
     font-size: 12px;
     color: #ffffff;
     text-align: right;
     padding: 4px 0px 4px 0px;
     }
  .entryLinkbar ul {
     margin: 0px;
     padding: 0px;
     }
  .entryLinkbar li {
     padding: 0px 5px 0px 5px;
     margin: 0px;    
     display: inline;
     }

/*FOOTER*/

#footer-menu {
     font-size: 12px;
     }
  #footer-menu a, .footer-menu a:visited {
     color: #959595;
     white-space: nowrap;
     padding: 6px;
     text-align: left;
     }

/*SIDEBAR*/
 
  .sidebar {
    width: 200px;
    margin: 0px 0px 0px 20px;
    padding: 3px 0px 0px 0px;
     }
     }
  .sidebox {
     color: #959595;
     margin: 0px 0px 20px 0px;
     padding: 15px 0px 0px 20px;
     background-color: #ffffff;
     background-repeat: no-repeat;
     }
  .sideboxTitle {
     background-color: #e3d842;
     color: #FFFFFF;
     font-family: ;
     font-size: 13px;
     padding: 0px 0px 0px 5px;
     border-bottom: 0px solid #e3d842;
     text-transform: uppercase;
    }

/*OTHER PAGES*/

/* COMMENT PAGE */

/*TAGS PAGE*/

.tagstable, .tagstable td {
     border: 1px solid #dddddd;
     }
  .tagstable { width: 500px; }

Layout Images

All the images used in the layout are uploaded to imageshack, so you do not have to re-upload them unless you want to. However if you do, here are links to all the images used in the layout:

Hogwarts Header (created by me, using an image from Veritaserum).

Yellow Background.

Blue Background.

Green Background.

[<--Go Back]

WELCOME

NAVIGATION

DISCLAIMER

SPONSERS

BEAUTY OF HOGWARTS