InsaneJournal

Tweak says, "the glorious Pitts."

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2012-03-05 14:28:00

Entry tags:

layouts: journals

Make your mod journal look like an actual school website
Temporary Live Preview: graphically

So, I saw the badassery that is chestnutgallery's gallery layout and I thought, "THIS NEEDS MORE HARRY POTTER!" Obviously.

I was already working on putting together a mod directory page, but I realized this was a) so much cooler and b) so much easier and more customizable. So, I banged the two together and came up with this.

INSTRUCTIONS
1. Go to Customize Journal
2. Make sure you are in Style System S2 (if not, switch and click Save Changes)
3. Under "Look and Feel" select Layout -> Generator and Theme -> (Default Layout)
4. Under "Custom Options" set "Number of journal entries to show on recent entries page" to 1
5. Use layout's stylesheet(s) -> No
6. Copy and paste this code into the Custom Stylesheet

/*Hides website/userinfo/calendar !*/
table table table table .meta 
{visibility:hidden;
 position:absolute;
 top:1px;}

/*hides title/friends/calendar*/
tr.caption
{visibility:hidden;
 position:absolute;
 top:1px;
 display:none;}

/*hides name*/
.shadowed td div 
{visibility: hidden; 
 position: absolute; 
 top: 0px;}

.shadowed img {
display:none;
}

.meta, .index{
visibility:hidden;
}

body {
  background-image:url(http://i.imgur.com/8GXOm.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-color: #2c1d3a;
  margin: 0; }

#footer{
text-align:left;
margin-left: 80%;
font-size: 7pt;
font-family: georgia;
color: #FFFFFF;
line-height: 9px;
letter-spacing: 1px; 
background-color: #161616;
padding: 4px;
width: 20% }

/*Table Width*/
table:first-of-type {
 position: absolute;
 left: 600px;
 top: 0;
 width: 50%;
 border: 0px;
 border-collapse: collapse;
 border-spacing: 0px;
 padding: 0px;}

p,font,td {
font-color: #000000;
}

table td	
{background-color: transparent;
 border: 0px;
 border-collapse: collapse;
 border-spacing: 0px;
 padding: 0px;}

table table	
{width: 100%;
 border: 0px;}

table table table
{width: auto;}

