Messenger style conversations anyone?

Well this was an interesting waste of time (and at my age there's not a lot of it left! ... so remind me why I do this again?).

A few vars and style properties allow for customisation of the layout just using the extra.less template.

Less:
<xf:set var="$ctaMessageSelfSide" value="right" /> // side for own messages - right or left
<xf:set var="$ctaMessageAttribution" value="no" /> // display the message date and time and [New] badge - yes or no
<xf:set var="$ctaMessagePointer" value="top" /> // pointer location for the message containers - top, bottom, or none
@__ctaMessageRadius: 20px; // radius of message containers - a value between 10px and 30px works best
@__ctaMessageWidth: 80%; // width of messages - between 50% and 85% works best
@__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants

Just goes to show what's possible using CSS/LESS templates.

1616037572844.png


Less:
<xf:set var="$ctaMessageSelfSide" value="left" /> // side for own messages - right or left
<xf:set var="$ctaMessageAttribution" value="yes" /> // display the message date and time and [New] badge - yes or no
<xf:set var="$ctaMessagePointer" value="bottom" /> // pointer location for the message containers - top, bottom, or none
@__ctaMessageRadius: 30px; // radius of message containers - a value between 10px and 30px works best
@__ctaMessageWidth: 50%; // width of messages - between 50% and 85% works best
@__ctaMessageOtherColour: orange; // colour of the messages of other participants

1616038072786.png
 
Well this was an interesting waste of time (and at my age there's not a lot of it left! ... so remind me why I do this again?).
For the community.

I would suggest that rounded corners be an easily configurable option from like 0 (square) to 50 (round) if I recall CSS right as well. This is so that square styles (like default) don't deviate too much from styling as the highlighting color differentiates that enough while curvy designs can round out (or the webmaster can decide whichever looks best).

However, if you intend on releasing this for free, I insist on you letting me buy you a couple of adult beverages (or whatever else you choose). I'll be in contact when that time comes. :)
 
I would suggest that rounded corners be an easily configurable option
That's what this is:
Less:
@__ctaMessageRadius: 30px; // radius of message containers - a value between 10px and 30px works best

However, it will be up to the individual to style it to suit as they wish.
It's just CSS - anything can be changed.
 
  • Like
Reactions: frm
The guide is available.

 
Top Bottom