?

Log in

No account? Create an account

Previous Entry | Next Entry

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.

Comments

( 17 comments — Leave a comment )
harmonatrix
Jun. 30th, 2007 05:24 pm (UTC)
It worked!!! Thank you...I will edit my entry as resolved and link it to this. Thank you so much. :)
sally_maria
Jul. 1st, 2007 09:05 pm (UTC)
This is great - very easy to follow, as usual.

I'd prefer to have text for the comment links and graphics for the others. I managed to get that to work by only using the first section, but it does look slightly odd with the text and then the graphics.

Is it possible to change the code to right align the graphics, so I can have the comment links on the left and all the others on the right?

Thank you very much.
av8rmike
Jul. 2nd, 2007 02:04 am (UTC)
Right now, the linkbar is printed as a single <UL>, with the CSS controlling the display style. To do what you describe, you'd have to split them into two separate lists. I tinkered around with it for a little bit, but ran into problems because the CSS wants to make the bar span the whole width of the entry. Unfortunately, I'm going away for most of the week and couldn't spend a lot of time right now on it. =(
sally_maria
Jul. 2nd, 2007 05:44 pm (UTC)
Thank you for taking the time to look at it, anyway. If it's going to make a lot of work for you, then I'll just try and make up my mind whether I really want all graphics or not.

I hope you have a productive/enjoyable time away.
(Deleted comment)
av8rmike
Apr. 11th, 2008 06:33 pm (UTC)
Just before the CommentInfo::print_readlink() function, add these lines:
set text_read_comments = "#";
set text_read_comments_friends = "#";
sleepingchild
Apr. 25th, 2008 04:00 am (UTC)
Ressurrecting an old post, but I have the code working - it's linking to images, but there is a border link around them! I can't seem to get it removed, do you know what I should add?
av8rmike
Apr. 25th, 2008 07:23 pm (UTC)
Which journal?
sleepingchild
Apr. 25th, 2008 07:35 pm (UTC)
This one, sleepingchild. I took down the code because I couldn't get rid of the border, but I used the exact code above.
av8rmike
Apr. 25th, 2008 07:53 pm (UTC)
The default stylesheets remove borders on images, but you're using a customized sheet. You'll need to put the code back in so I can see what needs to be changed.
sleepingchild
Apr. 25th, 2008 07:57 pm (UTC)
Sorry! I put it back in now T_T
av8rmike
Apr. 25th, 2008 08:06 pm (UTC)
No problem. These two lines in the stylesheet are adding borders to linked images in your posts:
.asset a img {border: 1px solid #9FCC02;}
.asset a:hover img {border: 1px solid #F56903;}

but they're affecting the linkbar too. Add these lines after them:

.asset-meta-list a img,
.asset-meta-list a:hover img {border: 0;}


Also, your header seems to be floating above the page when you scroll down. Was that intentional?
sleepingchild
Apr. 25th, 2008 08:13 pm (UTC)
Ahh, I see now. I added that code but nothing happens. =(

and yeah, it's supposed to be floating i guess XD I didn't think I liked it at first but I've grown attached to it now. hehe
av8rmike
Apr. 25th, 2008 08:20 pm (UTC)
I'm not finding the code in the stylesheet. Make sure you added it to the right layer, maybe?
sleepingchild
Apr. 25th, 2008 08:28 pm (UTC)
should be there, right in the section labeled
/* ----------------------------- */
/* ---------- ENTRIES ---------- */
/* ----------------------------- */

right? T_T
av8rmike
Apr. 25th, 2008 08:41 pm (UTC)
You left off the comma after the first "img".
sleepingchild
Apr. 25th, 2008 08:45 pm (UTC)
Yay, got it!

Sorry about all the trouble - I messed up my code too in the process but I can straighten it up from here. Thank you so much!! =D
av8rmike
Apr. 25th, 2008 08:48 pm (UTC)
You're welcome. Glad we got it straightened out.
( 17 comments — Leave a comment )

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