Welcome in Nav Bar

[♥ ℒʊ√ ♥]

Good almost afternoon, guys!


Is it possible to replace the member's name with a small version of their avatar in the Welcome ~ Login area? And if a guest to use the theme's default avatar?


Thank you!

[David Clark]

It should be possible, ♥ ℒʊ√ ♥, and I think I've seen it around, but I'm not sure if there's a template guide on it. Are there any forums you've seen it on?

[♥ ℒʊ√ ♥]

Sadly, David Clark, I haven't.

But as you can see from my forum ~ I have the Users online in one of the sidebars ~ and I can place the avatars there, as well ~ so I was hoping I could place it in the "Welcome" ~ just as some folks have replaced the names with the avatars in the stats area for "online". 

[David Clark]

No problem ♥ ℒʊ√ ♥ - $[current_user.avatar_small] produces the small version of the current user's avatar that you've seen elsewhere, so we can theoretically just place that in the welcome table.

Try going to Admin > Themes > Layout Templates > Forum Wrapper and try placing that variable somewhere in this code:

<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</p>

[♥ ℒʊ√ ♥]

David Clark, I placed it on line #55 within that code ~ but it's not working. It's on the default theme ~ Thanksgiving Gobble.

[♥ ℒʊ√ ♥]

David Clark???

[David Clark]

See this post for a JavaScript based solution for all themes, or this one for a per-theme CSS/layout template solution

[Alanna 🥀🖤]

Just popping in to say that I have only managed to get the avatar there neatly using absolute positioning and pushing the #welcome section over to make up for it. Attempting to "float" the avatar doesn't work too well.

[♥ ℒʊ√ ♥]

Thank you for the information, @khristian. Much appreciated.


David Clark, no worries. I understand prioritizing.

And that kinda worked.


I actually wanted the members name deleted ~ with the avatar replacing it.


I left the code on the default theme for you to see.

[David Clark]

From what I'm seeing that might be a little bit trickier, ♥ ℒʊ√ ♥, but just to make sure, you're saying you want it to say "Welcome" and then display the avatar and the logout link after that?

[♥ ℒʊ√ ♥]

Yes, David Clark ~ but it would also be ok to simply move the avatar  after the member's name if that's easier. 

i.e. ~ Welcome, Member;'s Name then Avatar then Login

And how difficult to add the theme's default avatar and do the same for Guest?

[David Clark]

EDIT: This post describes a solution for all themes. For a per-theme CSS/layout template solution, check this post.

Looks like the $[current_user.avatar_small] variable prints a div, which makes things kind of difficult for someone trying to accomplish what you are, ♥ ℒʊ√ ♥ assuming you want to do it on all themes. Not impossible, though.

First, we can set the welcome table back to what it was initially:

<p id="welcome">

{if !$[current_user.is_member]}
Welcome Guest. Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}

</p>

From there, we can add this script to Global Header:

<script>

$(document).ready(function() {
if (proboards.data('user').is_logged_in == 1) {

var avatarHTML = proboards.data('user').avatar

$('#welcome a').before(avatarHTML)
$('#welcome .avatar-wrapper img').unwrap().addClass("smallAvatarImg");

} else {

var guestAvatarSrcVariable = proboards.data('default_avatar')
$('#welcome a').last().after('<img class="smallAvatarImg" src='+guestAvatarSrcVariable+'>');
}
});

</script>
Now we have JUST the <img> element sandwiched between the welcome text and the logout link. It's going to be large, though, so we need to use CSS to shrink it down. The script also applies a class, though, so we can do that. Head to your style sheet and add this:

img.smallAvatarImg {
max-height: 50px;
max-width: 50px;
}

Which, finally, should achieve an easily manipulatable avatar image in the welcome header. I'll tag @khristian too just in case she was interested in a solution for this that doesn't involve absolutely-positioning the div that the $[current_user.avatar_small] produces.

[♥ ℒʊ√ ♥]

Thanks so much, David Clark. I am grateful. I didn't realize it would be as complicated as it was.

It's like my boyfriend always says when I come up with a remodeling idea ~ The ideas look easy in my head; it's the execution (by him) that's the difficult part.


Very much appreciated. Enjoy your Friday evening!

[David Clark]

I'll mention that this doesn't address any padding issues that will most likely exist, and we also need to make some small changes for guests too, but both of those issues are easily remedied after the brunt of the work I described above is done (that, and I'm just about out of the office for the day, so we'll have to pick it up tomorrow).

[Alanna 🥀🖤]

Thanks but no thanks David Clark. I have my own ways that work better. I only suggested absolute positioning since it's better than using float.