How To Customize The Look Of Your Entries [Practical Application - GuestBook]
Within a couple of threads in this community as well as a few that have occurred on
tjackson, I have been asked about my GuestBook. Specifically I have been asked how I got it working. I have also been asked how I got my todo list working as well.
Basically these have both stemmed from the same modification. With the help of 
masterslacker and kunzite1, I was able to make different looking entries for the specific instances of my To-Do List and GuestBook. How you make ask, did I do that? I wasn't going to ask that. </get smart joke> I did that through the following.
Stolen Disclaimer From masterslacker: If you've used this 'Different Kind of Entries' tutorial on making different kinds of entries for announcements etc., then the following code should still work as it is overriding the Component::print_entry function, which the previously mentioned tutorial uses. I'm assuming that you are familiar with creating your own layers and understand what overriding functions accomplish. If you don't, a good place to start is here with the 'Additional Component Customization' tutorial.
[Updated: 12:07 CST May 12th 2004] - See
tjackson's replies to masterslacker's commentsTutorial & Walkthrough
- First things first, in order to modify the way our GuestBook displays, so it looks differently from every other entry, we first have to _have_ a GuestBook entry. Just because this is the first tutorial I've ever written, I am going to walk you through the posting process, I'm going to spell it out for ya :)
Just so I cover all the bases, the two 'popular' methods of posting, are through the LiveJournal Update Form and Semagic's downloadable software. - Whenever you are posting your GuestBook it is best that you backdate your entry. For the uninformed, backdating is when you date your entry earlier than the date actually is. For example, my GuestBook is back-dated to November 16th 1980 at 6:31pm, the exact time I was born. By backdating your GuestBook, you maintain the GuestBook's functionality, without sacrificing the functionality of your Calendar component. The LiveJournal Update Form and Semagic's software both have places where you can enter the exact date on which you wish to have your entry posted. Filling this out is important, whatever date you prefer is unimportant. After backdating your entry, make sure the 'Backdate Entry' box is checked, and we are on to the next, and probably easiest step.
- Writing your GuestBook entry. Go ahead and fill out your entry, like you would any other LiveJournal post. It's usually traditional to write things like 'Welcome to my GuestBook, leave your name, where I can reach you, and how you got here. Plus feel free to banter about whatever you like.' But you are more than welcome to make this little message area your own wonderland of fun. There.... wasn't that fun?
- This part is one of the portions that is a problem area. In this part, we choose the subject of your GuestBook entry. For the sake of completeness, we will be choosing our GuestBook subject to be "My s0up3r1337 GuestBook". It is important that you remember whatever you want to define your GuestBook subject as, if you choose something other than "My s0up3r1337 GuestBook". This is because we will be using the Subject as the means by which LiveJournal knows to display this entry differently than all the others. By specifying your subject as something obscure like we have here, you run a lesser risk of accidently naming two things the 'special' GuestBook name, and probably messing up your LiveJournal. I have also been informed by masterslacker that whatever date/subject they choose for this entry will show up in the archive pages as such, and so if that's important to you, you wouldn't want to pick a bad subject line.
- Rather than putting in my own journal's code, which gets to be a little messy at times, and in the interest of simplicity, we will be using the code from the 'Customizing Your Entries' tutorial, as our starting point. The code is as follows, and will be colored along the same guidelines as most of the other tutorials. Anything added to this function override, for the purposes of GuestBook functionality will be displayed in italics, in addition to the proper coloring formats.
Code Color Scheme :
black - code that doesn't need to be changed to make the enhancement work
green - very important comments explaining the operation of code, and further customization that you can make. It explains code that is in the following three colors
red - either a variable value to change to customize your look, or code that you can play with to affect layout of items
blue - active lines that can be removed to remove functionality
pink - inactive lines that can be de-commented to enable functionality
Code:</p>
### 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) { # Here we have created a variable string called GBSubjectForDisplay. We will use this input to refer to # what we will display as the actual subject for this entry. In this tutorial, we will be displaying # "My GuestBook" as the subject for this entry. You can change that here, if you so desire. # In this same area we have also created a variable string called GBSubjectInPost, we will use this # variable to refer the to the obscure subject we specified in the actual GuestBook entry, "My s0up3r1337 GuestBook". # This way it is easier to refer to this obscure subject throughout our code. var string GBSubjectForDisplay = "My GuestBook"; var string GBSubjectInPost = "My s0up3r1337 GuestBook"; # 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>"""; } # This header area is where we will change how the GuestBook's header is displayed differently from the headers # of our other Journal entries. In order to do this, we perform two checks upon the subject of our entries. # The first of these checks is to determine whether or not the subject is "$GBSubjectInPost". # If it is not, then we proceed to display the default entryHeader. The default entryHeader is printed # in the 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) # You can reorder this or adjust it to whatever suits you best. You can also modify the format that the date and time # are printed in. This can all be done in the red section below, contained in the # first if-statement. 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 # # The second check is where we check if the subject of an entry is what we labelled the 'actual' # subject to be on our backdated entry. We do this by comparing it to the variable string we declared earlier, # to lower the risk of typo's that cause breakage. If it is the same, than we print the value of the variable # we specified at the beginning of this function override, GBSubjectForDisplay in our entry header # # As in the case of each of these entries, the order of the security_icon, time_format, and other possible options # may be configured per your leisure. More information about time_formatting possibilities may be found at the URL above. """<div style="width: 100%">"""; if ($e.subject!=$GBSubjectInPost) { """ <div class="entryHeader"> """; print_entry_header((defined $e.security_icon?"$e.security_icon ":"")+$e.time->time_format()+" "+$e.time->date_format("long")+""); """ </div> """; } else { """ <div class="entryHeader"> """; print_entry_header("<B>$GBSubjectForDisplay</B>"); """ </div> """; } 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 """<td width="100%" valign="top">"""; 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!="") { if ($e.subject=="$GBSubjectInPost") { """ <div class="entryHeader">$GBSubjectForDisplay</div> """; } else { """ <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"> """; } # 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 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. # This is also where we will be customizing the links for visitors to sign and view our GuestBook, # as well as adding the ability for you the owner to edit the guestbook's contents without having # to hunt through your calendar for your backdated entry """ <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 # We check if the subject of the entry is the 'actual' subject we selected for our # GuestBook, $GBSubjectInPost. If it is, then we print a link pointing to the reply mode for this entry. # If it is not, and if comments are enabled, then we continue with the default LiveJournal method of displaying the comment links. if ($e.subject=="$GBSubjectInPost") { """ <A HREF="$e.comments.post_url">Sign My GuestBook</A> $*comment_divider <A HREF="$e.comments.read_url">View My GuestBook</A> """; } elseif ($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 segments. # For the GuestBook entry, we continue with our pattern of checking whether or not the entry's 'actual' # subject is equal to what we specified it as, if it is, than we change the link to the full entry to say # View My GuestBook. This link text is obviously customizable to your own preferences. if ($e.subject=="$GBSubjectInPost") { """ <div class="entryComments"><span style="white-space:nowrap;"><b>( <a href="$e.permalink_url" class="commentLinks">View My GuestBook</a> )<b></span></div> """; } else { """ <div class="entryComments"><span style="white-space:nowrap;"><b>( <a href="$e.permalink_url" class="commentLinks">$*text_permalink</a> )<b></span></div> """; } """ </td> <td width="50%" align="right" valign="center">"""; # We print the entry related buttons here. """<div class="entryComments">"""; var Link prevlink = $e->get_link("nav_prev"); if ($p.view=="entry" and $e.subject!=$GBSubjectInPost 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 $e.subject!=$GBSubjectInPost 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 separated. """</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
I'm not sure if I got everything completely right or not, but I tried my bestest. I'm off to pick up my wife
from work, and do various other things this evening. Later, I will be back to field comments, questions, suggestions,
etc. Thanks very much for your time and patience. -
tjackson