accomplished
liabunny was so nice to link it in the tutorials box. Makes me feel all special. :) So I've re-written it so that it makes a little more sense.Edit: Thanks
masterslacker :)To start with, you'll need to put into your layers the code to put your entire journal inside a tabled "frame". If you're already using the Image Above Entries option, this is done for you, skip down. If you're not, and you don't want an image above your entries, put the following code in at the top of your layers, but below any stylesheet overrides. This code courtesy of
anchan218, author of the Putting Graphics above Entries tutorial.--Code--
function page_layout(Page p) {
var string title = $p->title();
"""
<html>
<head>
<link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
$p.head_content
<title>$title</title>
</head>
<body>
### Defines main table frame for journal.
<table width="100%" cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
### These two lines define the left-hand separation spacer between the browser frame and the first column of your journal, be it your components or entries.
<td width="1" background="http://www.livejournal.com/palimg/component/clear.gif">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0">
</td>
### If you have your components set on the left, this prints them first.
""";
if ($*comp_state == "left") {
print_my_components($p);
"""
### Spacer between left components and entries.
<td width="10">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="10" height="1" alt="" border="0">
</td>
""";
}
### This puts your entries into place, regardless of your component placement.
print_my_entries($p, $title);
### And if your components are on the right...
if ($*comp_state == "right") { ###
"""
<td width="10">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="10" height="1" alt="" border="0">
</td>
""";
print_my_components($p);
}
"""
## And finally, we put a small spacing at the bottom of the page.
<td width="10">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="10" height="1" alt="" border="0">
</td>
</tr>
</table>
</body>
</html>
""";
}
--Code--
This separates your journal into it's basic components, and sets them all inside a table. This allows for a good many other customizations, but I'll go into those in another post. The basic breakdown is commented for you, if you're curious as to what this does.
Now, the next part's even easier. Put the table above inside a div. So. Up above the <table width="100%" cellspacing="0" cellpadding="0" valign="top"> tag, we're going to add the code to make everything scroll, and define a width and height for our scrolling box.
Simple one line of code:
<div id="Layer1" style="position:relative; width:850px; height:550; z-index:1; overflow: auto;">
If you're not familiar with HTML or with div tags specifically, let's break this down.
id="Layer1" - this defines the name of the div, basically serves no functional purpose other than to let you know what it is if you see it.
style - Sets the parameters of the div, which is what we need to look at.
position: - This can be either relative or absolute. If you want your journal centered on the page, you'll need to add align:center, but also keep this set as relative. If you want it left aligned, or at a certain spacing from the top left corner, you need to set this to absolute.
Width and height, fairly self explanatory. :)
Z-index - Anything other than 1 or 0 will "float" the div above other elements in the journal. So if you wanted to do some layered backgrounds, etc, change this number up to put it on top.
But of all this, this is the most important variable: overflow. Set this to auto, and vertical and horizontal scrollbars will show up whenever necessary. This is the whole point of this excercise...making a scrolling box!
So we put this div tag up above the table tag, and we want the whole thing centered..so we're left with:
<center>
<div id="Layer1" style="position:relative; width:850px; height:550; z-index:1; overflow: auto;">
<table width="100%" cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
<td width="100" background="http://digitalphantasy.com/images/xmaslights2.jpg">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="100" height="1" alt="" border="0">
</td>
""";
if ($*comp_state == "left") {
print_my_components($p);
"""
<td width="10">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="10" height="1" alt="" border="0">
</td>
""";
}
print_my_entries($p, $title);
if ($*comp_state == "right") {
"""
<td width="10">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="10" height="1" alt="" border="0">
</td>
""";
print_my_components($p);
}
"""
<td width="10">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="10" height="1" alt="" border="0">
</td>
</tr>
</table>
</div>
</center>
There you go! If you want to set your journal at a certain place on the page, you'd add in left:XXXpx; top:XXXpx; to your div tag.
Now, if you want to have your scroll bar colored to match your journal colors, you need to add the following into your style. As I haven't gotten print_custom_head to work yet, I use the print_style_sheet function, and add the following to my body tag:
scrollbar-face-color: #666F75;
scrollbar-arrow-color: #899094;
scrollbar-base-color: #666F75;
scrollbar-shadow-color: #50575C;
scrollbar-dark-shadow-color: #1D2128;
scrollbar-highlight-color: #C5C9CB;
scrollbar-3d-light-color: #D7DaDB;
And that's it for that! You now have a colored scrolling journal.
Now let's look more into this layout up above, and think about the things we can do.
Key things I want to point out are the <img src="http://www.livejournal.com/palimg/component/clear.gif" width="100" height="1" alt="" border="0"> tags. Looking at these, we can adjust the spacing between the components and entries...and if you're not using the scroll, you can adjust your padding between the browser edges and your journal...or you can use your own images to create borders around your journal, your components, and your entries. For example, in my journal, I made a christmas light vertical background image, and put it in, so my entries are framed on the left with a little Christmas joy. :) Basically what I did was:
<tr valign="top" width="100%">
<td width="100" background="http://digitalphantasy.com/images/xmaslights2.jpg">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="100" height="1" alt="" border="0">
</td>
Notice that I changed the width of the td cell, used my image as the background, and also changed the width of the clear.gif image to ensure the td's width of 100.
You can also use these table cells to put in extra text, various images, or put all kinds of HTML into it. Add a scrolling news or stock or sports ticker, etc. Just like in the components, but if you want something at the bottom of your journal, or at the top, or down the side...this is where you'd do it. :)