.caption
{color: #000000; font-family: georgia, serif; font-size: 32px; line-height: 25px; text-align: left!important; font-weight: normal; text-transform:lowercase; letter-spacing: 4px;}

table.entrybox table table table:first-of-type{ display:none; }
td.comments { display:none; }

table table table table td.meta {
font-size:5pt;
font-family:"georgia";
text-transform:uppercase;
letter-spacing:2px;
line-height: 11pt;
 text-align:justify;
}

table td
{border: 0px;
 border-collapse: collapse;
 border-spacing: 0px;
 padding: 0px;
}

.entrybox	
{background-color: transparent;
 margin-top: 20px;
 visibility: visible;}

.entrybox table{background:transparent}
table.box, table.box table tr.caption { display:block; }

/*Entry Padding*/
.entrybox table td
{padding: 6px;}

A:link{color:#A7C7E8;text-decoration:none;font-weight: none;font-family: century gothic;}
A:visited{color:#A7C7E8;text-decoration:none;font-weight:none;font-family: century gothic;}
A:hover{color:#CCADBA;}
A:active{color:#A7C7E8;text-decoration:none;font-weight:none;font-family: century gothic;}

/*Bottom Navigation Header*/
table table .index
{background-color: transparent;
 line-height: 1pt;
 font-size: 0pt;
visibility: hidden; 
 font-family: georgia, serif;
 color: #ffffff;
 text-align:right;
 padding: 0px;
 width: auto;
text-transform: uppercase;
}

/*friends userpic visibility*/
table.entrybox a.index img{
display: visible;
font-color: #ffffff;
}
/*friends userpic and name visibility*/
table.entrybox a.index{
display: visible;
background-color: #ffffff;
font-color: #000000;
font-family: georgia, serif;
}

table table table td.meta
{padding: 1px;
 line-height: 5pt;
 font-size: 8pt;}

.entrybox .meta
{background-color: transparent;
 padding: 0px;
text-align:center;
}

/*top icon stuff*/
table table table td
{background-color: transparent;
 border-collapse: collapse;
 border-spacing: 0px 0px;
 border:0px;
 padding-left: 0px;
 padding-top: 0px;
text-align:center;
}

.shadowed table table td
{vertical-alignment: top;}

d{
font-size:25px; 
line-height:21px; 
letter-spacing:-2px;
font-family: georgia, serif;
}

#navigation{
background-color: #FFFFFF; display: block; padding: 6px; width: 710px;
}

@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}

.the-header { text-align: center; }
.the-header h1 {
	font-size: 3em;
	color: white;
	font-family: Georgia, serif;
	text-shadow: 0 2px 3px rgba(0,0,0,.7);
}

.the-content { width: 700px; }

.info-box {
   float: left;
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 0;
   overflow: hidden;
   position: relative;
   text-align: center;
   vertical-align: top;
   cursor: default;
   background: transparent; }

.info-box h2 {
  font-size: 2em;
  color: white;
  font-family: Georgia, serif;
  text-shadow: 0 2px 3px rgba(0,0,0,.7);  }
  
.info-box .hidden {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.info-box .hidden h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 1em;
   padding: 5px;
   text-shadow: 0 2px 3px rgba(0,0,0,.7);
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0;
}

.info-box .hidden .info-box-links a {
   display: block;
   text-decoration: none;
   padding: 3px 5px;
   margin: 0 10px 3px 10px;
   background: rgba(0,0,0,0.8);
   font-size: .8em;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}

.info-box .hidden .info-box-links a:hover {
	background: rgba(0,0,0,1);
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.info-box .hidden {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(109,72,143,1);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.info-box .hidden h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.info-box .hidden .info-box-links a {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.info-box:hover .hidden {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.info-box:hover .hidden h2,
.info-box:hover .hidden .info-box-links a {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.info-box:hover .hidden .info-box-links a {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

7. Don't forget to hit Save Changes
8. Create a new entry in the journal
9. Set the entry's date to way distant in the future and check the "Date Out of Order" box
10. Check the "Disable Auto-Formatting" box
11. Copy and paste this code into the entry area

<div class="the-content">
<div class="the-header"><h1>Welcome to Hogwarts</h1></div>
<div class="info-box">
<h2>School<br />Directory</h2>
<div class="hidden">
<h2>School Directory</h2>
<div class="info-box-links">
<a href="" class="info-box-link" target="_blank">Rules & Guidelines</a>
<a href="" class="info-box-link" target="_blank">Faculty & Staff Listing</a>
<a href="" class="info-box-link" target="_blank">Student Listing</a>
<a href="" class="info-box-link" target="_blank">School Grounds Map</a>
</div>
</div>
</div>

<div class="info-box">
<h2>Prospective<br />Students</h2>
<div class="hidden">
<h2>Prospective Students</h2>
<div class="info-box-links">
<a href="" class="info-box-link" target="_blank">About Our School</a>
<a href="" class="info-box-link" target="_blank">Application for Enrollment</a>
<a href="" class="info-box-link" target="_blank">Student Reservations</a>
<a href="" class="info-box-link" target="_blank">Frequently Asked Questions</a>
</div>
</div>
</div>

<div class="info-box">
<h2>Current<br />Students</h2>
<div class="hidden">
<h2>Current Students</h2>
<div class="info-box-links">
<a href="" class="info-box-link" target="_blank">Class Schedules</a>
<a href="" class="info-box-link" target="_blank">Student Roseter Updates</a>
<a href="" class="info-box-link" target="_blank">Instant Chat Listing</a>
<a href="" class="info-box-link" target="_blank">Query the Headmaster</a>
</div>
</div>
</div>

<div class="info-box">
<h2>Extracurricular<br />Activities</h2>
<div class="hidden">
<h2>Extracurricular Activities</h2>
<div class="info-box-links">
<a href="" class="info-box-link" target="_blank">Quidditch Schedule</a>
<a href="" class="info-box-link" target="_blank">Quidditch Rosters</a>
<a href="" class="info-box-link" target="_blank">Club & Society Listing</a>
<a href="" class="info-box-link" target="_blank">Club & Society Rosters</a>
</div>
</div>
</div>
</div>

12. Post and refresh your recent entries to feast your eyes on the amazing-ness

Crediting

chestnutgallery and

rp_tutorials is a must, okay?

If you have any questions, feel free to leave them here.

(Post a new comment)

	grantaire 2012-03-05 09:02 pm UTC (link)
	There are no words for how amazing this looks. (Reply to this)

	mydecember 2012-03-05 09:31 pm UTC (link)
	This is kind of epic just so you know! (Reply to this)

	evaakeru 2012-03-06 01:35 am UTC (link)
	OH MY GAWD (Reply to this)

	herstory 2012-03-06 04:15 am UTC (link)
	This is beautiful! I'm bookmarking it for future use. Well done! (Reply to this)

	tellthenight 2012-03-06 05:49 pm UTC (link)
	I have literally no use for this, but it's so awesome, I am dying to find something to do with it now. Seriously, this is sexy. (Reply to this)

	chestnutgallery 2012-03-06 05:50 pm UTC (link)
	COULD YOU BE ANYMORE FANTABULOUS!! (Reply to this)

	superiors 2012-03-07 11:47 pm UTC (link)
	Love it; but how do I change the colors? :/ I tried to read the code, and it says like background: rgba? Do I edit the color scheme by throwing in the color specs? What does the a stand for? .info-box .hidden .info-box-links a { display: block; text-decoration: none; padding: 3px 5px; margin: 0 10px 3px 10px; background: rgba(0,0,0,0.8); (Reply to this) (Thread)

	evaakeru 2012-03-08 07:37 am UTC (link)
	the 'a' is for 'alpha'...this new css coding allows you to set an opacity via the alpha channel if you want to change the colors but don't want to deal with opacity you would enter your rgb values [first 3] and then change your final value to 0 [which in the case of your example would be 0.8 changed to 0] (Reply to this) (Parent)

	honeyspider 2012-03-08 05:37 am UTC (link)
	This... is... incredible. (Reply to this)

	dybim_mods 2012-03-10 01:48 am UTC (link)
	Using it here ! One question though, is there any way to change the default font on the headers (how the page looks when still, not when moused over) ? If there is that would be GREAT. I'm not very familiar with CSS, I'm afraid. Thanks! (Reply to this)

	chromaticqueen 2012-03-28 10:02 pm UTC (link)
	This layout is gorgeous. I'm using it (altered) over here. Thank you so much for sharing! (Reply to this) (Thread)

	vdas 2012-04-04 07:02 pm UTC (link)
	how did you make it not super wide? (Reply to this) (Parent) (Thread)

atwarmod
2012-04-05 12:13 am UTC (link)

In the code where it says

/*Table Width*/
table:first-of-type {
position: absolute;
left: 600px;
top: 0;
width: 50%;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;}

That's what controls how big your entry is. It's set to be 600px off to the left, and 50% of the total space (so anther 600px). You can change the "left:600px;" if you don't want it to be so far over, or you can change the "width: 50%;" so the entry space isn't so wide. You can set it to be a different percent or a set number of pixels. For my variation, I did "left: 0;" and "width: 100%;"

...I think that's the answer, anyway. I changed a lot of things and did most of it by trial and error, so let me know if it doesn't work.

(Reply to this) (Parent)

	brenhall 2012-10-19 12:07 am UTC (link)
	if i may, how did you change the colors on the dropdown menu and the font color on the headers? (Reply to this) (Parent) (Thread)

	atwarmod 2012-10-19 02:12 am UTC (link)
	I changed a lot of the CSS code and had to add a few lines, but I don't quite remember what I did. It was several days of trial and error to make it work. (Reply to this) (Parent)

	diefightingmod 2012-05-03 08:31 pm UTC (link)
	Using it on this journal, just changed the background and colors! Amazing layout! (Reply to this)

	diefightingmod 2012-05-23 09:21 pm UTC (link)
	I have one question. Is it possible to add in another layout for the friends page? (Reply to this)

olympusmods
2012-09-26 01:46 am UTC (link)

I seriously love you. But, there is always a but. I am stupid. Very much so. I have played around with it for a while now to get things the way I want them to annnnd... I can't get the boxes to change color. Because I love purple but it shouldn't be here. What I did was make the background vanish completely because I'm a magician.

If you maybe had two minutes to point me in the right direction? Because I'm usually staring right at my problem and do so until I get to smack myself in the forehead but... my online time right now is limited. I would seriously appreciate your help.

Oh. This journal, I should probably MENTION that.

(Reply to this)

	brenhall 2012-10-19 12:01 am UTC (link)
	hi! i am so in love with this layout and i've tweaked it a bit, but i've run into a problem and i was hoping you could help. i'd like to change the font on the headers to yellow and change the dropdown boxes to blue, but i can't seem to figure it out! any help would be really appreciated! (Reply to this)