Mister Baltimore (av8rmike) wrote in s2expressive,
Mister Baltimore
av8rmike
s2expressive

HOWTO: Changing the Entry Linkbar to a Button Toolbar

As requested here by harmoniatrix, this code will change the linkbars on entries to something like the "3 Column" style. You will have to find/make your own button images; however, LiveJournal does have a few default images that will be used if you don't supply your own. The default image size is 22px wide by 20px tall, but any size button could be used, conceivably.

To use, copy the three functions into your theme layer. (There is already lots of information in the FAQs and this community on making a layer.) Once you have uploaded your button images to ScrapBook, Photobucket, or wherever, replace the red text with your own URLs.

function Entry::print_linkbar() {
# Replaces the linkbar on entries with button toolbar.
    var Link link;
    var string url = "";
    var string img_url = "";
    var string text = "";

    print """<div class="asset-meta">\n""";
    print """<ul class="asset-meta-list">\n""";

    $.comments->print();

    var string{} link_caption = {
        "edit_entry" => $*text_edit_entry,
        "edit_tags" => $*text_edit_tags,
        "mem_add" => $*text_mem_add,
        "tell_friend" => $*text_share_this,
        "flag" => $*text_flag,
        "watch_comments" => $*text_watch_comments,
        "unwatch_comments" => $*text_unwatch_comments,
    };

    var string{} link_images = { # Add URLs to your button images.
        "permalink" => "http://myimgURL",
        "edit_entry" => "http://myimgURL",
        "edit_tags" => "http://myimgURL",
        "mem_add" => "http://myimgURL",
        "tell_friend" => "http://myimgURL",
        "watch_comments" => "http://myimgURL",
        "unwatch_comments" => "http://myimgURL",
    };

    foreach var string link_key ($.link_keyseq) {
        $link = $this->get_link($link_key);
        if (defined $link) {
            $url = $link.url;
            $text = $link_caption{$link_key} != "" ? $link_caption{$link_key} : $link.caption;
            $img_url = $link_images{$link_key} != "" ? $link_images{$link_key} : $link.icon.url;
            print safe """<li class="asset-meta-comments item asset-meta-no-comments"><a href="$url"><img src="$img_url" title="$text" /></a></li>""";
            $link->print_raw();
        }
    }
    print """<li class="asset-meta-comments item asset-meta-no-comments"><a href="$.permalink_url"><img src="$link_images{"permalink"}" title="$*text_permalink" /></a></li>""";
    println "\n</ul>\n</div>\n";
}

function CommentInfo::print_readlink {
# Replaces the "# comments" link with an image, the same one used for the perma-link.
    var Page p = get_page();
    var string show_screened = "";
    if ($.screened) {
        $show_screened = " <b>$*text_month_screened_comments</b>";
    }
    print safe "<a href=\"$.read_url\">"+
        get_plural_phrase($.count, $p.view == "friends" ?
                          "text_read_comments_friends" : "text_read_comments")+
    """<img src="http://permalink imgURL" title="$*text_read_comments" />"""+
                          "$show_screened</a>";
}

function CommentInfo::print_postlink() {
# Replaces the "Leave a comment" link with an image.
    var Page p = get_page();
    print safe """<a href="$.post_url"><img src="http://leave comment imgURL" border="0" title="$*text_post_comment" /></a>""";
}
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.
Tags: !tutorial, advanced, entries:linkbar, how to:instructions, s2:theme layer
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 17 comments