?

Log in

No account? Create an account

Previous Entry | Next Entry

UPDATE (2008/04/25): The print_comment() function in this post has been updated to allow the use of the "expand comments" link, which was previously unavailable in custom layers.

In response to this post by lollobrigida, these functions will add pop-ups or "tooltips" to entries and comments when hovering over user icons. Now more standards compliant! This behavior is the same as on entries displayed in the default site scheme, but can be customized.

This tutorial requires a Paid or Permanent account to create/edit theme layers. Follow the instructions in this post for creating a theme layer if you don't already have one, and copy in this code at step 6. This function displays the user's name in the pop-up on entries. For some reason, picture keywords are not accessible on entries, only on comments.

function print_entry(Page p, EntryLite e, Color bgcolor, Color fgcolor, bool hide_text) {
    var bool showposter = false;
    if (not $e.poster->equals($e.journal)) { $showposter = true; }

    var Comment c;
    var Entry en;
    if ($e isa Comment) {
        $c = $e as Comment;
    } else {
        $en = $e as Entry;
    }

    var string id = "";
    if (defined $c) {
        $id = " id=\"asset-$e.journal.username-$c.talkid\"";
    } else {
        $id = " id=\"asset-$e.journal.username-$en.itemid\"";
    }

    """
    <div$id class="post-asset asset">
      <div class="asset-inner">
        <div class="asset-header">
          <div class="asset-header-inner">
            <div class="asset-header-content">
              <div class="asset-header-content-inner">
                <h2 class="asset-name page-header2">""";

    if (defined $en) {
        if (defined $en.security_icon) {
            """<span class="lj-entry-securityicon">$en.security_icon</span> """;
        }
    }

    var string subject  = "";
    var string datetime = "";

    if ($e.subject != "") {
        $subject  = striphtml($e.subject);
        $datetime = lang_posted_by_date_and_time($e, $showposter, true, true);
    } else {
        $subject  = lang_posted_by_date_and_time($e, $showposter, true,  false);
        $datetime = lang_posted_by_date_and_time($e, $showposter, false, true);
    }

    """<a href="$e.permalink_url">$subject</a>""";
    "</h2>";

    """
          <div class="asset-meta">
            <ul class="asset-meta-list">
              <li class="item"><span><abbr class="datetime">$datetime</abbr></span></li>
            </ul>
          </div>
        </div></div></div>
        </div> <!-- end asset-header -->
        <div class="asset-content">
            <div class="asset-body">""";

    var bool showuserpic = $*opt_userpic_main;
    if ($p.view == "friends") {
        $showuserpic = $*opt_userpic_friends;
    }
    if ($p.view == "entry") {
        $showuserpic = $*opt_userpic_entrypage;
    }

    var string pic_url = """<img src="$e.userpic.url" alt="$e.poster.name" title="$e.poster.name" height="$e.userpic.height" width="$e.userpic.width" />""";
    var string userpic = ($showuserpic and defined $e.userpic) ? ($pic_url + "<br />") : "";
    if ($showuserpic) {
        if ($bgcolor) {
            """<div class="user-icon" style="border: 1px; padding: 2px; background-color: $bgcolor;">$userpic""";
        } else {
            """<div class="user-icon">$userpic""";
        }
    }

    var string posted = "";
    if ($p.view == "friends") {
        if (not $e.poster->equals($e.journal)) {
            $posted = $posted + colored_ljuser($e.poster, $bgcolor, $fgcolor) + "<br />";
        }
        $posted = $posted + colored_ljuser($e.journal, $bgcolor, $fgcolor);
    } else {
        if (not $e.poster->equals($e.journal)) {
            $posted = $posted + $e.poster;
        }
    }
    print "$posted";

    if ($showuserpic) {
        print "</div>";
    }

    $e->print_text();

    "</div>\n";
    if (defined $en) {
        $en->print_metadata();
    }

    "</div>\n";
    $p->print_reply_container({"target" => "entrycomment", "class" => "quickreply"});
    $e->print_linkbar();

    """<div class="asset-footer"></div>\n</div>\n</div>\n""";
    if ($*entry_footer != "") {
        println safe $*entry_footer;
    }
}


