Add Avatar to Visitor Tab

Add Avatar to Visitor Tab

Steve F

Well-known member
Qwk86gn submitted a new resource:

Add Avatar to Visitor Tab (version 1.0) - Adds a users avatar to the account visitors tab.

Here is a simple template mod that adds a users avatar to the visitor tab by their name.



In template navigation_visitor_tab

Find:
Code:
<a href="{xen:link account}" class="navLink accountPopup" rel="Menu"><strong>{$visitor.username}</strong></a>
Replace with:
Code:
<a href="{xen:link account}" class="navLink accountPopup" rel="Menu"><img src="{xen:helper avatar, $visitor, s}" class="miniMe" alt="" /><strong>{$visitor.username}</strong></a>
Add this to the...
Read more about this resource...
 

Tize

Active member
Hi, do you know if you can add update for the new version of xF?
Why does not work now.
Thank you.
 

Tize

Active member
Hello Steve, I have a little problem, I have reported some users.
Some tell me that the name does not display completely right next to the avatar.
And in my case Firefox does not see the name and I guess that is the same.
If you can help would be great please.
Thank you very much.

a.png
 

Steve F

Well-known member
It looks like you haven't applied the edit correctly. A link to your site would help debug it.
 

Tize

Active member
Hi, thanks for your answer.
Do not quite understand your answer, sorry.
Want to know my site? or something else?
Thank you.
 

Russ

Well-known member
Hi, thanks for your answer.
Do not quite understand your answer, sorry.
Want to know my site? or something else?
Thank you.
From your screenshot it appears you've copied the correct text but instead of pasting it before the username, you replaced it with it.
 

Tize

Active member
What I have in this way mate, thanks for your help.

HTML:
<!-- account -->
    <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">

        <xen:set var="$visitorHiddenUnread" value="{xen:calc '{$visitor.alerts_unread} + {$visitor.conversations_unread}'}" />
        <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><img src="{xen:helper avatar, $visitor, s}" class="miniMe" alt="{$visitor_username}" /><strong class="accountUsername">{$visitor.username}</strong>
            <strong class="itemCount ResponsiveOnly {xen:if $visitorHiddenUnread, '', 'Zero'}"
                id="VisitorExtraMenu_Counter">
                <span class="Total">{xen:number $visitorHiddenUnread}</span>
                <span class="arrow"></span>
            </strong>
        </a>
PHP:
<!-- account -->
    <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">

        <xen:set var="$visitorHiddenUnread" value="{xen:calc '{$visitor.alerts_unread} + {$visitor.conversations_unread}'}" />
        <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><img src="{xen:helper avatar, $visitor, s}" class="miniMe" alt="{$visitor_username}" /><strong class="accountUsername">{$visitor.username}</strong>
            <strong class="itemCount ResponsiveOnly {xen:if $visitorHiddenUnread, '', 'Zero'}"
                id="VisitorExtraMenu_Counter">
                <span class="Total">{xen:number $visitorHiddenUnread}</span>
                <span class="arrow"></span>
            </strong>
        </a>
 

Tize

Active member
If friend, I have added what I have in this manner.

HTML:
.UserOffline, .UserOnlineInvisible
{
font-weight: bold;
font-size: 10px;
color: #56575A;
background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOnline
{
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: limegreen;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOnline span
{
background-color: limegreen;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
.UserOffline span, .UserOnlineInvisible span
{
background-color: @primaryLight;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}




.navTab .accountPopup img
{
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-top: 3px;
    border-radius: 2px;
}




.subForumList li .nodeTitle:before {
  background: url("@imagePath/xenforo/icons/subforum-read.png") no-repeat left center transparent;
  height: 10px;
  width: 10px;
  content: "";
  padding-left: 12px; }

.subForumList li .unread .nodeTitle:before {
  background: url("@imagePath/xenforo/icons/subforum-unread.png") no-repeat left center transparent;
  height: 10px;
  width: 10px;
  content: "";
  padding-left: 12px; }
PHP:
.UserOffline, .UserOnlineInvisible
{
font-weight: bold;
font-size: 10px;
color: #56575A;
background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOnline
{
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: limegreen;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOnline span
{
background-color: limegreen;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
.UserOffline span, .UserOnlineInvisible span
{
background-color: @primaryLight;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}




.navTab .accountPopup img
{
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-top: 3px;
    border-radius: 2px;
}




.subForumList li .nodeTitle:before {
  background: url("@imagePath/xenforo/icons/subforum-read.png") no-repeat left center transparent;
  height: 10px;
  width: 10px;
  content: "";
  padding-left: 12px; }

.subForumList li .unread .nodeTitle:before {
  background: url("@imagePath/xenforo/icons/subforum-unread.png") no-repeat left center transparent;
  height: 10px;
  width: 10px;
  content: "";
  padding-left: 12px; }
 
Top