Relocating the User-Pic/Adding a Margin under the User-Pic

[av8rmike]

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

"""

""";

if (defined $en) {
if (defined $en.security_icon) {
"""$en.security_icon """;
}
}

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);
}

""" $subject""";
"
";

"""

• $datetime

""";

# 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 + "
") : "";
if ($showuserpic) {
if ($bgcolor) {
"""
$userpic""";
} else {
"""
$userpic""";
}
}

var string posted = "";
if ($p.view == "friends") {
if (not $e.poster->equals($e.journal)) {
$posted = $posted + colored_ljuser($e.poster, $bgcolor, $fgcolor) + "
";
}
$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 "";
}

"""

""";
$e->print_text();
"\n";
if (defined $en) {
$en->print_metadata();
}
"\n";
$p->print_reply_container({"target" => "entrycomment", "class" => "quickreply"});
$e->print_linkbar();

"""
\n\n\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\"";
}

"""

""";

# 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 + "
") : "";
if ($showuserpic) {
if ($bgcolor) {
"""
$userpic""";
} else {
"""
$userpic""";
}
}

var string posted = "";
if ($p.view == "friends") {
if (not $e.poster->equals($e.journal)) {
$posted = $posted + colored_ljuser($e.poster, $bgcolor, $fgcolor) + "
";
}
$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 "";
}

"""

""";

if (defined $en) {
if (defined $en.security_icon) {
"""$en.security_icon """;
}
}

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);
}

""" $subject""";
"
";

"""

• $datetime

""";

$e->print_text();
"\n";
if (defined $en) {
$en->print_metadata();
}
"\n";
$p->print_reply_container({"target" => "entrycomment", "class" => "quickreply"});
$e->print_linkbar();

"""
\n\n\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".