BOLT and WhatsXFessenger

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

Silmarillion

Silmarillion

Customer
Hi Russ,

I checked with Brogan over there. But, of course, he referred me to you. ;)

Following problem:

xenforo.com

WhatsXFessenger

The full code is a few posts up on this page. Yep that worked. Thank you! (y) (FWIW & if anyone else slips - I had a double full stop separated inbetween two lines)
xenforo.com xenforo.com

Maybe you have an idea why it could be. Nobody will know Bolt as well as Russ. ;)

Best regards,
Chris
 
Sort by date Sort by votes
Hello,

Which message layout do you have checked under: Style properties -> Messages ?

I ask because as far as I can tell it works fine with Bolt with two minor adjustments:

Add this:

Code: 
[data-template="conversation_view"]
{
    .block--messages .message .message-cell.message-cell--main
    {
        background: transparent;
    }
}

And change the self color to this:

(this is towards the top)
Code: 
@__ctaMessageSelfColour: @xf-paletteColor2; // colour of your messages

Result:
1641334267216.png
 
Upvote 0 Downvote
Wherever you added the other code for the plugin, you can adjust the variable (as per my post) and then add the new CSS below it. It's working fine on mine with that code.

I may need a URL and login to debug further (open a ticket for that)
 
Upvote 0 Downvote
Hello Russ,

sorry for the late reply. I simply did not have the time.

I have edited the following:

conversation_message_macros

