Lemminator
Well-known member
I have The Same in my Test Forum.
I have The Same in my Test Forum.
That change just the position to Tooltip.My mistake, change the -10 to -22.
<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-10" data-offsetY="-8"></span>
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-7" data-offsetY="-8"></span>
<xen:else />
<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-7" data-offsetY="-8"></span>
</xen:if>
.messageUserBlock div.avatarHolder .onlineMarker
{
display: inline-block;
width: 16px;
height: 16px;
/* margin: 9px 0 0 9px; <- if you'd like it on top left */
margin: 79px 0 0 79px;
background: #fff;
border: none!important;
border-radius: 50%!important
}
.messageUserBlock div.avatarHolder .onlineMarker:before
{
content: '';
position: absolute;
width: 10px;
height: 10px;
margin: 3px 0 0 3px;
background: #7fb900;
border-color: #7fb900;
border-radius: 50%
}
.messageUserBlock div.avatarHolder .onlineMarker:after
{
content: '';
position: absolute;
width: 32px;
height: 32px;
margin: -9px 0 0 -9px;
border: 1px solid #7fb900;
border-radius: 50%;
box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
-webkit-transform: scale(0);
-webkit-animation: online 2.5s ease-in-out infinite;
animation: online 2.5s ease-in-out infinite
}
@-webkit-keyframes online
{
0% {opacity: 1;-webkit-transform: scale(0)}
50% {opacity: .7}
100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes online
{
0% {opacity: 1;transform: scale(0)}
50% {opacity: .7}
100% {opacity: 0;transform: scale(1)}
}
.messageUserBlock div.avatarHolder .offlineMarker
{
position: absolute;
top: 9px;
left: 9px;
width: 16px;
height: 16px;
margin: 79px 0 0 79px;
background: #fff;
border: none!important;
border-radius: 50%!important
}
.messageUserBlock div.avatarHolder .offlineMarker:before
{
content: '';
position: absolute;
width: 10px;
height: 10px;
margin: 3px 0 0 3px;
background: #E71423;
border-color: #E71423;
border-radius: 50%
}
.messageUserBlock div.avatarHolder .offlineMarker:after
{
content: '';
position: absolute;
width: 32px;
height: 32px;
margin: -9px 0 0 -9px;
border: 1px solid #E71423;
border-radius: 50%;
box-shadow: 0 0 4px #E71423, inset 0 0 4px #E71423;
-webkit-transform: scale(0);
-webkit-animation: online 2.5s ease-in-out infinite;
animation: online 2.5s ease-in-out infinite
}
.xengallery_album_view .offlineMarker, .xengallery_media_view .offlineMarker, .quickReply .offlineMarker {
display: none;
}
+10000 Would be great some tutorial of this with Xenforo.I usually avoid using FontAwesome and build a custom icon font with Fontello instead. That way one can take advantage of a .woff with a smaller size and no unnecessary icons that they'd never use.
Hey, hate to bump this, but quick question -- how would I make this show in the upper left corner? I'm using "square" user avatars, and having it in the corner would look a lot better.
Just in case anyone else needs this info, just add the code below to your Extra.CSS.
@media (max-width:@maxResponsiveNarrowWidth)
{ .messageUserBlock div.avatarHolder .onlineMarker { display: none; }}
We use essential cookies to make this site work, and optional cookies to enhance your experience.