XF 2 Tip - Online/Offline avatar indicator like instagram

ENXF NET · 2021-03-17T06:32:18+00:00

ENXF NET submitted a new resource: Online/Offline avatar indicator like instagram - online, ofline message_macros in Find and replace with the bottom...

APPG

Active member

Registered

May 12, 2023

Unfortunately it does not work! :-/

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
Unfortunately it does not work! :-/

APPGIt works perfectly.
May I know which version of XF are you running?

↑View previous replies…

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
It works perfectly.
May I know which version of XF are you running?

Zer01neHi!

Hey, I'm using version 2.2.12

FireShot Capture 078 - APPGroup.®g.pl - Admin control panel - forum.appgroup.org.pl.png

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
Hi!

Hey, I'm using version 2.2.12

View attachment 35001

APPGIt works perfectly fine on this version too.
Make sure you’ve followed all the steps as described.

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
It works perfectly fine on this version too.
Make sure you’ve followed all the steps as described.

Zer01neIn message_macros I replaced with

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>

and I added to extra.less

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;
    }
}

unfortunately it doesn't work for me. :-/

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:

In message_macros I replaced with

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>

and I added to extra.less

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;
    }
}

unfortunately it doesn't work for me. :-/

APPGcheck which styles message_macros you are modifying.
I've tested it for you and It's working.
You may be doing something wrong.

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
check which styles message_macros you are modifying.
I've tested it for you and It's working.
You may be doing something wrong.

Zer01neIt's my message_macros:

Code:

<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName="">
   
    <xf:if is="{$user.Profile.custom_fields.postbit_cover}">
