Michael (masterslacker) wrote in component_help,

How to customise the look of your entries

Here is code that I've been working on for a while to show how to customise the look of an entry. It will affect the Recent, Day, Entry (the one with comments showing), and Friends pages. When you've viewing the code, please read the block comments in green to understand what you have to do. The following code puts a Link and {edit entry, add to memories, tell a friend} buttons at the bottom of the entry. It also shows you how you can remove the borders around user icons, and it shows you how you can move the Mood/Music information to above the entry text.

If you've used THIS 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.

[ Update 4/7/05 : Edited the tutorial to add entry Tags above Mood/Music metadata. ]
[ Update 18/2/04 : I rewrote some of the code to use system_box_top() and to embed the content within a table. This should make it easier for people to edit the content without having to worry about the layout specific code. ]
[ Update 22/2/04 : I added a small segment of code right at the top of the function to put in an html anchor that will be used from within the new Page Summary component that was introduced yesterday. You will need this for your Page summary links to work. ]
[ Update 13/3/04 : I altered the code for making your own toolbar so that I wasn't constructing the links, but instead was using the proper links that are attached to the entry. I also changed the way mood icon and text gets placed to the default of icon then text. I added instructions on how to reverse them if need be. ]

Code Colour 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 customisation that you can make. It explains code that is in the following three colours
red - either a variable value to change to customise 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 decommented to enable functionality

### 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>""";
  # 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 &nbsp; ":"")+$e.time->time_format()+" <b>"+$e.time->date_format("long")+"</b>");

  """<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">
         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
     # Display the icon if it exists
     if (defined $e.userpic) { """
         <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> """;
            """ <td align="center" class="userpic"><img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" /></td> """;
     """; }
     # 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") { """
         <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>""";
         } """
  """; }

  # Start the main entry text area
  """<td width="100%" valign="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 width="1" class="medLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
      <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 """;
  if ( (size $e.tags >0) or $e.metadata{"mood"}!="" or $e.metadata{"music"}!="" ) { """<br/><br/>"""; }

  # Print Tags, Mood and/or Music Fields:
  # If we have tags to print (taken from the component source with some modifications)
  if ($e.tags) {
    var int tcount = 0;
    """<b> Tags : </b> """;
    foreach var Tag t ($e.tags) {
      """<a rel="tag" href="$t.url">$t.name</a>""";
      if ($tcount != size $e.tags) { """, """; }
    if ($e.metadata{"mood"}!="" or $e.metadata{"music"}!="") { """<br/>"""; }

  # If we have a mood to print
  if ($e.metadata{"mood"}!="") { 
    # 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"}; 
    if ($e.metadata{"music"}!="") { """<br/>"""; }
  # If we have music to print
  if ($e.metadata{"music"}!="") { 
    """<b> $*text_meta_music : </b>"""; print $e.metadata{"music"};

  # if ( (size $e.tags >0) or $e.metadata{"music"}!="" or $e.metadata{"mood"}!="") { """<br/><br/>"""; }
  # """ $e.text """;
  # Close off the entry text area

  # 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%">
      <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) {
      <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>(&nbsp;<a href="$e.permalink_url" class="commentLinks">$*text_permalink</a>&nbsp;)<b></span></div>
      <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.

          # 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 edittagslink = $e->get_link("edit_tags");
          # if (defined $edittagslink and $edittagslink.url!="") { """<a href="$edittagslink.url"><img border='0' width="$edittagslink.icon.width" height="$edittagslink.icon.height" alt="" src="$edittagslink.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>"""; }

  # End the entry component and put a spacer after it so that entry components are seperated.
  """ <div><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="3" alt="" border="0"></div> """;

} # end of Function print_entry

If anyone has any suggestions for improving this, just let me know and I'll try to update it.

Tags: admin: deprecated, user: masterslacker
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →