?

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

( 32 comments — Leave a comment )
jense
Jun. 26th, 2007 02:17 pm (UTC)
I tried the gutter out for my journal, but it doesn't seem to work.

Layer Theme.
av8rmike
Jun. 26th, 2007 02:39 pm (UTC)
From the public entries that I can see, it's working OK. The "gutter" isn't supposed to displace the metadata; maybe you were thinking it would?
jense
Jun. 26th, 2007 02:44 pm (UTC)
This entry doesn't seem to do what I think it should do. Which is, everything that is placed under my userpic (starting with 'I'm not sure if I like...') should normally be blank and the actual text should be moved more to the right, right?
[Please edit and title your post!] - av8rmike - Jun. 26th, 2007 03:12 pm (UTC) - Expand
[Please edit and title your post!] - jense - Jun. 26th, 2007 03:15 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 26th, 2007 03:34 pm (UTC) - Expand
[Please edit and title your post!] - jense - Jun. 26th, 2007 04:32 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 26th, 2007 04:47 pm (UTC) - Expand
[Please edit and title your post!] - jense - Jun. 26th, 2007 05:25 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 26th, 2007 11:47 pm (UTC) - Expand
[Please edit and title your post!] - jense - Jun. 27th, 2007 08:04 am (UTC) - Expand
joetron2030
Jun. 26th, 2007 03:05 pm (UTC)
I'm having a similar issue where it doesn't seem to be working.

However, I will say that I am very much new to doing more advanced customization. I wonder if I did something wrong? I find all of this rather confusing even after having read the available documentation.

I placed the ".lj-currents, .asset-tags {clear: left;}" in my Custom CSS box. Then I placed the included code into my theme layer (called "Layout") but it doesn't seem to change anything. Did I update the correct layer?
av8rmike
Jun. 26th, 2007 03:15 pm (UTC)
Did I update the correct layer?

Probably. Check the Look and Feel page to make sure your theme layer is the active one under "Themes", not the Manga one. I forget that step all the time.
joetron2030
Jun. 26th, 2007 05:21 pm (UTC)
Ah! That explains it. I've never really explored the options for that particular page. So, if I've got this right, I need to use a custom theme and layer to make this work. I can't just modify the layout layer and use the default theme. Correct?

I guess my last follow-up question is: How can I take all of the customizations I've done through the S2 "control panel" options and get that into a custom theme and layers? A link to the correct tutorial would be fine. I'm not expecting a hand-holding walk through here.

But, I do appreciate your reply. The "ah-ha!" light went off finally. :-)
[Please edit and title your post!] - joetron2030 - Jun. 26th, 2007 05:30 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 26th, 2007 05:54 pm (UTC) - Expand
onlysayinghello
Dec. 12th, 2007 12:32 am (UTC)
Do you realize like the almost anxiety I get when I know I have to ask you another question? I swear I think I'll find it on my own, and then I end up going... okay that did it that far.... but....

So I've successfully moved my user icon into the subject of the post section, and I even tracked down this post about putting a color behind the subject of the post, and even read through the 'strike-through' part of the code thinking adding that might put it across the whole post, but it sort of didn't.

I want the entire subject line, user icon section to have like a block of color underneath it. So that it looks like a header to the post with the color block behind it.

Right now I have this CSS in there

.page-header2,
.post-asset .asset-name a {
background-color: #e3e3e3;
}

Thank you in advance... again...
av8rmike
Dec. 12th, 2007 02:49 am (UTC)
You were pretty close, you just needed to go out a few layers of boxes:
.asset-header {
    background-color: #e3e3e3;
}
instead of .page-header2,
.post-asset .asset-name a
onlysayinghello
Dec. 12th, 2007 02:53 am (UTC)
Fantastic!!! Once again you are awesome and have helped me out!
onlysayinghello
Dec. 12th, 2007 03:02 am (UTC)
okay so you're getting this comment like four times now. sorry. All because strikethrough didn't want to work for me editing this comment.

Anyway, I figured out the padding placement for css, to keep my text from running into the icon... but if there was a way to have the alignment affect only the entry and not the comments would it be a simple thing? or a complicated thing?

Edited at 2007-12-12 03:37 am (UTC)
[Please edit and title your post!] - av8rmike - Dec. 12th, 2007 04:10 am (UTC) - Expand
[Please edit and title your post!] - onlysayinghello - Dec. 12th, 2007 04:17 am (UTC) - Expand
[Please edit and title your post!] - av8rmike - Dec. 12th, 2007 04:48 am (UTC) - Expand
squoctobird
Jan. 24th, 2009 10:54 pm (UTC)
I can't get the gutter to work correctly. When I put in the codes it moves the WHOLE entry over and not just the words, so the words are still under the icon. Or do I have to have a theme layer?? I went to the tutorial on making one and I couldn't get past the first step because it says to click on developer area which I could not locate.

Here is a preview of what the codes did: http://yellowxshades.livejournal.com/172943.html

I have a permanent account, if that makes any difference.
av8rmike
Jan. 25th, 2009 12:23 am (UTC)
Yes, this is both a theme layer and CSS change.
(Deleted comment)
av8rmike
Jul. 9th, 2009 03:19 pm (UTC)
It looks like you're still using the base theme, not your theme layer, as the active one.
(Deleted comment)
[Please edit and title your post!] - av8rmike - Jul. 9th, 2009 04:18 pm (UTC) - Expand
(Deleted comment)
[Please edit and title your post!] - av8rmike - Jul. 9th, 2009 04:42 pm (UTC) - Expand
(Deleted comment)
( 32 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