This function will show the user's name and the userpic keyword, as in the site scheme pages, in comments:
function EntryPage::print_comment(Comment e) {
    var string barc = "comment-" + ($e.depth % 2 ? "odd" : "even");
    var string screenbarc = "";
    var string borderwidth = "";
    if ($e.screened) {
        $screenbarc = "style=\"border-width: 3px; border-style: dashed\"";
    }
    var string indent = ($e.depth - 1) * 25 + "px";
    var string id     = $e.dom_id ? " id=\"$e.dom_id\"" : "";

    if (not $e.full) {
        # Collapsed mode

        """
        <a name='$e.anchor'></a>
        <div $id style="margin-left: $indent">
          <div class="collapsed-comment comment-inner">
            <div class="comment-meta">""";

        var string subject = $e.subject != "" ? $e.subject : """<i class="nosubject">$*text_nosubject</i>""";

        print safe """<a href="$e.permalink_url" class="collapsed-comment-link">$subject</a> <span class="separator">-</span> """;

        var string poster = (defined $e.poster ? ""+$e.poster : """<i class="noposter">$*text_poster_anonymous</i>""");
        print safe """$poster <span class="separator">-</span> """;
        print lang_posted_by_date_and_time($e, false, true, true);

        var Link expand_link = $e->get_link("expand_comments");
        if ($e.thread_url != "" and defined $expand_link) {
            print " "; $e->print_expand_link({ "class" => "collapsed-comment-link" });
        }

        """
            </div>
          </div>
        </div>\n""";

        if (size($e.replies) > 0) {
            foreach var Comment c ($e.replies) {
                $this->print_comment($c);
            }
        }

        return;
    }

    """<a name='$e.anchor'></a>
       <div $screenbarc $id style="margin-left: $indent">
       <div class="comment-inner $barc comment">
       <div class="comment-meta">""";

    if ($*opt_userpic_comments and defined $e.userpic) {
        var string pic_keyword = ($e.metadata{"picture_keyword"} != "") ? ": " + $e.metadata{"picture_keyword"} : "";
        var string name_keyword = $e.poster.name + $pic_keyword;
        var string pic_url = """<img src="$e.userpic.url" alt="$e.poster.name" title="$name_keyword" height="$e.userpic.height" width="$e.userpic.width" />""";
        """<div class="user-icon">$pic_url</div>""";
    }

    var string poster = defined $e.poster ? $e.poster->as_string() : "<i>$*text_poster_anonymous</i>";

    print safe """<span class="commenter-name">$poster """;
    if ($e.metadata{"poster_ip"} != "") {
        "(" + $e.metadata{"poster_ip"} + ") ";
    }
    """wrote:</span><br />""";
    var string datetime = lang_posted_by_date_and_time($e, true, true, true);
    """<div class="comment-date"><abbr class="datetime">$datetime</abbr></div>""";

    if (defined $e.subject_icon) {
        """<div class="comment-subject-icon">$e.subject_icon</div>""";
    }

    if ($e.subject != "") {
        """<div class="comment-subject">$e.subject</div>""";
    }

    """<div class="comment-body">""";
    $e->print_text();
    """</div>

    <div class="comment-links">""";
    var string sep = """<span class="separator">|</span>""";
    """<a class="permalink" href="$e.permalink_url">$*text_permalink</a>""";

    if ($e.frozen) {
        print safe " $sep $*text_comment_frozen";
    } else {
        " $sep "; $e->print_reply_link({"linktext" => $*text_comment_reply});
    }

    if ($e.parent_url) { print """ $sep <a href="$e.parent_url">$*text_comment_parent</a>"""; }
    if ($e.thread_url) {
        print """ $sep <a href="$e.thread_url">$*text_comment_thread</a>""";
        var Link expand_link = $e->get_link("expand_comments");
        if (defined $expand_link) {
            " $sep " + $e->print_expand_link();
        }
    }

    $e->print_linkbar();

    if ($this.multiform_on) {
        println safe """ <label for="ljcomsel_$e.talkid">$*text_multiform_check</label>""";
        $e->print_multiform_check();
    }

    "</div>\n</div>\n</div>\n</div>\n";
    if (not $e.frozen) {
        $e->print_reply_container({"class" => "quickreply"});
    }

    if (size($e.replies) > 0) {
        foreach var Comment c ($e.replies) {
            $this->print_comment($c);
        }
    }
}
Don't forget to set your theme layer to be the active one from the Choose Journal Style page by clicking on "Your Custom Layers" in the left sidebar, then selecting "Apply Theme" under the appropriate layer.

Comments

lollobrigida
Dec. 20th, 2007 05:49 pm (UTC)
Re: Hmmmm....
Haa! What? You mean I can't just keep cut/pasting stuff in there and wait for it to explode on me?

I went ahead and put the new code in, in comments it doesn't show me the name of the user, it goes : keywordtextgoeshere, with the colon like it knows the name goes in front but it just doesn't know to put that into the hover, because it's in the alt text.

Here is my theme layer - [theme] taggs [#9829998]
style thingie is here - http://onlysayinghello.livejournal.com/?s2id=19496180

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars