Edit: there might be a few bugs because of all the copy/pasting. I'll try to eliminate them as I test the code, so bear with me, k? :). Recopy the code if it isn't working becuase I might have added stuff that wasn't there.
Ok, lots of people have been asking how to set up their journals so that if there are big images or whatever that stretch their layouts scrolling bars will automatically appear on the entries.
While I could use 
t3knomanser's Entries in a Scrollbox that would only work for Mozilla (and maybe Opera, I haven't tried) browsers, and not Internet Explorer which is the most commonly used (unfortunately).
So daimones has allowed me to use his own code which seems to work in all browsers, so go all and build a shrine to daimones ^_^. I've modified it to add some of the stuff that he hadn't added, such as the permalink and the edit/add memory buttons.
For all those who already have the print_entry function overriden, you need to only add the parts in blue. Anyway, here's the code:
First we need to add the specific classes that daimones created into our stylesheet, to do that we'll edit the page::print_custom_head() function. Again, those who already have this function in your journals, you only need to add the part in blue:
####BEGIN print_custom_head####
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;
}
</style>
""";
} #end function#
#Once we've done that we can proceed to edit the entries so that they apply these new classes #and do all that stuff that we want them to ;).
### 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>
<td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr>
""";
# Display the icon if it exists
if (defined $e.userpic) { """
<tr>
<td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="2" 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: 3px; padding-left: 3px; padding-right: 3px; padding-bottom: 3px; background-color: """; print $bgcolor.as_string; """ ;" align="center">
<img border="1" 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="1" 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="1" height="2" alt="" border="0" /></td>
<td align="center" class="ljuser">$e.journal""";
if ($e.journal.username!=$e.poster.username)
<div align="center" 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 align="center" valign="center">""";
# Then print a permanent link to the entry.
# I have this because I have my journal set to display comment links with "?nc=XX" tacked onto the end,
# and when I'm copying and pasting links, it's annoying to have there. Also, if you want a link to
# an entry that has no comments yet, the only link that's shown by default is the reply to link, and that
# that includes "?mode=reply" which is also annoying to have to remove.
# Essentially this is here for convenience. If you don't want it, remove the blue segment.
"""
<div class="entryComments"><span style="white-space:nowrap;"><b>( <a href="$e.permalink_url" class="commentLinks">$*text_permalink</a>
</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
Remember that all credit goes to daimones and masterslacker, I'm just copy/pasting/tweaking :P.
← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →