Michael (masterslacker) wrote in component_help,
Michael
masterslacker
component_help

Customising the layout of your Comment Headers

A few people have said that the layout of the comment headers does not shrink well and causes their pages to be too wide. So here's some code that reworks the layout of the component headers. For previews of what it looks like wide and thin, see the images below. A few notes:
- the delete/screen/unscreen buttons only show up if you're allowed to perform these actions.
- the select checkbox only shows up if you are the "owner" of the page
- the IP address only shows up if it exists and you are the "owner" of the page

If you don't specifically like the layout that I've come up with, then you can use this code to have a starting point to play with. Happy Coding!

Mike


Preview of header when wide:


Preview of header when thin:


Function Code:
# Override the printing of a comment so that we can customise the way the header prints
function EntryPage::print_comment(Comment comment) {

      # define variables used for text layout.
      # If you want to change anything about the text in the layout, change what's in red.
      var string comment_prefix = "Comment by ";  # how to start the title of the component box containing a single comment
      var string thread_prefix = "Thread started by ";  # how to start the title of the component box containing a thread of comments
      var string anonymous_title = "Anonymous";  # what do display in place of a name on the component title when it's an anonymous post
      var string anonymous_header = "<i>(Anonymous)</i>";  # what do display in place of a username in the comment header when it's an anonymous post
      var string ip_open_bracket = "[";  # opening bracket for around the IP address, placed after the username
      var string ip_close_bracket = "]";  # closing bracket for around the IP address
      var string link_open_bracket = "(";  # opening bracket for around the reply/parent/thread links
      var string link_close_bracket = ")";  # closing bracket for around the reply/parent/thread links
      var string link_seperator = "&nbsp;";  # space for between the reply/parent/thread links
      var string from = "$*text_comment_from";  # set from the core property, currently "From:"
      var string date = "$*text_comment_date";  # set from the core property, currently "Date:"
      var string select = "$*text_multiform_check";  # set from the core property, currently "Select:"
      var string ipaddr = "$*text_comment_ipaddr";  # set from the core property, currently "IP address:"
      var string parent = "$*text_comment_parent";  # set from the core property, currently "Parent"
      var string reply = "$*text_comment_reply";  # set from the core property, currently "Reply"
      var string thread = "$*text_comment_thread";  # set from the core property, currently "Thread"
      var string header_bgcolor = ($comment.screened?"$*comments_screened_bgcolor":"$*comments_bgcolor");  # background color for the header section based on screened status

      # place the anchor for the parent/thread links
      """ <a name="$comment.anchor"></a> """;
 
      # if we are at a first level comment (ie. directly to an entry), we want to start the component box with the title.
      if ($comment.depth==1) {
        print_entry_header((size $comment.replies >0?$thread_prefix:$comment_prefix)+(defined $comment.poster?$comment.poster.name:$anonymous_title));
        print_comment_top();
      }

      # start the box which contains the comment information. This takes care of the indentation.
      print_comment_content_top($comment);

        # start the header section
        """
        <div style="background-color: $header_bgcolor; color: $*entry_fgcolor; margin-top: 4px;">
	<table cellpadding="2" cellspacing="0" summary="0" width="100%" bgcolor="$header_bgcolor">""";
                
                # start the first row of the header
                """
                <tr valign="top">""";
                      # place the userpic, which spans the 3 rows.
                      if (defined $comment.userpic) { """ <td rowspan="3" align="center">$comment.userpic</td> """; }
                      # after the userpic place the user who posted the comment
                      """<td align="left" width="100%" style="white-space: nowrap"><strong>$from</strong>""";
                      if (defined $comment.poster) { """$comment.poster"""; } else { """ $anonymous_header"""; }
                      if (viewer_is_owner() and $comment.metadata{"poster_ip"}!="") { """&nbsp;$ip_open_bracket$ipaddr$comment.metadata{"poster_ip"}$ip_close_bracket"""; }
                      """</td>""";
                      # after the poster, place the linkbar (delete button, screen/unscreen buttons)
                      """
                      <td align="right" style="white-space: nowrap">"""; $comment->print_linkbar(); """</td>""";
                      # after the linkbar place the permanent link to the comment.
                      """
                      <td align="right"><strong>$link_open_bracket<a href="$comment.permalink_url">$*text_permalink</a>$link_close_bracket</strong></td>""";
 
                # start the second row
                """
                </tr><tr valign="top">""";
                      # first place the date, spanning two columns (under the username and linkbar)
                      """
                      <td colspan="2" align="left" style="white-space: nowrap"><strong>$date</strong> """; print $comment.time->date_format("long")+" - "+$comment.time->time_format(); """</td>
                      """;
                      # if the viewer is the owner of the page, place the select box for the multi action selector (delete/screen/unscreen)
                      if (viewer_is_owner()) { """<td align="right" style="white-space: nowrap"><label for="ljcomsel_$comment.talkid">$select</label>"""; $comment->print_multiform_check(); """</td>""";}
                
                # start the third row
                """
                </tr><tr valign="top">""";
                      # place the subject line spanning all columns, with the subject icon before the actual subject
                      """
                      <td colspan="3"><div class="subject">&nbsp;""";
                      if (defined $comment.subject_icon) {"""$comment.subject_icon """;}
                      if ($comment.subject!="") {"""$comment.subject""";}
                      """</div></td>
                </tr>""";
                      
        # end the header section
        """
        </table>
        </div>""";

        # place the text 
        """
        <div style="margin-left: 5px">$comment.text</div>""";

        # place the Reply / Parent / Thread links 
        """
        <div class="small">$link_open_bracket<a href="$comment.reply_url">$reply</a>$link_close_bracket""";
        if ($comment.parent_url!="") {"""$link_seperator$link_open_bracket<a href="$comment.parent_url">$parent</a>$link_close_bracket""";}
        if ($comment.thread_url!="") {"""$link_seperator$link_open_bracket<a href="$comment.thread_url">$thread</a>$link_close_bracket""";}
        """</div>""";

      # end the box containg the comment information
      print_comment_content_bottom();
}   
Tags: admin: deprecated, user: masterslacker
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 32 comments