XF 2 Tip WhatsXFessenger

ENXF NET · Mar 22, 2021

ENXF NET submitted a new resource:

WhatsXFessenger - Sup?

Tired of conversations looking exactly the same as threads?
Didn't think so.

Members getting confused between threads, conversations, and profile posts and keep posting embarrassingly private stuff in threads?
No, mine neither.

Ever felt that XF conversations would ne waaaaaaayyyy better if they resembled one of the well known messenger apps?
Nah, thought not.

With that in mind, ladies and gentlemen, meine damen und herren, mesdames et messieurs, hanimlar ve beyler ... I hereby...

Read more about this resource...

akhi · Mar 23, 2021

So nice thank you !

Warfare · May 2, 2021

Works great! Love it.

hyken · May 24, 2021

are you going to update this resource?

Warfare · May 24, 2021

hyken said:
are you going to update this resource?

hykenIt’s not an add on resource. It’s a modification tip to be used in your extra.less template

BattleKing · May 24, 2021

Update:

This tweak will align the attribution with the avatar/on the outside edge of the message on both sides, like so:

Remove these lines:

Add these lines

Use this modified code.

Less:

// Begin Brogan's most splendiferous messenger style conversation layout modification thingy
[data-template="conversation_view"]
{
    <xf:set var="$ctaMessageSelfSide" value="right" /> // side for own messages - right or left
    <xf:set var="$ctaMessageSelfAvatar" value="yes" /> // display your own avatar - yes or no
    <xf:set var="$ctaMessageAttribution" value="yes" /> // display the message date and time and [New] indicator - yes or no
    <xf:set var="$ctaMessagePointer" value="top" /> // pointer location for the message containers - top, bottom, or none
    <xf:set var="$ctaMessageOnline" value="yes" /> // display the online now indicator - yes or no
    @__ctaMessageRadius: 25px; // radius of message containers - between 10px and 30px works best
    @__ctaMessageWidth: 80%; // width of messages - between 50% and 85% works best
    @__ctaMessageSelfColour: @xf-paletteNeutral1; // colour of your messages
    @__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants

    .block
    {
        & .message
        {
            border-radius: @__ctaMessageRadius;         

            &--conversationMessage
            {
                width: @__ctaMessageWidth;
            }
    
            &-cell--user
            {
                visibility: hidden;
                border: none;
                flex: 0 0 118px;
            }
    
            &-avatar
            {
                visibility: visible;
    
                &-wrapper
                {
                    margin-bottom: 0;
                }

                &-online
                {
                    <xf:if is="$ctaMessageOnline == 'no'">
                        display: none;
                    </xf:if>
                }
            }

            &-userDetails,
            &-userExtras,
            &-userArrow
            {
                display: none;
            }

            &--quickReply
            {
                border-radius: inherit;
            }

            &-attribution
            {
            <xf:if is="$ctaMessageAttribution == 'no'">
                display: none;
            </xf:if>
                border: none;
            }

            &-body
            {
                margin: 0;
            }

            &.ctaConversationMessageSelf
            {
                background: @__ctaMessageSelfColour;

                <xf:if is="$ctaMessageSelfAvatar == 'no'">
                    & .message-cell--user
                    {
                        display: none;
                    }
                </xf:if>
            }

            &.ctaConversationMessageOther
            {
                background: @__ctaMessageOtherColour;
            }

            @media (max-width: @xf-responsiveMedium)
            {
                border-right: 1px solid @xf-borderColor;
                border-left: 1px solid @xf-borderColor;

                &-cell--user
                {
                    padding-bottom: 0;
                }

                &-avatar .avatar
                {
                    width: 32px;
                    height: 32px;
                    font-size: 20px;                       
                }
            }

        <xf:if is="$ctaMessageSelfSide == 'right'">
            &.ctaConversationMessageSelf,
            &--quickReply
            {
                margin-left: (100% - @__ctaMessageWidth);
    
                & .message-inner
                {
                    flex-direction: row-reverse;
                }

                & .message-attribution-main
                {
                    float: right;
                    margin-left: 4px;
                }
            }
    
            &--quickReply
            {
                margin-left: 0;
            }

            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf,
                &--quickReply
                {
                    & .message-user
                    {
                        flex-direction: row-reverse;
                    }
                }

                &.ctaConversationMessageOther .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }               
            }

            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-right-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-top-left-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-right-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-bottom-left-radius: 0;
                    }
            </xf:if>
        <xf:else/>
            &.ctaConversationMessageOther
            {
                margin-left: (100% - @__ctaMessageWidth);

                & .message-attribution-main
                {
                    float: right;
                    margin-left: 4px;
                }
    
                & .message-inner
                {
                    flex-direction: row-reverse;
                }
            }

            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }

                &.ctaConversationMessageOther .message-user
                {
                    flex-direction: row-reverse;
                }
            }

            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-left-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-top-right-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-left-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-bottom-right-radius: 0;
                    }
            </xf:if>
        </xf:if>
        }
    }
}
// End Brogan's most splendiferous messenger style conversation layout modification thingy - so say we all

