Support Avatar edition

thao

thao

Registered
Hi guys, I would like to have larger avatars on my forum; currently, they appear small. Does anyone have any ideas on where I can edit this setting, or perhaps recommend a mod that can be downloaded from the mods section?

avatar.png

---

I would also like the avatar border to appear green or red, depending on whether the user is active or inactive, just like it is here on this forum.

Captura de pantalla 2024-04-03 a las 21.35.52.png

---

And the last thing, I am seeking a mod that would allow me to display additional information below the username avatar, such as the date joined, message count, location, and a colored badge indicating the user's role such as admin, moderator, or regular user, similar to what is done here.

Captura de pantalla 2024-04-03 a las 21.37.41.png

Thank you!
 
Sort by date Sort by votes
wikislo

wikislo

Registered
Code: 
.message-userExtras .pairs.pairs--justified {
border: 1px #cbcbcb solid;
border-left-color: #239f92;
border-left-width: 3px;
margin-bottom: 2px;
padding: 2px 5px;
background: linear-gradient(to top, #fafafb, #e8e9ea) !important;
box-shadow: 0 1px 3px rgba(225, 222, 222, 0.3), inset 0 1px 1px rgba(211, 203, 203, 0.2);
}

All you have to do for this is to save the following codes in the extra.less template

this code horizontal

Code: 
.message-avatar {
    float: left
}

@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }
}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    background: azure;
    margin-right: -10px
}

.message-userArrow {
    top: 0px !important;
    right: 0px !important;
    border: 0px solid transparent !important
}

.message-userArrow:after {
    border: 0px solid transparent !important
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: left !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    border: 1px solid rgba(11,76,91,0.2);
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: 50%;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}

this code search this...

message_macros

Code: 
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
Find and replace with the bottom.

Code: 
<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>                 
                </xf:if>
In extra.less, add the following code.

Code: 
.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0px 0px 10px 3px rgba(178, 34, 34, 0.38);   

}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    }
.xgt-avatar-border{
      border-width: 2px;
    }
}

.xgt-avatar2{
    display: block;
    background: linear-gradient(to right, green, yellow);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);

}

.xgt-avatar-border2{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar2{
    padding: 2px;
    }
.xgt-avatar-border2{
      border-width: 2px;
    }
}

-------------------MORE--------------------------------
Code: 
.message-userExtras {
display: flex;
flex-wrap: wrap;

& .pairs.pairs--justified {
margin: 2px auto;
padding: 2px;
display: grid;
text-align: center;
width: 31%;
border: 1px solid @xf-borderColor;
border-radius: 2px;
background: @xf-contentBg;
&:first-child {
min-width: 100%;
}

&> dt {
font-size: 0;
margin-right: 0;
}

&> dd {
text-align: center;
}
& dt:before {
.m-faBase();
font-size: 13px;
}
&:nth-child(1) dt {
.m-faBefore(@fa-var-calendar-alt);
}
&:nth-child(2) dt {
.m-faBefore(@fa-var-comments-alt);
}
&:nth-child(3) dt {
.m-faBefore(@fa-var-heart);
}
&:nth-child(4) dt {
.m-faBefore(@fa-var-trophy);
}
}
}

extra.less

Code: 
.message-userExtras {
display: flex;

& .pairs.pairs--justified {
margin: 2px;
padding: 2px;
display: grid;
text-align: center;
width: 100% / 3;
border: 1px solid @xf-borderColor;
border-radius: 2px;
background: @xf-contentBg;

&> dt {
font-size: 0;
margin-right: 0;
}

&> dd {
text-align: center;
}
& dt:before {
.m-faBase();
font-size: 13px;
}
&:nth-child(1) dt {
.m-faBefore(@fa-var-comments-alt);
}
&:nth-child(2) dt {
.m-faBefore(@fa-var-heart);
}
&:nth-child(3) dt {
.m-faBefore(@fa-var-trophy);
}
}

}

avatar effect and etc...​


Code: 
/*avatar animation*/
.message-avatar-wrapper .avatar:before,
.message-avatar-wrapper .avatar:after{
    border-color: #00c5de;
}
.message-avatar-wrapper a:before,
.message-avatar-wrapper a:after{
    content: "";
    display: block;
    position: absolute;
    background: transparent;
    top: 0; bottom: 0; left: 0; right: 0;
    border-radius: 5%; /*Do not touch this setting if you have an oval square or rectangle avatar. If you have an avatar, simply change the setting to "50%".*/
    transition: .3s all;
    border: 2px solid;
}
.message-avatar-wrapper a:hover:after{
   -webkit-transform: scale(1.5);
}
.message-avatar-wrapper a:hover:before{
    -webkit-transform: scale(2);
    transition: .3s all;
    opacity: 0;
}
/*avatar animation end*/
 

