Points
5,569
Solutions
0
Add the following code to your extra.less:
CSS:
.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
