Shoutbox Post Alignments

[Sarianne]

Hello friends,

How would I go about having every other post on the shoutbox appear on the right side of the chat? I should say that I'm using the "avatars in shoutbox" template as well.

Thanks in advance.

[Chris]

Dec 18, 2023 13:09:42 GMT -8 Sarianne said:

Hello friends,

How would I go about having every other post on the shoutbox appear on the right side of the chat? I should say that I'm using the "avatars in shoutbox" template as well.

Thanks in advance.

Here is an interpretation of the request employing CSS coding

<style>

.shoutbox_messages{
  .shoutbox-post.content-box {
width: fit-content;
height:fit-content;
}
   
   container: shoutbox_messages / inline-size;
   max-height:100cqh;
   display:grid;
> .shoutbox-post{
overflow:visible;
&:nth-of-type(even){

justify-self:end;
}
}

}

</style>

SPOILER: Click to show

alternate interpretation:

<style>

.shoutbox-post.content-box {
   display:flex;
   flex-flow: row nowrap;
   .message{
       flex-grow:1;
       
   }
   &:nth-of-type(even){
       justify-content:flex-end;
       .message{
           flex-grow:0;
       }
       
   }
}

</style>

If you have issues with the code or where to place it then it is usually a good idea to offer a forum URL so the forum can be examined to see how far it has strayed from the standard out-of-the-box forum which would likely affect the composition of any code meant to affect that forum. In the absence of an URL a code is created for the out-of-the-box forum experience rather than the actual forum.

Dec 18, 2023 18:37:11 GMT -8 Todge said:

Non dovrebbe importare se il CSS viene aggiunto al CSS del forum o all'opzione CSS del plugin.

Prova questo..

Rimuovi il codice che hai postato sopra e sostituiscilo con questo...

Since this was posted in the Templates board, you may also be looking for an actual template modification, which should also be possible using the $[shoutbox_post.even] as a marker to know when to reposition the subcomponents of the shoutbox message. If you reword the request with more details regarding the placement and ordering that you envision, then that may help.

[Sarianne]

Hey, thanks so much for the tip Chris! I used the $[shoutbox_post.even] and $[shoutbox_post.odd] method. I managed to get my forum's shoutbox working the way I wanted to by putting in this code in the Shoutbox section of Layout Templates under Individual Posts:

SPOILER: Click to show

{foreach $[shoutbox_post]}
{if $[shoutbox_post.even]}
<div style="float: right; width: 666px; padding-left: 500px">
   <div class="$[shoutbox_post.content_class] content-box"{if $[shoutbox_post.edited]} title="$[shoutbox_post.edited]"{/if}>
       <div style="float: left; width: 60px;">
           $[shoutbox_post.created_by.avatar_small]
       </div>
       <span class="details">
           $[shoutbox_post.edit_button]
           $[shoutbox_post.date]
           {if $[shoutbox_post.edited]}<span class="edited">*</span>{/if}
       </span>
<div style="float: top">$[shoutbox_post.created_by]</div>
       <span class="message">$[shoutbox_post.message]</span>
       
       $[shoutbox_post.delete_button]
       <div class="ui-helper-clearfix"></div>
   </div>
</div>
{else $[shoutbox_post.odd]}
<div style="float: left; width: 666px; padding-right: 500px">
   <div class="$[shoutbox_post.content_class] content-box"{if $[shoutbox_post.edited]} title="$[shoutbox_post.edited]"{/if}>
       <div style="float: left; width: 60px;">
           $[shoutbox_post.created_by.avatar_small]
       </div>
       <span class="details">
           $[shoutbox_post.edit_button]
           $[shoutbox_post.date]
           {if $[shoutbox_post.edited]}<span class="edited">*</span>{/if}
       </span>
<div style="float: top">$[shoutbox_post.created_by]</div>
       <span class="message">$[shoutbox_post.message]</span>
       
       $[shoutbox_post.delete_button]
       <div class="ui-helper-clearfix"></div>
   </div>
</div>
{/if}
{/foreach}

I'm sure there's a better way to do it; my version is super bulky and I basically brute-forced a lot of elements to work in a way that is very specific to the dimensions of my forum in particular. I also essentially inverted it, because a new post always shows up above or below the last post on the Shoutbox — the odd-numbered one, which would have normally been to the right — and I wanted it to all flow from the left. It's functional, though.

It looks like that now:

SPOILER: Click to show

Edit: it does seem to work on the default theme as well, albeit looking slightly too widely spaced.

Thanks again for your hard work.