Silmarillion

Registered
Hi Russ,

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

Following problem:


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

Best regards,
Chris
 
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
 
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)
 
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;
    }
}

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

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.

Back