Fuesch's graphics & layouts

House Rules

~~Driver picks the music, shotgun shuts his cakehole.~~

Everything is snaggable - no need to ask.

Please credit.
<lj user=fuesch>

Comments are great.

Nominations are awesome.

If you find a typo, please let me know!

If you'd like a graphic customized, just ask - please don't edit it yourself.

I don't mind if you adjust layouts a bit.

Got a question? Don't be afraid to ask. But keep it on topic.

If your question/comment doesn't fit into any entry, please send me a message.

Tags

August 2024

Previous | Memories | Tell Someone | Next

fuesch

26 January 2011 @ 06:15 pm

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. <lj-raw><table border="0" cellpadding="0" cellspacing="0"> <tr><td height="101" colspan="3" background="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-top.png"> </td></tr> <tr> <td width="31" background="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-left.png"> </td> <td width="400" background="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-middle.png"> <font face="Georgia, Times New Roman, Times, serif" size="4" color="#012144">blue headline</font><br> <font face="Georgia, Times New Roman, Times, serif" size="2" color="#012144">Blue text.</font><p /> <font face="Georgia, Times New Roman, Times, serif" size="4" color="#441F01">brown headline</font><br> <font face="Georgia, Times New Roman, Times, serif" size="2" color="#441F01">Brown text.</font><p /> <font face="Georgia, Times New Roman, Times, serif" size="4" color="#005B02">Headline in green</font><br> <font face="Georgia, Times New Roman, Times, serif" size="2" color="#005B02">Green text.</font><p /> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-beans.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/commenticon.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/sbartitle.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/comments.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/taglist.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-quill.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/quote.png"> <img src="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-xxo.png"> <p /></td> <td width="31" background="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-right.png"> </td></tr> <tr><td height=68"" colspan="3" background="http://fatfrog.info/Ma/A/layout/HogwartsHomework/profile-bottom.png"> </td></tr> </table></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="#005B02">LINK TEXT</font></a>`