Hogwarts Homework layout and matching profile layout
I never make New Year's resolutions, but then I suddenly found myself planning to do this and that and most insanely I decided to try and finish my unfinished layouts, one every month.
And because I couldn't decide which layout to finish first, I just made a new one.
I got a new monitor for Christmas, it's big - now some of my old layouts look a bit small. I made this layout to look good on a 1680x1050 screen, but also work on 1024x768. On a smaller screen it looks a bit full. :o/
Howarts Homework
Click here for live preview, then click on the layout's icon.
info
based on Flexible Squares
works for all account types
tested in Internet Explorer 8 and Firefox 3
how to
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
/* Hogwarts Homework
http://fuesch.livejournal.com/23513.html */
body {
background:url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/bg.png) center top;
text-align: left;
color: #012144;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
margin: 0px auto;
}
a, a:link {
color: #441F01;
text-decoration: none;
}
a:visited, a:active {
color: #7B593E;
text-decoration: none;
}
a:hover {
color: #441F01;
text-decoration: underline;
}
code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
p, td, blockquote {
font-size: 12px;
}
blockquote {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/quote.png) top left no-repeat;
padding: 5px 0px 0px 37px;
color: #005B02;
}
q {
font-style: italic;
color: #005B02;
}
/* GENERAL ----------------------------------------------------------------------------------------------------------------------------------------------------- */
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
/*so that IE users will still see an image*/
background-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/ljuser.png);
padding: 17px 0px 0px 14px !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/ljuser.png);
padding: 17px 0px 0px 14px !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/ljuser.png);
padding: 17px 0px 0px 14px !important;
}
.clear {
height: 15px;
}
#content {
width: 825px;
height: 550px;
padding: 0px 0px 0px 150px;
margin: auto;
}
#header {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/header.png) no-repeat;
position: relative;
z-index:100;
width: 801px;
height: 142px;
margin-left: -42px;
padding: 0px 41px 0px 0px;
text-align: right;
}
ul.navheader {
padding: 16px 0px 0px 0px;
margin: 0px;
font-size: 13px;
text-transform: uppercase;
}
ul.navheader li {
display: inline;
padding: 0px 0px 0px 7px;
}
.navheader a:visited, .navheader a:active {
color: #441F01;
}
.title {
font-size: 24px;
text-transform: uppercase;
margin-top: 20px;
}
.subtitle {
font-size: 24px;
top: 10px;
}
#sidebar {
overflow: scroll;
overflow-x:hidden;
width: 160px;
height: 400px;
float: right;
text-align: left;
}
.sbarbody {
padding: 0px 5px 0px 0px;
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/sbartitle.png) top left no-repeat;
}
.sbarbody2 {
padding: 0px 5px 0px 0px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbartitle {
font-size: 20px;
padding-left: 23px;
list-style: none;
margin: 10px 0px -10px 0px;
}
.tagcloud {
list-style: none;
}
li.sbaritem {
padding: 3px 0px;
}
.defaultuserpic {
text-align: center;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding-bottom: 2px;
text-align: center;
}
.sbarcalendarposts {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/calendar.png) bottom left no-repeat;
padding-bottom: 2px;
text-align: center;
}
#maincontent {
overflow: scroll;
overflow-x:hidden;
width: 630px;
height: 514px;
margin-top: -7px;
padding: 10px 10px 0px 0px;
float: left;
text-align: left;
}
#footer {
text-align: left;
font-size: 13px;
text-transform: uppercase;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0px 5px;
}
.clearfoot {
clear: both;
}
/* ENTRIES & FRIENDS ------------------------------------------------------------------------------------------------------------------------------------------- */
* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}
.userpic {
float: left;
margin: 0px 10px 10px 0px;
z-index: 15;
}
.userpicfriends {
float: left;
margin: 0px 10px 10px 0px;
text-align: right;
font-size: 10px;
font-style: italic;
z-index: 15;
}
.subject {
font-size: 24px;
}
.entry {
margin: 0px;
padding-top: 10px;
text-align: left;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 15px;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
}
.currents {
margin-top: -15px;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
}
.comments {
margin-top: -10px;
padding: 45px 5px 0px 5px;
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/comments.png) top center no-repeat;
text-align: right;
}
.separator {
height: 75px;
}
/* COMMENTS ---------------------------------------------------------------------------------------------------------------------------------------------------- */
.skiplinks {
text-align: center;
color: #7B593E;
text-transform: uppercase;
padding-bottom: 10px;
border-bottom: 1px solid #C59B63;
margin: 5px 20px 10px 20px;
}
.skiplinks a {
margin: 0px 5px;
font-size: 10px;
letter-spacing: 1px;
}
.box {
clear: left;
}
.commentbox {
margin: 10px 0px 20px 0px;
padding-left: 125px;
}
.datesubjectcomment {
border-bottom: 1px solid #C59B63;
padding: 15px 0px 5px 0px;
}
.userpiccomment {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/commenticon.png) top right no-repeat;
padding: 20px 25px 0px 0px;
margin: -15px 0px 0px -125px;
z-index: 15;
float: left;
}
.commentreply {
margin: 10px 0px;
}
.commentboxpartial {
border: 1px solid #C59B63;
padding: 10px;
margin: 10px 10px 20px 10px;
}
#content + div {
background-color: transparent!important;
border: none!important;
}
/* COMMENTING ------------------------------------------------------------------------------------------------------------------------------------------------- */
* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
}
input, textarea {
background-color: #E6D0A8;
color: #012144;
}
textarea.textbox {
width: 95% !important;
}
/* CALENDAR ---------------------------------------------------------------------------------------------------------------------------------------------------- */
ul.year {
text-align: center;
padding-bottom: 20px;
}
ul.year li {
display: inline;
margin: 0px 5px;
}
.active {
font-size: 20px;
margin: 0px 5px;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
td.yearmonth {
border-style: none;
font-size: 18px;
}
td.yearmonth a {
font-size: 12px;
}
table.yeartable td.yearday {
padding: 3px 2px;
text-align: center;
background: #C59B63;
font-variant: small-caps;
border: 1px solid #C59B63;
}
table.yeartable td.yeardate {
border: 1px solid #C59B63;
padding: 2px;
}
table.yeartable td.yeardate a {
font-size: 18px;
}
/* TAGS -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ljtaglist {
margin-left: 50px;
}
ul.ljtaglist {
list-style-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/taglist.png);
}
ul.ljtaglist li {
margin-bottom: 5px;
}
The ads of a plus account take their color from the Custom Options. If you want to adjust the colors, go to Style and change Page - Background color of the outer table and Entries - Border color of the content and header/footer boxes.
If the layout looks wrong, it's probably because of the Navigation Strip. Look for
body {
background:url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/bg.png) center top;
in the CSS and replace top with 45px.
And there's a matching profile layout!
You got 3 font colors to choose from and several decorative pics.
Pro tip:
To prevent your layout from looking as overladen as this example, don't use every one of the decorative pics.
Headline in green
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.
You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with
and
. 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:
LINK TEXT
And because I couldn't decide which layout to finish first, I just made a new one.
I got a new monitor for Christmas, it's big - now some of my old layouts look a bit small. I made this layout to look good on a 1680x1050 screen, but also work on 1024x768. On a smaller screen it looks a bit full. :o/
Howarts Homework
Click here for live preview, then click on the layout's icon.
info
based on Flexible Squares
works for all account types
tested in Internet Explorer 8 and Firefox 3
how to
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
/* Hogwarts Homework
http://fuesch.livejournal.com/23513.html */
body {
background:url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/bg.png) center top;
text-align: left;
color: #012144;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
margin: 0px auto;
}
a, a:link {
color: #441F01;
text-decoration: none;
}
a:visited, a:active {
color: #7B593E;
text-decoration: none;
}
a:hover {
color: #441F01;
text-decoration: underline;
}
code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
p, td, blockquote {
font-size: 12px;
}
blockquote {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/quote.png) top left no-repeat;
padding: 5px 0px 0px 37px;
color: #005B02;
}
q {
font-style: italic;
color: #005B02;
}
/* GENERAL ----------------------------------------------------------------------------------------------------------------------------------------------------- */
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
/*so that IE users will still see an image*/
background-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/ljuser.png);
;){kind=link}
padding: 17px 0px 0px 14px !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/ljuser.png);
padding: 17px 0px 0px 14px !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/ljuser.png);
padding: 17px 0px 0px 14px !important;
}
.clear {
height: 15px;
}
#content {
width: 825px;
height: 550px;
padding: 0px 0px 0px 150px;
margin: auto;
}
#header {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/header.png) no-repeat;
position: relative;
z-index:100;
width: 801px;
height: 142px;
margin-left: -42px;
padding: 0px 41px 0px 0px;
text-align: right;
}
ul.navheader {
padding: 16px 0px 0px 0px;
margin: 0px;
font-size: 13px;
text-transform: uppercase;
}
ul.navheader li {
display: inline;
padding: 0px 0px 0px 7px;
}
.navheader a:visited, .navheader a:active {
color: #441F01;
}
.title {
font-size: 24px;
text-transform: uppercase;
margin-top: 20px;
}
.subtitle {
font-size: 24px;
top: 10px;
}
#sidebar {
overflow: scroll;
overflow-x:hidden;
width: 160px;
height: 400px;
float: right;
text-align: left;
}
.sbarbody {
padding: 0px 5px 0px 0px;
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/sbartitle.png) top left no-repeat;
}
.sbarbody2 {
padding: 0px 5px 0px 0px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbartitle {
font-size: 20px;
padding-left: 23px;
list-style: none;
margin: 10px 0px -10px 0px;
}
.tagcloud {
list-style: none;
}
li.sbaritem {
padding: 3px 0px;
}
.defaultuserpic {
text-align: center;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding-bottom: 2px;
text-align: center;
}
.sbarcalendarposts {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/calendar.png) bottom left no-repeat;
padding-bottom: 2px;
text-align: center;
}
#maincontent {
overflow: scroll;
overflow-x:hidden;
width: 630px;
height: 514px;
margin-top: -7px;
padding: 10px 10px 0px 0px;
float: left;
text-align: left;
}
#footer {
text-align: left;
font-size: 13px;
text-transform: uppercase;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0px 5px;
}
.clearfoot {
clear: both;
}
/* ENTRIES & FRIENDS ------------------------------------------------------------------------------------------------------------------------------------------- */
* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}
.userpic {
float: left;
margin: 0px 10px 10px 0px;
z-index: 15;
}
.userpicfriends {
float: left;
margin: 0px 10px 10px 0px;
text-align: right;
font-size: 10px;
font-style: italic;
z-index: 15;
}
.subject {
font-size: 24px;
}
.entry {
margin: 0px;
padding-top: 10px;
text-align: left;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 15px;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
}
.currents {
margin-top: -15px;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
}
.comments {
margin-top: -10px;
padding: 45px 5px 0px 5px;
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/comments.png) top center no-repeat;
text-align: right;
}
.separator {
height: 75px;
}
/* COMMENTS ---------------------------------------------------------------------------------------------------------------------------------------------------- */
.skiplinks {
text-align: center;
color: #7B593E;
text-transform: uppercase;
padding-bottom: 10px;
border-bottom: 1px solid #C59B63;
margin: 5px 20px 10px 20px;
}
.skiplinks a {
margin: 0px 5px;
font-size: 10px;
letter-spacing: 1px;
}
.box {
clear: left;
}
.commentbox {
margin: 10px 0px 20px 0px;
padding-left: 125px;
}
.datesubjectcomment {
border-bottom: 1px solid #C59B63;
padding: 15px 0px 5px 0px;
}
.userpiccomment {
background: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/commenticon.png) top right no-repeat;
padding: 20px 25px 0px 0px;
margin: -15px 0px 0px -125px;
z-index: 15;
float: left;
}
.commentreply {
margin: 10px 0px;
}
.commentboxpartial {
border: 1px solid #C59B63;
padding: 10px;
margin: 10px 10px 20px 10px;
}
#content + div {
background-color: transparent!important;
border: none!important;
}
/* COMMENTING ------------------------------------------------------------------------------------------------------------------------------------------------- */
* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
}
input, textarea {
background-color: #E6D0A8;
color: #012144;
}
textarea.textbox {
width: 95% !important;
}
/* CALENDAR ---------------------------------------------------------------------------------------------------------------------------------------------------- */
ul.year {
text-align: center;
padding-bottom: 20px;
}
ul.year li {
display: inline;
margin: 0px 5px;
}
.active {
font-size: 20px;
margin: 0px 5px;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
td.yearmonth {
border-style: none;
font-size: 18px;
}
td.yearmonth a {
font-size: 12px;
}
table.yeartable td.yearday {
padding: 3px 2px;
text-align: center;
background: #C59B63;
font-variant: small-caps;
border: 1px solid #C59B63;
}
table.yeartable td.yeardate {
border: 1px solid #C59B63;
padding: 2px;
}
table.yeartable td.yeardate a {
font-size: 18px;
}
/* TAGS -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ljtaglist {
margin-left: 50px;
}
ul.ljtaglist {
list-style-image: url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/taglist.png);
;){kind=link}
}
ul.ljtaglist li {
margin-bottom: 5px;
}
The ads of a plus account take their color from the Custom Options. If you want to adjust the colors, go to Style and change Page - Background color of the outer table and Entries - Border color of the content and header/footer boxes.
If the layout looks wrong, it's probably because of the Navigation Strip. Look for
body {
background:url(http://fatfrog.info/Ma/A/layout/HogwartsHomework/bg.png) center top;
in the CSS and replace top with 45px.
And there's a matching profile layout!
You got 3 font colors to choose from and several decorative pics.
Pro tip:
To prevent your layout from looking as overladen as this example, don't use every one of the decorative pics.
Headline in green
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.
| http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-top.png"> | ||
| http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-left.png"> | http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-middle.png"> blue headline Blue text. brown headline Brown text. Headline in green Green text. | http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-right.png"> |
| http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-bottom.png"> | ||
You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with
and
. 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:
LINK TEXT