Attachments

  • Screenshot 2024-04-06 at 17-19-56 Ko su mahremi po islamu.png
    Screenshot 2024-04-06 at 17-19-56 Ko su mahremi po islamu.png
    127.5 KB · Views: 9
  • Screenshot 2024-04-06 at 17-26-47 Ko su mahremi po islamu.png
    Screenshot 2024-04-06 at 17-26-47 Ko su mahremi po islamu.png
    27.6 KB · Views: 9
  • 1590245084705.png
    1590245084705.png
    16.7 KB · Views: 9
Upvote 0 Downvote
thao

thao

Registered
wikislo said:
Code: 
.message-userExtras .pairs.pairs--justified {
border: 1px #cbcbcb solid;
border-left-color: #239f92;
border-left-width: 3px;
margin-bottom: 2px;
padding: 2px 5px;
background: linear-gradient(to top, #fafafb, #e8e9ea) !important;
box-shadow: 0 1px 3px rgba(225, 222, 222, 0.3), inset 0 1px 1px rgba(211, 203, 203, 0.2);
}

All you have to do for this is to save the following codes in the extra.less template

this code horizontal

Code: 
.message-avatar {
    float: left
}

@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }
}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    background: azure;
    margin-right: -10px
}

.message-userArrow {
    top: 0px !important;
    right: 0px !important;
    border: 0px solid transparent !important
}

.message-userArrow:after {
    border: 0px solid transparent !important
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: left !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    border: 1px solid rgba(11,76,91,0.2);
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: 50%;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}

this code search this...

message_macros

Code: 
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
Find and replace with the bottom.

Code: 
<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>                
                </xf:if>
In extra.less, add the following code.

Code: 
.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0px 0px 10px 3px rgba(178, 34, 34, 0.38);  

}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    }
.xgt-avatar-border{
      border-width: 2px;
    }
}

.xgt-avatar2{
    display: block;
    background: linear-gradient(to right, green, yellow);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);

}

.xgt-avatar-border2{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar2{
    padding: 2px;
    }
.xgt-avatar-border2{
      border-width: 2px;
    }
}

-------------------MORE--------------------------------
Code: 
.message-userExtras {
display: flex;
flex-wrap: wrap;

& .pairs.pairs--justified {
margin: 2px auto;
padding: 2px;
display: grid;
text-align: center;
width: 31%;
border: 1px solid @xf-borderColor;
border-radius: 2px;
background: @xf-contentBg;
&:first-child {
min-width: 100%;
}

&> dt {
font-size: 0;
margin-right: 0;
}

&> dd {
text-align: center;
}
& dt:before {
.m-faBase();
font-size: 13px;
}
&:nth-child(1) dt {
.m-faBefore(@fa-var-calendar-alt);
}
&:nth-child(2) dt {
.m-faBefore(@fa-var-comments-alt);
}
&:nth-child(3) dt {
.m-faBefore(@fa-var-heart);
}
&:nth-child(4) dt {
.m-faBefore(@fa-var-trophy);
}
}
}

extra.less

Code: 
.message-userExtras {
display: flex;

& .pairs.pairs--justified {
margin: 2px;
padding: 2px;
display: grid;
text-align: center;
width: 100% / 3;
border: 1px solid @xf-borderColor;
border-radius: 2px;
background: @xf-contentBg;

&> dt {
font-size: 0;
margin-right: 0;
}

&> dd {
text-align: center;
}
& dt:before {
.m-faBase();
font-size: 13px;
}
&:nth-child(1) dt {
.m-faBefore(@fa-var-comments-alt);
}
&:nth-child(2) dt {
.m-faBefore(@fa-var-heart);
}
&:nth-child(3) dt {
.m-faBefore(@fa-var-trophy);
}
}

}

avatar effect and etc...​


Code: 
/*avatar animation*/
.message-avatar-wrapper .avatar:before,
.message-avatar-wrapper .avatar:after{
    border-color: #00c5de;
}
.message-avatar-wrapper a:before,
.message-avatar-wrapper a:after{
    content: "";
    display: block;
    position: absolute;
    background: transparent;
    top: 0; bottom: 0; left: 0; right: 0;
    border-radius: 5%; /*Do not touch this setting if you have an oval square or rectangle avatar. If you have an avatar, simply change the setting to "50%".*/
    transition: .3s all;
    border: 2px solid;
}
.message-avatar-wrapper a:hover:after{
   -webkit-transform: scale(1.5);
}
.message-avatar-wrapper a:hover:before{
    -webkit-transform: scale(2);
    transition: .3s all;
    opacity: 0;
}
/*avatar animation end*/
Click to expand...
Thank you for your help mate!
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom