Need a couple small Message Bar Tweaks :)

[cannabis ape]

As I'm not sure if the theme(flatawesome) has it build in or it need some custom CSS I will ask it here.

This is the current action bar layout: Sig>action Bar>Like

And this is how I want it: Like bar with the thumb on the same line> Signature> Action bar

As you can see in the next photo I have a horizontal postbit, it was really nice that this theme had it build in as I had to manually fix it in the default theme however, one thing that still annoyed me and I couldn't find an answer for before also is the title/badge placement.

They are next to each other but I rather have them above each other but can't figure out how.

And finally, does the team have a "show banner 1x per page" option build in or should I use the external add-on for that?

I'm off to bed as it has been a 16h run again so will probably see nothing but code when I close my eyes.

GN

Cheers

 

[cannabis ape]

Ah forgot the avatar size. I have it on large but as you can see the size remain quite small.

Cheers.

 

[Russ]

Ordering of items no no options to do that in our styles or XF. You'll need to edit the template "post_macros" and adjust to your liking. Look for:

                        <div class="likesBar js-likeList {{ $post.likes ? 'is-active' : '' }}">
                            <xf:likes content="{$post}" url="{{ link('posts/likes', $post) }}" />
                        </div>

and:

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

Move those around. The action bar is quite large so I'd move those 2 small ones around it.

For banners you can allow or not allow Banner stacking, it's in main ACP, use the search top right: userBanners, you'll find the option there.

The large avatar actually only works on the other 2 layouts and it's somewhat intentional. The whole point of the horizontal layout is to minimize the space output there, because frankly this just looks odd:

 

[cannabis ape]

Ordering of items no no options to do that in our styles or XF. You'll need to edit the template "post_macros" and adjust to your liking. Look for:

                        <div class="likesBar js-likeList {{ $post.likes ? 'is-active' : '' }}">
                            <xf:likes content="{$post}" url="{{ link('posts/likes', $post) }}" />
                        </div>

and:

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

Move those around. The action bar is quite large so I'd move those 2 small ones around it.

For banners you can allow or not allow Banner stacking, it's in main ACP, use the search top right: userBanners, you'll find the option there.

The large avatar actually only works on the other 2 layouts and it's somewhat intentional. The whole point of the horizontal layout is to minimize the space output there, because frankly this just looks odd:

View attachment 7997

Great I will try that.

The avatar doesn't have to be that big but a little bigger than it is now.

About the banner stacking, I don't want them horizontal, I want em vertical like so.

Also about the signature once per page question, there an option or should I take the add-on from Xenforo resources?

Cheers.

 

[Russ]

To increase the avatar, extra.less:

.message-avatar-wrapper .avatar {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
}

It loads the M avatar by default so it can go up to 96px without distorting the avatar.

 

[cannabis ape]

Thank you now these ones please.

About the banner stacking, I don't want them horizontal, I want em vertical like so.

Also about the signature once per page question, there an option or should I take the add-on from Xenforo resources?

 

[Russ]

The signature you'll need an add-on: https://xenforo.com/community/resources/signature-once.6182/

For the banners, extra.less:

.XenBase .message-userBanner.userBanner {
    display: block !important;
}

Should do the trick ,you may need to add some margin/padding depending on your banners.

 

[cannabis ape]

.XenBase .message-userBanner.userBanner { display: block !important; }

It's getting there. The text is beneath it but the width of the banner box is over the whole horizontal space.

Any way it adapts to the text like it normal does?

Ty.

 

[Russ]

That's now how it's loading on mine with that CSS. Can you link me to a message with the banners showing incorrectly? You can PM me or start a ticket if you want to keep it private.

 

[cannabis ape]

That's now how it's loading on mine with that CSS. Can you link me to a message with the banners showing incorrectly? You can PM me or start a ticket if you want to keep it private.

Sure mate thanks