Xenforo Tutorial Xenforo Animated Online indicator after 2.3.4 upgrade

[Codes MagicCodes Magic is verified member.]

Add the following code to your extra.less:

.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 3px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    overflow: visible !important;
    clip: auto !important;
    border-radius: 50%;
}

.avatar.avatar--xxs.avatar--default.avatar--default--dynamic,
.avatar.avatar--xxs.avatar--default.avatar--default--text {
    border: 2px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

.avatar.avatar--l.avatar--default.avatar--default--dynamic,
.avatar.avatar--l.avatar--default.avatar--default--text {
    border: 12px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

.avatar.avatar--m.avatar--default.avatar--default--dynamic,
.avatar.avatar--m.avatar--default.avatar--default--text {
    border: 6px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

.avatar.avatar--o.js-avatar.js-avatarCropper.avatar--default.avatar--default--dynamic {
    border: 6px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

/* Adjust for responsive design */
@media (max-width: 768px) {
    .avatar {
        border-width: 4px !important;
    }
}

@media (min-width: 769px) {
    .avatar {
        border-width: 6px !important;
    }
}

/* Node SubNodes Flat Fix */
.node-subNodesFlat {
    display: block;
}

/* Message Avatar Wrapper Fix */
.message-avatar-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

.message-avatar-wrapper .message-avatar-online {
    position: absolute;
    top: -1px;
    left: 6px;
    bottom: -1px;
    right: -1px;
    box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;
    border: 2px solid transparent;
    border-top-color: rgb(70, 177, 37);
    border-left-color: rgb(70, 177, 37);
    border-bottom-color: rgb(70, 177, 37);
    border-right-color: rgb(70, 177, 37);
    border-radius: 50%;
    -webkit-transform: scale(1);
    -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(1); }
    50% { opacity: 0.5; }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@keyframes online {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; }
    100% { opacity: 1; transform: scale(1); }
}

.message-avatar-wrapper .message-avatar-online::before {
    display: none;
}

.message-avatar-wrapper .message-avatar-online {
    left: 6px !important;
    right: -1px !important;
}

I HOPE THIS WILL HELP
 Like Quote ReplyReport
HamsterDude
HamsterDude
Registered
Jan 5, 2025
Add bookmark
#3
I tried it added a couple of things it works fine for me did not test on mobile.
CSS:
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}

@media (max-width: 480px) {
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}
}
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 3px solid rgba(0,0,0,0.25);
    font-weight: 900;
   
}

.avatar.avatar--xxs.avatar--default.avatar--default--dynamic,
.avatar.avatar--xxs.avatar--default.avatar--default--text {
    border: 2px solid rgba(0,0,0,0.25);
    font-weight: 900;
   
}

.avatar.avatar--l.avatar--default.avatar--default--dynamic,
.avatar.avatar--l.avatar--default.avatar--default--text {
    border: 12px solid rgba(0,0,0,0.25);
    font-weight: 900;
   
}

.avatar.avatar--m.avatar--default.avatar--default--dynamic,
.avatar.avatar--m.avatar--default.avatar--default--text {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
   
}

.avatar.avatar--o.js-avatar.js-avatarCropper.avatar--default.avatar--default--dynamic {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
   
}

.node-subNodesFlat{
    display: block;
   
}


.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;

    .message-avatar-online
    {
        position: absolute;
        top: -1px;
        left: 6px;
        bottom: -1px;
        right: -1px;
        height: calc(3em  + 4px);
        box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;
        border: 2px solid transparent;
        border-top-color: rgb(70, 177, 37);
        border-left-color: rgb(70, 177, 37);
        border-bottom-color: rgb(70, 177, 37);
        border-right-color: rgb(70, 177, 37);
        border-radius: (50%);
    -webkit-transform: scale(1);
    -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(1)}
     50% {opacity: .9}
    100% {opacity: 1;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 9;transform: scale(1)}
     50% {opacity: .1}
    100% {opacity: 9;transform: scale(1)}
}
}

.message-avatar-wrapper .message-avatar-online::before {
  display: none;
   
}

.message-avatar-wrapper .message-avatar-online{
  left: 6px !important;
  right: -1px !important;
   
}
 Like Quote ReplyReport



Write your reply...

 Post reply
Attach files
 Share
 XenForo Tips & Guides
 US
RulesPrivacyHelpRSS