Personal Message Bubbles

Love this!


  • Could quaternary color be made available, too?
  • I noticed a spelling mistake in the directions. Tertiary is spelled teriary instead


Very cool. I like it :grin:

I’ve added in the option to remove the border - and the quaternary option and fixed the tertiary spelling.

Thank you @ggurbet @debryc

Shaun The Sheep Movie Ok GIF


That was quick, thank you!

By the way, as you can see I have installed the component twice and set dark colors for our dark theme and light colors for our light theme. I think there is no other way if we want to use custom CSS colors.

Also one little suggestion: you allow appending to the end of the reply button but in some languages (like Turkish) adding something to the front is more preferable as the verb is at the end of sentences in them.

Yes that’s a good workaround. Does the planned change in Discourse to remove the ability to locally modify Discourse themes and components have any impact on your implementation? It’s clearly been useful here?

1 Like

No, it doesn’t. Just a few minor CSS modifications does the trick.

I was referring to this announcement in Beta release. You can still modify CSS but you would have to create a new theme component, no longer linked to the git repository. and copy over all the code. Is that what you did - or did you do the simple thing to just edit the CSS in the component?

This seems problematic to me. I would rather retain the ability to edit themes in situ. It certainly helps with theme/component development.

1 Like

I have a local component, named “common sub-theme” where I make edits for other components. I target other components’ classes, elements, etc. within this sub-theme. As long as the component author does not change the names of their classes, ids, etc. I am fine and this works. Currently since you also included the border removal, I do not need any modifications in my sub-theme for Personal Message Bubbles component by the way.

1 Like

Hello and thanks for this delightful theme component. :trophy:

A potential bug: It looks like the “appended” text option includes a space before the string at the bottom of the message topic, but does not include it in the editor window. See below:



@Rhidian, can you also add the option to prepend text to the Reply button? In some languages (like Turkish) it would make sense to add some text to the beginning of a verb.

1 Like

Great component!
Do we have something similar for actual posts in topics? I mean a component that makes posts look like message bubbles!

I’ve added in the option to prepend text to the Reply button. This also hides the svg reply arrow before the Reply text.

1 Like

That would be possible as a theme but the purpose of this component is to help distinguish topic posts from private messages. If every post appeared in message bubbles that would defeat the purpose.


This spacing should be fixed now too. Please can you update the component and confirm?


It looks good, but anyone who may have chosen “Message” is likely now going to get a bit confused, because the :arrow_upper_left:   Reply button seems to have changed to :email:   Message (maybe a Discourse change?):

I think it’s related to a new change here:

I am so far struggling to think of text other than “to Message” to use as appended text, that would work for both “Reply” and “Message” buttons, but if I think of something I will add it here.

That’s a recent Discourse change - and one I wasn’t aware of. It makes sense as using the word Message does help distinguish it from a Topic reply.

I presume the change from ‘Reply’ to ‘Message’ on the button is something configurable under the Customise > Text settings? It would be useful to know what Text setting has changed on Meta to use the word ‘Message’ on the composer dialogue?

NB This component feature is simply a convenient way to append (or prepend) text. The text is added to both the topic ‘Reply’ button and the composer ‘Message’ button so you will need to take that into account of you use this component feature. I could change it so you can append text separately for each button, or we could remove this feature and advise on using the native ‘Customise > Text’ functionality, if users want to change the text.

PS I simply append the word ‘Privately’ to help distinguish that this is a private message as opposed to a forum topic reply. That ‘Reply Privately’ and ‘Message Privately’ still works - but is a bit redundant now on the message button.


Good idea; I was able to change the value of js.composer.create_pm (back?) to Reply and achieve the same functionality as before, although with the new envelope icon on the composer “send” button (which is fine). @Osama may know of more changes that impact this theme component that we haven’t unconvered yet, given this commit and potentially any future work in this area:

1 Like

That message count in the header is not part of this component. That is part of the core Discourse messaging functionality.

This component simple styles the message text to look like speech bubbles.

Screen Shot 2021-04-17 at 11.52.44 AM

Which Discourse version is this?

Whoops that’s it, my bad sorry. 2.7.0.beta6.