Code: 
<xf:macro name="message" arg-message="!" arg-conversation="!" arg-position="" arg-lastRead="{{ null }}">
    <xf:css src="message.less" />
    <article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} {{ $message.user_id == $xf.visitor.user_id ? 'ctaConversationMessageSelf' : 'ctaConversationMessageOther' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">
        <span class="u-anchorTarget" id="convMessage-{$message.message_id}"></span>
        <div class="message-inner">
            <div class="message-cell message-cell--user">
                <xf:macro template="message_macros" name="user_info" arg-user="{$message.User}" arg-fallbackName="{$message.username}" />
            </div>
            <div class="message-cell message-cell--main">
                <div class="message-main js-quickEditTarget">
                    <div class="message-content">
                        <header class="message-attribution">
                            <a href="{{ link('conversations/messages', $message) }}" class="message-attribution-main u-concealed" rel="nofollow">
                                <xf:date time="{$message.message_date}" />
                            </a>
                            <span class="message-attribution-opposite">
                                <xf:if is="$message.isUnread($lastRead)">
                                    <span class="message-newIndicator">{{ phrase('new') }}</span>
                                </xf:if>
                                <xf:if is="$position">#{$position|number}</xf:if>
                            </span>
                        </header>

                        <xf:if is="$message.isIgnored()">
                            <div class="messageNotice messageNotice--ignored">
                                {{ phrase('you_are_ignoring_content_by_this_member') }}
                            </div>
                        </xf:if>

                        <div class="message-userContent lbContainer js-lbContainer"
                            data-lb-id="message-{$message.message_id}"
                            data-lb-caption-title="{{ $message.User ? $message.User.username : $message.username }}"
                            data-lb-caption-desc="{{ date_time($message.message_date) }}">

                            <article class="message-body js-selectToQuote">
                                {{ bb_code($message.message, 'conversation_message', $message) }}
                                <div class="js-selectToQuoteEnd">&nbsp;</div>
                            </article>

                            <xf:if is="$message.attach_count">
                                <xf:macro template="message_macros" name="attachments"
                                    arg-attachments="{$message.Attachments}"
                                    arg-message="{$message}"
                                    arg-canView="{{ true }}" />
                            </xf:if>
                        </div>

                        <xf:macro template="message_macros" name="signature" arg-user="{$message.User}" />
                    </div>

                    <footer class="message-footer">
                        <xf:if contentcheck="true">
                            <div class="message-actionBar actionBar">
                                <xf:contentcheck>
                                    <xf:if contentcheck="true">
                                        <div class="actionBar-set actionBar-set--external">
                                            <xf:contentcheck>
                                                <xf:react content="{$message}" link="conversations/messages/react" list="< .js-message | .js-reactionsList" />

                                                <xf:if is="$conversation.canReply()">
                                                    <xf:set var="$quoteLink">{{ link('conversations/reply', $conversation, {'quote': $message.message_id}) }}</xf:set>
                                                    <xf:if is="$xf.options.multiQuote">
                                                        <a href="{$quoteLink}"
                                                            class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
                                                            title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
                                                            data-message-id="{$message.message_id}"
                                                            data-mq-action="add">
                                                            {{ phrase('quote') }}
                                                        </a>
                                                    </xf:if>
                                                    <a href="{$quoteLink}"
                                                        class="actionBar-action actionBar-action--reply"
                                                        title="{{ phrase('reply_quoting_this_message')|for_attr }}"
                                                        data-xf-click="quote"
                                                        data-quote-href="{{ link('conversations/messages/quote', $message) }}">{{ phrase('reply') }}</a>

                                                </xf:if>
                                            </xf:contentcheck>
                                        </div>
                                    </xf:if>

                                    <xf:if contentcheck="true">
                                        <div class="actionBar-set actionBar-set--internal">
                                            <xf:contentcheck>
                                                <xf:if is="$message.canReport()">
                                                    <a href="{{ link('conversations/messages/report', $message) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a>
                                                </xf:if>

                                                <xf:if is="$message.canEdit()">
                                                    <xf:js src="xf/message.js" min="1" />
                                                    <a href="{{ link('conversations/messages/edit', $message) }}"
                                                        class="actionBar-action actionBar-action--edit"
                                                        data-xf-click="quick-edit"
                                                        data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a>
                                                </xf:if>

                                                <xf:if is="$message.canCleanSpam()">
                                                    <a href="{{ link('spam-cleaner', $message) }}"
                                                        class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
                                                        data-xf-click="overlay">{{ phrase('spam') }}</a>
                                                </xf:if>

                                                <xf:if is="$xf.visitor.canViewIps() && $message.ip_id">
                                                    <a href="{{ link('conversations/messages/ip', $message) }}"
                                                        class="actionBar-action actionBar-action--ip"
                                                        data-xf-click="overlay">{{ phrase('ip') }}</a>
                                                </xf:if>
                                            </xf:contentcheck>
                                        </div>
                                    </xf:if>
                                </xf:contentcheck>
                            </div>
                        </xf:if>

                        <div class="reactionsBar js-reactionsList {{ $message.reactions ? 'is-active' : '' }}">
                            <xf:reactions content="{$message}" link="conversations/messages/reactions" />
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </article>
</xf:macro>

cta_whatsXFessenger.less

Code: 
// 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-paletteColor2; // 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

[data-template="conversation_view"]
{
    .block--messages .message .message-cell.message-cell--main
    {
        background: transparent;
    }
}

...
 
Upvote 0 Downvote
extra.less: 
.custom-stats
{
    background:  @xf-paletteColor5;
    padding: 10px 15px;
    [data-widget-key="forum_overview_forum_statistics"]
    {
        h3.block-minorHeader
        {
            color: #FFF;
        }
        .block-container, .block-container .pairs.pairs--justified
        {
            background-color: transparent;
            border-width: 0;
            box-shadow: none;
            color: #FFF;
            
            dt { color: #FFF; }
        }
        .block-container .pairs.pairs--justified
        {
            flex: 1 1 20%;
            padding: 5px 10px 5px 60px;
            border-left: 1px solid rgba(204, 204, 204, 0.25);
            border-radius: 0;
            &:first-of-type { border-left-width: 0; }
            dd
            {
                font-size: 20px !important;
                color: #FFF;
                a { color: #FFF; text-decoration: underline; }
            }
            &:after
            {
                right: auto;
                left: 10px;
                font-size: 30px;
            }
        }
        @media (max-width: @xf-responsiveWide)
        {
        .block-container .block-body
        {
            display: block;
        }
            .block-container .pairs.pairs--justified
            {
                border-width: 0;
            }
        }
    }
}

[data-template="conversation_view"]
{
    .block--messages .message .message-cell.message-cell--main
    {
        background: transparent;
    }
}

// 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-paletteColor2; // 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



{{ include('cta_whatsXFessenger.less') }}





[data-template="conversation_view"]
{
    .block--messages .message .message-cell.message-cell--main
    {
        background: transparent;
    }
}

I have also tried it without "cta_whatsXFessenger.less". Did not bring any success either.

Best regards,
Chris
 
Upvote 0 Downvote
I don't think you need {{ include('cta_whatsXFessenger.less') }} if you have the CSS above that, could be causing an error.

Past that, I'd need a login (not here, it's a public area) via a ticket to debug further. It definitely works on our styles.
 
Upvote 0 Downvote
I'm taking up the topic again because I finally want to actively use the style. I have now decided on the "Canvas" :love: Version and will ask a few more questions about it separately.

The following:

This is what the private message function looks like using "Default":

default.PNG


Everythings fine and smooth. :)


And this is what it looks like using "Classic"
Message user info elements style: "Individual Boxed"

classic.PNG


So it seems, indeed, to be a problem with the Bolt style.
Have you tested this with “Classic” @Russ?
I suspect a conflict with the Bolt setting options.

Best regards,
Chris
 
Last edited:
Upvote 0 Downvote
I'd need more time to dive in to figure out exactly why it's doing it. But... for now you could just set your message display back to default, then add this to your extra.less:

Code: 
@media (min-width: (@xf-messageSingleColumnWidth + 1))
{
    .message,message--post
    {
        .message-inner
        {
        .message-cell.message-cell--user
        {
            background-color: transparent;
            border-width: 0;
            section
            {
                .xf-messageUserBlock();
                padding: @xf-messagePadding;
            }
            .message-userArrow
            {
                border-right-color: @xf-messageUserBlock--border-color;
                transform: rotate(180deg);
                right: 1px;
                &:after
                {
                    border-right-color: @xf-messageUserBlock--background-color;
                }
            }
        }
        }
        .js-quickReply .message-userArrow
        {
            display: none;
        }
    }
}

This will apply the classic look to JUST forum posts and not convo's.
 
Upvote 0 Downvote
You must log in or register to reply here.

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

View our stylesBrowse all our XenForo styles
DocumentationEssential information for our styles
Back