InsaneJournal

Tweak says, "Say what?"

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.

(Read comments) - (Post a new comment)

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)

(Read comments) -