Ended up cutting the explanation, too, because good grief am I wordy.
After a few months of being relatively happy with my layout (I'd figured out some custom coding that I was pretty proud of and didn't feel like tinkering any further), in a fit of extreme procrastination (two days to do 10 weeks worth of reading for a grad school final, ooops), I got it into my head to attempt the shrinking 'n centering tutorial. I was fully prepared for it to be monsterous, but it turned out to be very easy. I went on to attempt the rounded navbar tutorial (because that navbar hanging out in the middle of my journal with the sharp edges was seriously unpretty) and got past some corner.gif issues by viewing my own source code to get the color ID. Feeling super clever (despite my inability to dump the background image from the navbar, I just decided to leave it that way), I realized that shrinking 'n centering makes for some long-ass posts, especially my own. And while I can go back and lj-cut the longer ones so I'm not scrolling down forever, I tragically cannot force my friends to do the same. So, after poking through the scrollbar tutorials, I attempted that as well. I ran into a few problems and edited a few things, but at the end, there were no scrollbars. And there never had been, as I'd gone along in my edits. I've read through the code a few times and while I have a modest working knowledge of it, I'm by no means an expert and fairly out of practice. I worked primarily from this tutorial which is labeled as both horizontal and vertical scrolling on the tutorial page. (Incidentally, two different links from the tutorial page point to the same tutorial.) I'm including my code in the cut below. I'd limit it to what I added from the tutorial, but I'm putting the code my other components as well, because there may be a conflict I'm unaware of. My apologies for it being so long. If anyone can help me out in the next few days, I'd greatly appreciate it.
(Also, minor note. The scrollbar code moves my favorites and edit buttons below my entries and I don't know what the default stylesheet code was originally to get them to display next to my user pic, so I am having trouble moving that back. Tips on that would help too, I think it's supposed to go in the table, but I can't quite figure out how to write it so it will compile correctly.)
#####Scrolling Posts
####BEGIN print_custom_head####
####Banner body Code included####
function Page::print_custom_head() {
"""
<style media="screen" type="text/css">
table.fixed
{
table-layout:fixed;
}
div.scrollentry
{
width:100%;
overflow:auto;
overflow-y:hidden;
padding-bottom:17px;
}
body {
background-image: url(http://img128.exs.cx/img128/7421/howielayout3mt.png) !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important;
background-position: center 0px !important;
margin-top: 405px !important;
}
</style>
""";
} #end function#
### Override the printing of entries. This affects the Recent/Day pages, Friends pages, and Entry pages.
function print_entry(Page p, Entry e, Color bgcolor, Color fgcolor, bool hide_text) {
# Print the anchor to be used in the page summary.
if ($p.view=="friends") {
"""<a name="$e.journal.username$e.itemid"></a>
} else { # for recent, day, entry pages.
"""<a name="item$e.itemid"></a>""";
}
var string noscroll ;
if ($p.view == "recent" or $p.view == "friends") {
$noscroll = "class=\"fixed\"" ;
}
var string content_top = """<td class="entryHolderBg" width="100%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" width="100%" $noscroll>
<tr>
<td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt=""
border="0" /></td>
<td class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0"
/></td>
<td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt=""
border="0" /></td>
</tr>
<tr>
<td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt=""
border="0" /></td>
<td class="entry">
""";
# Print the header for the entry. It prints in the default form "[<icon> ]<time> <date>" where:
# <icon> is the security icon (ie. lock if protected, eye if private, or none if public)
# <time> is in the default time format (eg: 03:46 am)
# <date> is bold and in the "long" format (eg: November 25th, 2003)
# The ordering can be adjusted however needed, and you can also modify the formats that date and time print in.
# This can all be done in the red section below. For specifications of available formats or how to construct
# your own formats, you can see: http://www.livejournal.com/doc/s2/siteapi.core1.html#siteapi.core1.dateformats
print_entry_header((defined $e.security_icon?"$e.security_icon ":"")+$e.time->time_format()+"
<b>"+$e.time->date_format("long")+"</b>"
print_system_box_top();
"""<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>""";
# Check to see if we need to display a usericon and/or journal names, and if so, then print them
# Cases - 1. We are viewing a friends page, so we need to display icons if they exist and journal/poster names
# 2. We are viewing a recent/day/entry page, so we display only the icon if it exists and
# the user has set recent userpics on.
# The code in red is the logic to decide whether or not to show the userpics. You can modify it as you see fit.
if ($p.view=="friends" or ($*show_entry_userpic and defined $e.userpic) or $e.journal.journal_type=="C") {
# Start the table that will hold the icon and/or names
"""
<td valign="top" style="padding-right: 8px;">
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
</tr>
""";
# Display the icon if it exists
if (defined $e.userpic) { """
<tr>
<td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="0" height="0" alt="" border="0" /></td>
""";
# If we are on the friends view, then we want to print the extra border around the image that have the colors
# which are custom defined. If you don't like the colors or the border on the friends view, then you can just
# remove the blue segments. By default the recent/day/entry pages have a border around the usericons. If a user
# has a non-rectangular image, this may look strange, so you can replace the 1 with a 0 to remove the border.
#
if ($p.view=="friends") {
""" <div style="padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; background-color: """;
print $bgcolor.as_string; """ ;" align="center">
<img border="0" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" style="border-color:
"""; print $fgcolor.as_string; """ ;" />
</div> """;
}else{
""" <td align="center" class="userpic"><img border="0" src="$e.userpic.url" width="$e.userpic.width"
height="$e.userpic.height" alt="" /></td> """;
}
"""
</tr>
"""; }
# Display the journal and possibly poster name if we are viewing the friends page or any page on a community
# This code will print the journal the entry was made on, and if the poster is different, will print the poster under it.
# I made the names centered under the image, but if you want to keep them left aligned as in the original, then
# remove the blue segments
if ($p.view=="friends" or $e.journal.journal_type=="C") { """
<tr>
<td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="0" height="0" alt="" border="0" /></td>
<td align="left" class="ljuser">$e.journal""";
if ($e.journal.username!=$e.poster.username)
<div align="left" class="ljuser">$e.poster</div>""";
} """
</td>
</tr>""";
}
"""
</table>
</td>
"""; }
# Start the main entry text area.
#ATTENTION ALL THOSE ALREADY USING THE PRINT_ENTRY FUNCTION
#YOU HAVE TO REPLACE THIS PART OF YOUR CODE, NOT JUST ADD IT OR IT WON'T WORK.
print $content_top;
# If the subject is not empty, then print it followed by the line to seperate it from the entry text
# You can modify the lines in red if you want to adjust the way your subject prints, but the other lines must remain as is.
if ($e.subject!="") { """
<div class="entryHeader">$e.subject</div>
<div class="entryDash"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt=""
border="0" /></div>
</td>
<td width="1" class="medLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1"
alt="" border="0" /></td>
</tr>
<tr>
<td width="1" class="medLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1"
alt="" border="0" /></td>
<td class="entry">
"""; }
"""<div class="scrollentry">""";
# Print the entry text.
# If you want the entry text to be after the mood and music, then you need to do two things:
# - decomment the pink lines by removing the #'s from in front of them
# - comment out the blue lines by putting a # in front of them
""" $e.text """;
# Print Mood and/or Music Fields:
# If we have a mood to print
if ($e.metadata{"mood"}!="") {
# first we need a spacer after the entry text
"""<br/><br/>""";
# and then we print the mood label, followed by a mood icon if one exists, followed by the mood text.
# If you want the mood icon to be after the mood text, then you need to change the order of the two lines in red.
"""<b> $*text_meta_mood : </b>""";
if (defined $e.mood_icon) { """ $e.mood_icon """; }
print $e.metadata{"mood"};
"""<br/>""";
# if ($e.metadata{"music"}=="") { """<br/>"""; }
}
# If we have music to print
if ($e.metadata{"music"}!="") {
# If we didn't print a spacer because the mood was empty, then print one
if ($e.metadata{"mood"}=="") { """<br/><br/>"""; }
# then print the actual music label and the music
"""<b> $*text_meta_music : </b>"""; print $e.metadata{"music"};
# """<br/><br/>""";
}
# """ $e.text """;
# Close off the entry text area
"""</div>""";
print_content_bottom();
# This is where the fun stuff is!
# Now we begin the area underneath the entry that holds the comments, link, and entry related buttons.
"""
<table width="100%">
</tr>
<td width="50%" align="left" valign="center">
<div class="entryComments">
""";
# First we print the comment links if the entry allows comments
if ($e.comments.enabled) {
$e.comments->print();
}
"""
</div>
</td>
<td width="50%" align="right" valign="center">""";
# Then the entry related buttons
"""<div class="entryComments">
""";
# The easiest way to do this, which will work for all account types, is as follows, and will display actual buttons.
# If you'd like text instead of buttons, then remove the following line in blue, decomment the lines in pink,
# and edit as you see fit. Note that using the print_linkbar function will also add next and previous buttons to the
# Entry page (with comments), and I've reflected that in the pink lines below.
$e->print_linkbar();
# var Link prevlink = $e->get_link("nav_prev");
# if ($p.view=="entry" and defined $prevlink and $prevlink.url!="") { """<a href="$prevlink.url"><img border='0' width="$prevlink.icon.width" height="$prevlink.icon.height" alt="" src="$prevlink.icon.url" /></a>"""; }
# var Link editlink = $e->get_link("edit_entry");
# if (defined $editlink and $editlink.url!="") { """<a href="$editlink.url"><img border='0' width="$editlink.icon.width" height="$editlink.icon.height" alt="" src="$editlink.icon.url" /></a>"""; }
# var Link memlink = $e->get_link("mem_add");
# if (defined $memlink and $memlink.url!="") { """<a href="$memlink.url"><img border='0' width="$memlink.icon.width" height="$memlink.icon.height" alt="" src="$memlink.icon.url" /></a>"""; }
# var Link nextlink = $e->get_link("nav_next");
# if ($p.view=="entry" and defined $nextlink and $nextlink.url!="") { """<a href="$nextlink.url"><img border='0' width="$nextlink.icon.width" height="$nextlink.icon.height" alt="" src="$nextlink.icon.url" /></a>"""; }
"""
</div>
</td>
</tr>
</table>
""";
# End the entry component and put a spacer after it so that entry components are seperated.
"""</tr></td></table>""";
print_system_box_bottom();
""" <div><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="3" alt="" border="0"></div> """;
} # end of Function print_entry
###################################
# SHRINKING AND CENTERING #
# kunzite1, component-help/248593 #
# overrides page_layout(Page p) #
###################################
function page_layout(Page p) {
# Set this to the width that you want both the navbar (if it exists) and the whole journal to be
# may be percentage (70%) or number of pixels (700px).
var string k1Swidth = "712px";
var string k1Sheader_url = ""; # optional header image url
var string k1Sheader_alt = ""; # optional header image alt text
# Start the html document and print the head section which controls the page title, stylesheet information,
# server supplied head content, and custom header informtion from the print_custom_head function.
var string title = $p->title();
"""
<html>
<head>
<link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
$p.head_content
"""; $p->print_custom_head(); """
<title>$title</title>
</head>
""";
# Start the body section of the html document which controls the visible parts of the page.
"""<body style="text-align:center;">""";
###Attempt at custom rounded navbar:
# Print the rounded navigation bar if it is needed. This can be incorporated into any other tutorials which override
# the page_layout() function, and should be placed immediately after the <body> tag above.
if (not $*comp_navbar or $*comp_state=="none") {
"""
<table width="706px" cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img
src="http://stat.livejournal.com/palimg/component/curve-top-left.gif/p0fecaec1fb2db52fd8fd8" width="5" height="5" alt=""
border="0" /></td>
<td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1"
alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img
src="http://stat.livejournal.com/palimg/component/curve-top-right.gif/p0fecaec1fb2db52fd8fd8" width="5" height="5" alt=""
border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1"
alt="" border="0" /></td>
</tr><tr>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3"
alt="" border="0" /></td>
</tr><tr>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1"
height="1" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1"
height="1" alt="" border="0" /></td>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1"
height="3" alt="" border="0" /></td>
<td class="tabBg" width="100%">
<div class="header">
""";
print "<span class=\"header-item\"><a href=\""+$p.view_url{"recent"}+"\">$*nav
print "<span class=\"header-item\"><a href=\""+$p.view_url{"friends"}+"\">$*na
print "<span class=\"header-item\"><a href=\""+$p.view_url{"archive"}+"\">$*na
print "<span class=\"header-item\"><a href=\""+$p.view_url{"userinfo"}+"\">$*n
if($p.journal.webs
print "<span class=\"header-item\"><a
href=\"$p.journal.website_url\">$p.journ
}
$p->lay_viewspec_n
"""
</div>
</td>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1"
height="3" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1"
height="1" alt="" border="0" /></td>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1"
height="1" alt="" border="0" /></td>
</tr><tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img
src="http://stat.livejournal.com/palimg/component/curve-bottom-left.gif/p0fecaec1fb2db52fd8fd8" width="5" height="5" alt=""
border="0" /></td>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3"
alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img
src="http://stat.livejournal.com/palimg/component/curve-bottom-right.gif/p0fecaec1fb2db52fd8fd8" width="5" height="5" alt=""
border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1"
alt="" border="0" /></td>
</tr><tr>
<td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1"
alt="" border="0" /></td>
</tr>
</table>
</td>
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
</tr>
</table>
""";
}
if($k1Sheader_url != "") {
"""<div align="center"><img src="$k1Sheader_url" alt="$k1Sheader_alt" title="$k1Sheader_alt" /></div>""";
}
if($k1Swidth != "") {
"""<table style="border: 0px; margin: auto; padding: 0px; width:$k1Swidth;"><tr><td>""";
}
# Print the navigation bar if it is needed. This can be incorporated into any other tutorials which override
# the page_layout() function, and should be placed immediately after the <body> tag above.
# Print a spacer at the top of the page above the components and main area.
"""<div><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></div>""";
# Start the table which lays out the components and main area in side-by-side layout
"""
<table cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
<td width="3">
<img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
</td>
""";
# If the components are supposed to be on the left side of the page, then print them, followed by a column
# with a spacer which is to seperate the components and the main area.
if ($*comp_state == "left") {
print_my_components($p);
"""
<td width="3">
<img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
</td>
""";
}
# Print the main area of the page.
print_my_entries($p, $title);
# If the components are supposed to be on the right side of the page, then first print a column with a spacer
# and then print the components after the spacer.
# I set the clear.gif width to 7 to give more space between the posts and components.
if ($*comp_state == "right") {
"""
<td width="7">
<img src="$*PALIMGROOT/component/clear.gif" width="7" height="1" alt="" border="0" />
</td>
""";
print_my_components($p);
}
# Finish off the table for the body
"""
<td width="3">
<img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
</td>
</tr>
</table>
""";
if($k1Swidth != "") {
"""</td></tr></table>""";
}
# End the body section and end the html document
"""
</body>
</html>
""";
}