<div class="postbit_background" style="background-image: url({$user.Profile.custom_fields.postbit_cover});"></div>
</xf:if>

    <section itemscope itemtype="https://schema.org/Person" class="message-user">
        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>
        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
        </div>
        <xf:if is="$user.user_id">
            <xf:set var="$extras" value="{{ property('messageUserElements') }}" />
            <xf:if contentcheck="true">
                <div class="message-userExtras">
                <xf:contentcheck>
                    <xf:if is="$extras.register_date">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('joined') }}</dt>
                            <dd>{{ date($user.register_date) }}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.message_count">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('messages') }}</dt>
                            <dd>{$user.message_count|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.solutions AND $user.question_solution_count">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('solutions') }}</dt>
                            <dd>{$user.question_solution_count|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.reaction_score">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('reaction_score') }}</dt>
                            <dd>{$user.reaction_score|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('points') }}</dt>
                            <dd>{$user.trophy_points|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.age && $user.Profile.age">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('age') }}</dt>
                            <dd>{$user.Profile.age}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.location && $user.Profile.location">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('location') }}</dt>
                            <dd>
                                <xf:if is="$xf.options.geoLocationUrl">
                                    <a href="{{ link('misc/location-info', '', {'location': $user.Profile.location}) }}" rel="nofollow noreferrer" target="_blank" class="u-concealed">{$user.Profile.location}</a>
                                <xf:else />
                                    {$user.Profile.location}
                                </xf:if>
                            </dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.website && $user.Profile.website">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('website') }}</dt>
                            <dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.custom_fields">
                        <xf:macro template="custom_fields_macros" name="custom_fields_values"
                            arg-type="users"
                            arg-group="personal"
                            arg-set="{$user.Profile.custom_fields}"
                            arg-additionalFilters="{{ ['message'] }}"
                            arg-valueClass="pairs pairs--justified" />
                        <xf:if is="$user.canViewIdentities()">
                            <xf:macro template="custom_fields_macros" name="custom_fields_view"
                                arg-type="users"
                                arg-group="contact"
                                arg-set="{$user.Profile.custom_fields}"
                                arg-additionalFilters="{{ ['message'] }}"
                                arg-valueClass="pairs pairs--justified" />
                        </xf:if>
                    </xf:if>
                </xf:contentcheck>
                </div>
            </xf:if>
        </xf:if>
        <span class="message-userArrow"></span>
    </section>
</xf:macro>

<xf:macro name="user_info_simple" arg-user="!" arg-fallbackName="">
    <header itemscope itemtype="https://schema.org/Person" class="message-user">
        <meta itemprop="name" content="{{ $user.username ?: $fallbackName }}">
        <div class="message-avatar">
            <div class="message-avatar-wrapper">
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>                
                </xf:if>
            </div>
        </div>
        <span class="message-userArrow"></span>
    </header>
</xf:macro>

<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
        </section>
    </xf:if>
</xf:macro>

<xf:macro name="signature" arg-user="!">
    <xf:if is="$xf.visitor.Option.content_show_signature AND $user.Profile.signature">
        <xf:if contentcheck="true">
            <aside class="message-signature">
            <xf:contentcheck>
                {{ bb_code($user.Profile.signature, 'user:signature', $user) }}
            </xf:contentcheck>
            </aside>
        </xf:if>
    </xf:if>
</xf:macro>

end my extra.less

Code:

p-body-inner
{
background: red;
box-shadow: inset 0 0 1em red, 0 0 2em red;
padding-left: 15px;
padding-right: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;

}
.p-body
{
padding-top:15px; padding-bottom: 15px;

}



[data-cmd="clearFormatting"]
{
    color: orange !important;
}

#bold-1
{
    color: green;
}

#textColor-1
{
    color: blue;
}

[data-cmd="xfCustom_caption"]
{
    color: purple !important;
}



.fr-btn.fr-active:not(.fr-disabled)
{
    background-color: @xf-paletteColor2;
}



[data-cmd="fontSize"]
{
    color: red !important;
}



#fontSize-1
{
    color: red;

    &::after
    {
        border-top-color: red;
    }

    &.fr-active::after
    {
        border-bottom-color: red;
    }
}



#fontSize-1,
#dropdown-menu-fontSize-1
{
    color: red;

    &::after
    {
        border-top-color: red;
    }

    &.fr-active::after
    {
        border-bottom-color: red;
    }
}



[data-template="account_details"] {
.avatar img {
    background-color: transparent !important;
}
}

.message-name {
position: relative;
}

@media (max-width: 650px) {
.postbit_background {
display: none;
}
}

.postbit_background {
position: absolute;
height: 100px;
width: 120px;
opacity: .70;
}



/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow {
    padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        .m-faBase();
    }
    &[href*="whats-new/news-feed"]:before {
        .m-faContent(@fa-var-rss);
    }
    &[href*="search/member"]:before {
        .m-faContent(@fa-var-comments);
    }
    &[href*="account/reactions"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="account/alerts"]:before {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:before {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="account/security"]:before {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="account/privacy"]:before {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:before {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="account/signature"]:before {
        .m-faContent(@fa-var-signature);
    }
    &[href*="account/upgrades"]:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:before {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="account/following"]:before {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:before {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="logout"]:before {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/



/* Status icon with text */
.structItem-statuses .fa-question-circle:before { /* icon */
    color: #fff !important;
    background: #007bff;
    padding: 2px 0px 2px 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    line-height: ((@xf-lineHeightDefault) * .9);
}

.structItem-statuses .fa-question-circle:after { /* text after icon */
    content: "Question";
    color: #fff;
    background: #007bff;
    padding: 1px 4px 2px 2px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-family: @xf-fontFamilyUi;
}
/*********/



/* Move thread status icons */
@media (min-width: @xf-responsiveMedium) {
[data-template="forum_view"], &[data-template="whats_new"], &[data-template="whats_new_posts"],
&[data-template="conversation_list"], &[data-template="forum_view_type_suggestion"],
&[data-template="forum_view_type_question"], &[data-template="forum_view_type_article"],
&[data-template="search_forum_view"] {
    .structItem-statuses {
        float: none;
        &>li {
            margin-left: 0;
            padding-right: 5px;
            padding-top: 1px;
        }
    }
}
}
/*****/

/* Move thread status icons */
@media (min-width: @xf-responsiveMedium) {
[data-template="forum_view"], &[data-template="whats_new"], &[data-template="whats_new_posts"],
&[data-template="conversation_list"], &[data-template="forum_view_type_suggestion"],
&[data-template="forum_view_type_question"], &[data-template="forum_view_type_article"],
&[data-template="search_forum_view"] {
    .structItem-statuses {
        float: none;
        >li {
            float: none;
            margin-left: 0px;
            .structItem-status--sticky, .structItem-status--attention {
                float: left;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--watched {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--poll {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--locked {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--deleted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--moderated {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--upvoted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--downvoted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--discussion {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--article {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--question {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--suggestion {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--solved {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--redirect {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--starred {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--resource {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--attention {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
        }
    }
}
}
/*****/


.block-header {
    color: white;
    text-shadow: 5px 5px 5px #000000;
    background: url(https://forum.appgroup.org.pl/data/assets/style_properties/Pngtreeindonesiaindependencedayfestivalcelebration_1453036.png);
    background-color: white;
}

.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;
    }
}

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node--read .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
        color: #e6cbe4;
        text-shadow: none;
    }
    /* unread icon */
    .node--forum.node--unread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon:before {
        color: #9e5697;
        text-shadow: none;
    }
}
/**********/

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:

It's my message_macros:

Code:

<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName="">
   
    <xf:if is="{$user.Profile.custom_fields.postbit_cover}">
<div class="postbit_background" style="background-image: url({$user.Profile.custom_fields.postbit_cover});"></div>
</xf:if>

    <section itemscope itemtype="https://schema.org/Person" class="message-user">
        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>
        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
        </div>
        <xf:if is="$user.user_id">
            <xf:set var="$extras" value="{{ property('messageUserElements') }}" />
            <xf:if contentcheck="true">
                <div class="message-userExtras">
                <xf:contentcheck>
                    <xf:if is="$extras.register_date">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('joined') }}</dt>
                            <dd>{{ date($user.register_date) }}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.message_count">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('messages') }}</dt>
                            <dd>{$user.message_count|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.solutions AND $user.question_solution_count">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('solutions') }}</dt>
                            <dd>{$user.question_solution_count|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.reaction_score">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('reaction_score') }}</dt>
                            <dd>{$user.reaction_score|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('points') }}</dt>
                            <dd>{$user.trophy_points|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.age && $user.Profile.age">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('age') }}</dt>
                            <dd>{$user.Profile.age}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.location && $user.Profile.location">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('location') }}</dt>
                            <dd>
                                <xf:if is="$xf.options.geoLocationUrl">
                                    <a href="{{ link('misc/location-info', '', {'location': $user.Profile.location}) }}" rel="nofollow noreferrer" target="_blank" class="u-concealed">{$user.Profile.location}</a>
                                <xf:else />
                                    {$user.Profile.location}
                                </xf:if>
                            </dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.website && $user.Profile.website">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('website') }}</dt>
                            <dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.custom_fields">
                        <xf:macro template="custom_fields_macros" name="custom_fields_values"
                            arg-type="users"
                            arg-group="personal"
                            arg-set="{$user.Profile.custom_fields}"
                            arg-additionalFilters="{{ ['message'] }}"
                            arg-valueClass="pairs pairs--justified" />
                        <xf:if is="$user.canViewIdentities()">
                            <xf:macro template="custom_fields_macros" name="custom_fields_view"
                                arg-type="users"
                                arg-group="contact"
                                arg-set="{$user.Profile.custom_fields}"
                                arg-additionalFilters="{{ ['message'] }}"
                                arg-valueClass="pairs pairs--justified" />
                        </xf:if>
                    </xf:if>
                </xf:contentcheck>
                </div>
            </xf:if>
        </xf:if>
        <span class="message-userArrow"></span>
    </section>
</xf:macro>

<xf:macro name="user_info_simple" arg-user="!" arg-fallbackName="">
    <header itemscope itemtype="https://schema.org/Person" class="message-user">
        <meta itemprop="name" content="{{ $user.username ?: $fallbackName }}">
        <div class="message-avatar">
            <div class="message-avatar-wrapper">
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>                
                </xf:if>
            </div>
        </div>
        <span class="message-userArrow"></span>
    </header>
</xf:macro>

<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
        </section>
    </xf:if>
</xf:macro>

<xf:macro name="signature" arg-user="!">
    <xf:if is="$xf.visitor.Option.content_show_signature AND $user.Profile.signature">
        <xf:if contentcheck="true">
            <aside class="message-signature">
            <xf:contentcheck>
                {{ bb_code($user.Profile.signature, 'user:signature', $user) }}
            </xf:contentcheck>
            </aside>
        </xf:if>
    </xf:if>
</xf:macro>

end my extra.less

Code:

p-body-inner
{
background: red;
box-shadow: inset 0 0 1em red, 0 0 2em red;
padding-left: 15px;
padding-right: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;

}
.p-body
{
padding-top:15px; padding-bottom: 15px;

}



[data-cmd="clearFormatting"]
{
    color: orange !important;
}

#bold-1
{
    color: green;
}

#textColor-1
{
    color: blue;
}

[data-cmd="xfCustom_caption"]
{
    color: purple !important;
}



.fr-btn.fr-active:not(.fr-disabled)
{
    background-color: @xf-paletteColor2;
}



[data-cmd="fontSize"]
{
    color: red !important;
}



#fontSize-1
{
    color: red;

    &::after
    {
        border-top-color: red;
    }

    &.fr-active::after
    {
        border-bottom-color: red;
    }
}



#fontSize-1,
#dropdown-menu-fontSize-1
{
    color: red;

    &::after
    {
        border-top-color: red;
    }

    &.fr-active::after
    {
        border-bottom-color: red;
    }
}



[data-template="account_details"] {
.avatar img {
    background-color: transparent !important;
}
}

.message-name {
position: relative;
}

@media (max-width: 650px) {
.postbit_background {
display: none;
}
}

.postbit_background {
position: absolute;
height: 100px;
width: 120px;
opacity: .70;
}



/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow {
    padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        .m-faBase();
    }
    &[href*="whats-new/news-feed"]:before {
        .m-faContent(@fa-var-rss);
    }
    &[href*="search/member"]:before {
        .m-faContent(@fa-var-comments);
    }
    &[href*="account/reactions"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="account/alerts"]:before {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:before {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="account/security"]:before {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="account/privacy"]:before {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:before {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="account/signature"]:before {
        .m-faContent(@fa-var-signature);
    }
    &[href*="account/upgrades"]:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:before {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="account/following"]:before {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:before {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="logout"]:before {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/



/* Status icon with text */
.structItem-statuses .fa-question-circle:before { /* icon */
    color: #fff !important;
    background: #007bff;
    padding: 2px 0px 2px 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    line-height: ((@xf-lineHeightDefault) * .9);
}

.structItem-statuses .fa-question-circle:after { /* text after icon */
    content: "Question";
    color: #fff;
    background: #007bff;
    padding: 1px 4px 2px 2px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-family: @xf-fontFamilyUi;
}
/*********/



/* Move thread status icons */
@media (min-width: @xf-responsiveMedium) {
[data-template="forum_view"], &[data-template="whats_new"], &[data-template="whats_new_posts"],
&[data-template="conversation_list"], &[data-template="forum_view_type_suggestion"],
&[data-template="forum_view_type_question"], &[data-template="forum_view_type_article"],
&[data-template="search_forum_view"] {
    .structItem-statuses {
        float: none;
        &>li {
            margin-left: 0;
            padding-right: 5px;
            padding-top: 1px;
        }
    }
}
}
/*****/

/* Move thread status icons */
@media (min-width: @xf-responsiveMedium) {
[data-template="forum_view"], &[data-template="whats_new"], &[data-template="whats_new_posts"],
&[data-template="conversation_list"], &[data-template="forum_view_type_suggestion"],
&[data-template="forum_view_type_question"], &[data-template="forum_view_type_article"],
&[data-template="search_forum_view"] {
    .structItem-statuses {
        float: none;
        >li {
            float: none;
            margin-left: 0px;
            .structItem-status--sticky, .structItem-status--attention {
                float: left;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--watched {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--poll {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--locked {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--deleted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--moderated {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--upvoted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--downvoted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--discussion {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--article {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--question {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--suggestion {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--solved {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--redirect {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--starred {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--resource {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--attention {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
        }
    }
}
}
/*****/


.block-header {
    color: white;
    text-shadow: 5px 5px 5px #000000;
    background: url(https://forum.appgroup.org.pl/data/assets/style_properties/Pngtreeindonesiaindependencedayfestivalcelebration_1453036.png);
    background-color: white;
}

.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;
    }
}

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node--read .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
        color: #e6cbe4;
        text-shadow: none;
    }
    /* unread icon */
    .node--forum.node--unread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon:before {
        color: #9e5697;
        text-shadow: none;
    }
}
/**********/

APPGRevert your message_macros
Just replace this <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> line with the given codes.

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
Revert your message_macros
Just replace this <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> line with the given codes.

Zer01neI did rewrite, change line codes, but still not working :-/

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
Revert your message_macros
Just replace this <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> line with the given codes.

Zer01neAbove I showed what my message_macros looks like, but as you can see it doesn't work.
Maybe something is blocking the code?

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
Above I showed what my message_macros looks like, but as you can see it doesn't work.
Maybe something is blocking the code?

APPGdid you modified it on your activated styles?

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
did you modified it on your activated styles?

View attachment 35006

Zer01neYes, I also checked on the other two styles, it also does not want to work.

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
Yes, I also checked on the other two styles, it also does not want to work.

APPGI wish I can help you further.

APPG

Active member

Registered

May 13, 2023

Code added/changed to my messages_macros

Unfortunately it doesn't work and I have no idea why?

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
Code added/changed to my messages_macros

View attachment 35007

Unfortunately it doesn't work and I have no idea why?

View attachment 35008

APPGstrange!
This line <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> should be in
line number between 8 to 10
in your case, it's on 108?

please revert the template to default and let me see the first 15 lines of the template

↑View previous replies…

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
strange!
This line <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> should be in
line number between 8 to 10
in your case, it's on 108?

please revert the template to default and let me see the first 15 lines of the template

Zer01neOMG! You're right the same syntax is on line 108! Now I noticed, corrected and now it works!
Thanks for the help!

THX bro! 💪

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
OMG! You're right the same syntax is on line 108! Now I noticed, corrected and now it works!
Thanks for the help!

View attachment 35009

THX bro! 💪

APPGAhh! At last.
Glad to be helping you out.

APPG

Active member

Registered

By APPG
May 13, 2023

Zer01ne said:
Ahh! At last.
Glad to be helping you out.

Zer01neIt's just the same line of code below, hence it didn't work, but now it does! 💪 💪 💪 bro!

Zer01ne

Collaborate

Collaborate

Registered

By Zer01ne
May 13, 2023

APPG said:
How can I add a reputation point here?

APPGplease ask it on a relevant thread or open a new one.

APPG

Active member

Registered

By APPG
May 13, 2023

@Zer01ne
Ok 👍 no problem

bro!

XF 2 Tip Online/Offline avatar indicator like instagram

Administrator

New member

Active member

Collaborate

Active member

Collaborate

Active member

Collaborate

Active member

Collaborate

Active member

Active member

Collaborate

Active member

Collaborate

Active member

Collaborate

Active member

Collaborate

Active member

Collaborate

Active member