?

Log in

No account? Create an account

Previous Entry | Next Entry

It's a two-for-one post this Friday! The question has come up in the past about adding a margin or "gutter" under the userpic in entries (like it is in comments). Unfortunately for those with Basic/Plus accounts, this change requires modifying the print_entry() function a little.

Vertical Margin under User Icon

First, add the following CSS to the "Custom CSS" box on the Customize Journal area, to your external stylesheet, or theme layer, wherever appropriate and depending on your browser. Use this line for Firefox, Internet Explorer 7 (or Safari, I assume, although I'm told it doesn't work in Opera):
.asset-body {margin-left: 106px;}
Use this line, in addition, for Internet Explorer 6:
.lj-currents, .asset-tags {clear: left;}

Then add this code to your theme layer:
function print_entry(Page p, EntryLite e, Color bgcolor, Color fgcolor, bool hide_text) {
# Adds a "gutter" under the user-pic.
    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">""";

# Print the user-pic outside of .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 userpic = ($showuserpic and defined $e.userpic) ? ($e.userpic + "<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>";
    }

    """
            <div class="asset-body">""";
    $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;
    }
}


(In response to this entry, asking how to move the user icon to the entry title bar.) This kind of change also requires a Paid or Permanent account.

User Icon in the Entry Title Bar

As before, add the following CSS to the Custom CSS box. The first line moves the icon to the right side of the entry box, if desired. You may want to experiment with the width number in blue, depending on the lengths of your entry titles.

.asset-header .user-icon {float: right;}
.asset-header {height: 1%}
.asset-header-content {width: 500px;}


Add this code to your theme layer:
function print_entry(Page p, EntryLite e, Color bgcolor, Color fgcolor, bool hide_text) {
# Moves the user-pic next to entry header
    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">""";

# Print the user-pic inside of .asset-header but before .asset-header-content
    var bool showuserpic = $*opt_userpic_main;
    if ($p.view == "friends") { 
        $showuserpic = $*opt_userpic_friends;
    }
    if ($p.view == "entry") {
        $showuserpic = $*opt_userpic_entrypage;
    }

    var string userpic = ($showuserpic and defined $e.userpic) ? ($e.userpic + "<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>";
    }

"""
            <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">""";

    $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;
    }
}
I've checked this code in Firefox and IE7, where it works as expected, although the height: 1% line in the CSS might not be required. It seems to only be needed for IE6.
Don't forget to make your theme layer the active one from the Choose Journal Style page by clicking on "Your Custom Layers", then "Apply Theme".

Comments

av8rmike
Jun. 26th, 2007 03:12 pm (UTC)
No, this tutorial was for people who wanted to keep the text from flowing under the icon in entries. Check the linked posts to see what was asked.
jense
Jun. 26th, 2007 03:15 pm (UTC)
I am terribly sorry. I must be sounding so stupid. I really thought it was something that would make your userpic be in its own column if you would speak in table terms. With all of the text in another column but the same row.

Is there any possibility that I might achieve what I meant?
av8rmike
Jun. 26th, 2007 03:34 pm (UTC)
Um... that is what it does. It puts a big white space underneath the user icon, all the way down to the metadata, and pushes the entry text to the left. "Two columns", in essence. Your LOST entry looked like that when I first viewed it, you must have changed it back to the default at some point.
jense
Jun. 26th, 2007 04:32 pm (UTC)
LOL. Sorry. I did delete it, but I put it back after your reply. I can't see the "Two columns". Do you view it with IE? I use Firefox 2.0.0.4. And everything just runs on beneath my userpic.
av8rmike
Jun. 26th, 2007 04:47 pm (UTC)
The code looks correct in your theme layer (#8736200), and I see the two columns correctly, along with all your updated CSS. I am using IE6 at the moment, but the code shouldn't be browser dependent. Try to force refresh of the page after updating layer code.
jense
Jun. 26th, 2007 05:25 pm (UTC)
It must after all be browser specific. I tried loading it in IE6 and it worked just like you said. On FF however, still doesn't. Anyone else having the same issue?
av8rmike
Jun. 26th, 2007 11:47 pm (UTC)
I posted a fix for FF vs. IE. Apparently it's one of those "happy bugs" in IE. I'm not sure what people who use Safari or Opera will use.
jense
Jun. 27th, 2007 08:04 am (UTC)
Just wanted to let you know that the tweak made it work perfect in Firefox. Thanks!

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