Personal Message Bubbles

:exclamation: The functionality of this Theme Component was added to Discourse core from version 2.8.0 onwards. You won’t have much joy if you continue to use it after upgrading beyond that version!

I’ve created a theme component to change the style of the personal message posts to bubbles to help distinguish them from topics.

Settings:

  • Set the background color of the bubble to your theme’s primary, secondary or tertiary colors, or a selection of other common colors.
  • Select different colors to help distinguish the messages you send from the messages sent to you.
  • Set the background opacity of the bubble - the larger the percent the deeper the color.
  • Choose whether to display the message bubble in a box shadow.
  • Optionally append text to the Message Reply button to distinguish it from the Topic Reply button.

You can select from a range of colors or select colors from your palate to match your theme. You can also set the background opacity of the bubble relative to the color and background.

Install this theme component

70 Likes

This is soooooo cool, @Rhidian!!!

I’m curious about something because I’ve never messed with plugins before…

Is it possible to allow a hex code with opacity, instead of just allowing system colors? No problem if that’s a bunch of extra work. Just curious.

What if I wanted to change the styling? of the shadow or other CSS. I’m not super savvy with Github and how all of that works, but I looked in your .git repository before copying it into my theme components. I do know how to write CSS. Can I make a copy of your plugin and then tweak the CSS file that you have and then upload this a new theme component with the styling that I want?

If you could point me to any instruction on how to modify a plugin that would be awesome. Or, I suppose I could just do a CSS override, on the front end. Is one option better than the other in terms of performance?

Again… Thank you so much for this… it’s just the solution I was looking for to differentiate DM’s from regular topics!

4 Likes

Thank you @jord8on . It’s great to get feedback like this.

I’ll make Drop shadow customisable as a setting option.

Regarding creating/editing you own CSS it’s easy. Load the component then click the Custom CSS/HTML section on the component settings.

Simplly edit the CSS sheet and click save. These are your own customisations. If you want to share them and incorporate them into the component for everyone to benefit you can simply post up the CSS to this topic in discourse meta - or as a longer term objective learn how to do pull requests in Github and/or fork the repository if you are making making more substantial changes.

3 Likes

Thank you @Rhidian!!!

:gift:

This is such a simple solution to make DM’s significantly distinguished from the standard topics on our forum.

I just asked a member what they thought of it and they were soooo happy to have it. They complimented the idea and the execution, so I’m just passing that along to you!!

6 Likes

I have updated this theme component so you can now enter your own colors using either

  • html color names ( black, white, maroon, red, purple, green, lime, olive, yellow, navy, blue, teal, aqua)
  • html color codes (#000000 black, #FFFFFF white etc. or short codes e.g. #CCC)
  • theme color names (primary, secondary, tertiary)

You can also enter your own message text colors in the same way to contrast with the bubble color.

The opacity setting allows you to blend the bubble color with the background, so that the color will change with your theme color settings - e.g. for Light and Dark themes.

This update is backwards compatible. To access this feature use the Check for Updates button on your theme settings.

9 Likes

Fantastic work on this @Rhidian! clapping

1 Like

I disabled borders with custom CSS and made only a subtle color change, which looks nice. It would be great if this had an option to modify the borders or just an on/off switch.

1 Like

Hi @ggurbet , please can you post a screen shot and share css you’ve changed?

@Rhidian, the borders was too distracting so I removed them. Ignore my colors :slight_smile:

Screenshot for the light theme:

Screenshot for the dark theme:

I added this to Common > CSS:

// Personal Message Bubble Component - No border
.archetype-private_message .topic-body .contents {
    border: none !important;
}
3 Likes

Love this!

Request

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

2 Likes

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

7 Likes

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:

image

2 Likes

@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