Tutorial (sort of) to add userhead icons to the usernames displayed with the entry userpics

[london_fan]

Live "preview": Here for example
Account type: Paid

My apologies in advance if this isn't the right way to go about it, but I want to share a solution to a question I've seen asked several times, but never answered (as far as I'm aware). Well, I was looking for a tutorial to display the userhead icons with the user and community names below the entry userpics and found several unsolved requests over the last couple of months, so in the end I tweaked the source code myself. I hope it's okay to post my solution in a new entry instead of looking through all the older posts, because I haven't bookmarked those other entries concerning this issue.


STEP 1
You need to have created a theme layer before you can follow this tutorial.

STEP 2
Add the following function from the Flexible Squares source code page to your theme layer (please make sure that you copy and paste the whole function without missing anything):

function print_entry(Page p, Entry e, Color bgcolor, Color fgcolor)

If you already have this function in your theme layer, don't add it again! In this case continue with step 3!

STEP 3
Find the following section

# Poster

if ($p.view == "friends" or $p.view == "entry" or $p.view == "reply")
{
var UserLite linkto;
$linkto = $e.poster;
#print "$e.poster.username";
"""
base_url() + "\">";
"$linkto.username";
}
elseif ($p.journal_type == "C" and $p.view == "recent")
{
var UserLite linkto;
$linkto = $e.poster;
#print "$e.poster.username";
"""
base_url() + "\">";
"$linkto.username";
}
if (($p.view == "friends" or $p.view == "entry" or $p.view == "reply") and $e.poster.username != $e.journal.username)
{
var UserLite linkto;
$linkto = $e.journal;
"""
[ base_url() + "\">";
"$linkto.username]";
}
if ($p.view == "recent" and $p.journal_type == "C")
{
print "";
}
if ($p.view != "recent" and $p.view != "day")
{
print """""";
}
}

and replace it with

# Poster

if ($p.view == "friends" or $p.view == "entry" or $p.view == "reply")
{
var UserLite linkto;
$linkto = $e.poster;
#print "$e.poster.username";
"""

$e.journal""";
}
elseif ($p.journal_type == "C" and $p.view == "recent")
{
var UserLite linkto;
$linkto = $e.poster;
#print "$e.poster.username";
"""

$e.journal""";
}
if (($p.view == "friends" or $p.view == "entry" or $p.view == "reply") and $e.poster.username != $e.journal.username)
{
var UserLite linkto;
$linkto = $e.journal;
"""
$e.poster""";
}
if ($p.view == "recent" and $p.journal_type == "C")
{
print "";
}
if ($p.view != "recent" and $p.view != "day")
{
print """""";
}
}

Save and compile. Enjoy the user icon functionality, e.g. having a link back to the user's profile page or using the contextual popup menu!

STEP 4 (optional further customization)
If your newly added userhead icon is displayed with an unwanted background color, make sure to set the background to transparent in your CSS section. If you're using custom usericons, you probably have some CSS code looking similar to this already:

.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url(your-image-url.png) !important;
padding: 16px 16px 0px 0px !important;
}

Add the bold line for a transparent background:

.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url(your-image-url.png) !important;
background-color: transparent !important;
padding: 16px 16px 0px 0px !important;
}

Make sure to customize all your relevant code for the usericons, e.g.

.ljuser img[src*="userhead"],
.ljuser img[src*="community.gif"],
.ljuser img[src*="sponcomm.gif"],
.ljuser img[src*="syndicated.gif"],
.ljuser img[src*="newsinfo.gif"] and so on...

One more helpful tip: Depending on the size of your user icon you might want to adjust the line-height for .userpic, .userpicfriends by adding line-height: 1.7 !important; there. Tweak the value until it looks good.

Feel free to ask any questions concerning this code tweak, but please note that it's the first time I've used and customized a Flexible Squares layout, so I might not be able to answer all your questions.

P.S.: Dear mods, I've read not to use the !tutorial tag, so hopefully I tagged this correctly?