Thanos Crax · Jul 28, 2021

How to fix this?
UIx Theme Legend

nsgaming · Jul 28, 2021

not working for me. xenforo 2.2.6

nsgaming · Jul 30, 2021

@BattleKing , @Jace this is my server error log

Code:

XF\CssRenderException: Error rendering template public:extra.less: ParseError: missing opening `{` in public:extra.less on line 5441, column 1 (on or near line 5441) src/XF/CssRenderException.php:87
Generated by: Unknown account Jul 30, 2021 at 1:38 PM
Stack trace
 5438 |     text-align: center;
 5439 |     border-radius: 0 0 5px 5px;
 5440 |     margin-top: 5px;
*5441*| }
 5442 |
 5443 | .ozzmodzOnlineOflineOff{
 5444 |     background: #ff0000;
------------

#0 src/XF/CssRenderer.php(416): XF\CssRenderException::createFromLessException(Object(Less_Exception_Chunk), 'public:extra.le...', '// Note that th...')
#1 src/XF/CssRenderer.php(350): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#2 src/XF/CssRenderer.php(258): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#3 src/addons/ThemeHouse/UIX/XF/CssRenderer.php(40): XF\CssRenderer->renderTemplates(Array, Array, Array)
#4 src/XF/CssRenderer.php(116): ThemeHouse\UIX\XF\CssRenderer->renderTemplates(Array, Array, Array)
#5 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#6 css.php(30): XF\CssWriter->run(Array, 2, 1, '3d3d0e7ede82956...')
#7 {main}

-------------

Previous Less_Exception_Chunk: ParseError: missing opening `{` in anonymous-file-12152.less on line 5441, column 1
5439|     border-radius: 0 0 5px 5px;
5440|     margin-top: 5px;
5441| }
5442|
5443| .ozzmodzOnlineOflineOff{
5444|     background: #ff0000; - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677
#0 src/vendor/oyejorge/less.php/lib/Less/Parser.php(621): Less_Parser->GetRules(NULL)
#1 src/vendor/oyejorge/less.php/lib/Less/Parser.php(449): Less_Parser->_parse()
#2 src/XF/CssRenderer.php(412): Less_Parser->parse('// Note that th...')
#3 src/XF/CssRenderer.php(350): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#4 src/XF/CssRenderer.php(258): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#5 src/addons/ThemeHouse/UIX/XF/CssRenderer.php(40): XF\CssRenderer->renderTemplates(Array, Array, Array)
#6 src/XF/CssRenderer.php(116): ThemeHouse\UIX\XF\CssRenderer->renderTemplates(Array, Array, Array)
#7 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#8 css.php(30): XF\CssWriter->run(Array, 2, 1, '3d3d0e7ede82956...')
#9 {main}
Request state
array(4) {
  ["url"] => string(307) "/css.php?css=public%3Aio.less%2Cpublic%3Aiodark.less%2Cpublic%3Alightbox.less%2Cpublic%3Anode_list.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Auix.less%2Cpublic%3Auix_extendedFooter.less%2Cpublic%3Auix_socialMedia.less%2Cpublic%3Aextra.less&s=2&l=1&d=1627648682&k=3d3d0e7ede82956106a0a24854f17bc1992fdebc"
  ["referrer"] => string(22) "https://site url/"
  ["_GET"] => array(5) {
    ["css"] => string(196) "public:io.less,public:iodark.less,public:lightbox.less,public:node_list.less,public:share_controls.less,public:uix.less,public:uix_extendedFooter.less,public:uix_socialMedia.less,public:extra.less"
    ["s"] => string(1) "2"
    ["l"] => string(1) "1"
    ["d"] => string(10) "1627648682"
    ["k"] => string(40) "3d3d0e7ede82956106a0a24854f17bc1992fdebc"
  }
  ["_POST"] => array(0) {
  }
}

And This Is My extra.less

Code:

/* Copyright */
.p-footer-copyright{font-size: 0px;}
.custom-copyright{font-size: 11px;}

// Begin Brogan's most splendiferous messenger style conversation layout modification thingy
[data-template="conversation_view"]
{
    <xf:set var="$ctaMessageSelfSide" value="right" /> // side for own messages - right or left
    <xf:set var="$ctaMessageSelfAvatar" value="yes" /> // display your own avatar - yes or no
    <xf:set var="$ctaMessageAttribution" value="no" /> // display the message date and time and [New] indicator - yes or no
    <xf:set var="$ctaMessagePointer" value="top" /> // pointer location for the message containers - top, bottom, or none
    <xf:set var="$ctaMessageOnline" value="yes" /> // display the online now indicator - yes or no
    @__ctaMessageRadius: 25px; // radius of message containers - between 10px and 30px works best
    @__ctaMessageWidth: 80%; // width of messages - between 50% and 85% works best
    @__ctaMessageSelfColour: @xf-paletteNeutral1; // colour of your messages
    @__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants
    .block
    {
        & .message
        {
            border-radius: @__ctaMessageRadius;

            &--conversationMessage
            {
                width: @__ctaMessageWidth;
            }

            &-cell--user
            {
                visibility: hidden;
                border: none;
                flex: 0 0 118px;
            }

            &-avatar
            {
                visibility: visible;

                &-wrapper
                {
                    margin-bottom: 0;
                }
                &-online
                {
                    <xf:if is="$ctaMessageOnline == 'no'">
                        display: none;
                    </xf:if>
                }
            }
            &-userDetails,
            &-userExtras,
            &-userArrow
            {
                display: none;
            }
            &--quickReply
            {
                border-radius: inherit;
            }
            &-attribution
            {
            <xf:if is="$ctaMessageAttribution == 'no'">
                display: none;
            </xf:if>
                border: none;
                    &-main
                    {
                        float: right;
                        margin-left: 4px;
                    }
            }
            &-body
            {
                margin: 0;
            }
            &.ctaConversationMessageSelf
            {
                background: @__ctaMessageSelfColour;
                <xf:if is="$ctaMessageSelfAvatar == 'no'">
                    & .message-cell--user
                    {
                        display: none;
                    }
                </xf:if>
            }
            &.ctaConversationMessageOther
            {
                background: @__ctaMessageOtherColour;
            }
            @media (max-width: @xf-responsiveMedium)
            {
                border-right: 1px solid @xf-borderColor;
                border-left: 1px solid @xf-borderColor;
                &-cell--user
                {
                    padding-bottom: 0;
                }
                &-avatar .avatar
                {
                    width: 32px;
                    height: 32px;
                    font-size: 20px;
                }
            }
        <xf:if is="$ctaMessageSelfSide == 'right'">
            &.ctaConversationMessageSelf,
            &--quickReply
            {
                margin-left: (100% - @__ctaMessageWidth);

                & .message-inner
                {
                    flex-direction: row-reverse;
                }
            }

            &--quickReply
            {
                margin-left: 0;
            }
            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf,
                &--quickReply
                {
                    & .message-user
                    {
                        flex-direction: row-reverse;
                    }
                }
                &.ctaConversationMessageOther .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }
            }
            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-right-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-top-left-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-right-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-bottom-left-radius: 0;
                    }
            </xf:if>
        <xf:else/>
            &.ctaConversationMessageOther
            {
                margin-left: (100% - @__ctaMessageWidth);

                & .message-inner
                {
                    flex-direction: row-reverse;
                }
            }
            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }
                &.ctaConversationMessageOther .message-user
                {
                    flex-direction: row-reverse;
                }
            }
            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-left-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-top-right-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-left-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-bottom-right-radius: 0;
                    }
            </xf:if>
        </xf:if>
        }
    }
}
// End Brogan's most splendiferous messenger style conversation layout modification thingy - so say we all

xf version = 2.2.6
style = themehouse io dark mode

Jace · Jul 30, 2021

on line 5441 whats the code on line 5441?

XF 2 Tip WhatsXFessenger

Administrator

Active member

[Your Welcoming Staff Member]

Member

[Your Welcoming Staff Member]

Spirit of darkness

Collaborate

Spirit of darkness

Spirit of darkness

Collaborate

Active member

Collaborate

Active member

[OzzModz] Online/Offline Badges 2.0.2 Add on​

Collaborate

[OzzModz] Online/Offline Badges 2.0.2 Add on​

Spirit of darkness

[OzzModz] Online/Offline Badges 2.0.2 Add on​

Active member

Spirit of darkness

Collaborate

[OzzModz] Online/Offline Badges 2.0.2 Add on​

Spirit of darkness

Active member

Collaborate

Active member

Active member

Spirit of darkness

Spirit of darkness

[OzzModz] Online/Offline Badges 2.0.2 Add on

[OzzModz] Online/Offline Badges 2.0.2 Add on

[OzzModz] Online/Offline Badges 2.0.2 Add on

[OzzModz] Online/Offline Badges 2.0.2 Add on