Personal Message Bubbles

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.

Discourse Personal Message Bubbles

:hammer_and_wrench: Git repo: https://github.com/naidihr/discourse-message-bubbles

:thinking: How do I install a Theme or Theme Component?

41 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!

3 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!!

5 Likes

One more thing… now that you have a clear start and end for each bubble message, do you think it would be good to get rid of the default line separator? (as illustrated below…)

4 Likes

Good idea @jord8on :+1:. I’ll add that in too.

4 Likes

:smile: No amount of blur can hide the iconic two thumbs Jim Halpert

image

10 Likes

Thank you sir!!

Here’s another thought… maybe it’s not a great idea… just taking this concept a little further… :stuck_out_tongue_winking_eye:

Would it be crazy hard to swap the place the avatar, name, title, etc. with the time the message was posted. Making this switch would almost perfectly replicate the experience that folks have when text messaging.

What I’m imagining is every message by me is on the right, for me, while the individual OR group I’m messaging with all appear on the left (keep avatar, name, etc) where it is.

Concept:

3 Likes

Just made tweaks to 3 lines in the component CSS, so mine looks like this now…

border: 1px solid #d9d9d9;

 -webkit-box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.2);;
 box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.2);;
4 Likes

That’s cool. I like it I’ll be logging in later to update the component.

3 Likes

I’ve made some updates. You can update the component by going to the settings and clicking check for updates.

Settings:

  • Set the colour 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.

The right align suggestion is more difficult than anticipated, in part because of the way the message threading works. I’ve left them inline for now but am distinguishing the posts through colour.

7 Likes

ZOMG!!! You totally nailed this!!! I don’t think you need to worry about the “right align” because this new “color” approach distinguishing messages you’ve sent vs. received is incredible!

My favorite part is how the message bubble changes based on the size of the message. THAT is a key factor that makes it feel like DMs vs. a standard topic thread.

The only other recommendation I’d make is to allow color hex codes for your message color and other message color. But even if that feature never came, I still could not be more happy with this incredible new component that you whipped up!!

5 Likes

Thanks @jord8on. Great feedback :smile: :+1:

Regarding

I can add hex colours but the effect may be misleading. The actual colour displayed is not the hex code - it is generated by blending the selected colour with the background colour - as set by the opacity%. This enables the bubble colour to adjust for the dark and light themes. I’ve provided a larger range of colours as well as the option using the main theme colours. Hopefully that should be enough :crossed_fingers:.

For advanced customisation users can edit their own HTML/CSS to set their own colours. The variables are defined on the CSS sheet.

$Your_message_bubble_color:
$Other_message_bubble_color:
2 Likes

Please edit that to say ‘theme url’ and provide a link to how to install a theme component.

1 Like

Updated thanks. I couldn’t see an easy way to demonstrate this on theme creator - as there are no messages by default. Any thoughts on how we could do that?

1 Like

Thanks for the heads up about the colors. Good points! :pray:

I noticed a couple other things…

#1 - Mobile needs some padding above bubble

e.g.

#2 - Remove last line separator?

This one is not as big of a deal. You removed the other separator lines, with you component. Removing this last one would be a nice touch.

e.g.

4 Likes

I’ve made those updates now. Please can you check? You will need to update the theme component. Thx.

5 Likes

Hi @Rhidian
The separation of messages into different post blocks seems to mess up the looks.
I am on Discourse 2.5.0.beta3, and your latest commit.

My settings:

Can you please look into this?

Thanks @GokulNC.

I’ve updated the Repo. The additional text should now display only on the reply button, not on the message bubbles. This also fixes the display on mobile devices. Please can you update the component and see if that fixes the issue for you?

1 Like

Thanks @Rhidian .
I pulled your changes into the theme-component, but all those issues in that screenshot still exists.

  • Appended text to “Reply” goes outside.
  • Each bubble is enclosed in a box (the box should be removed?)
  • The background of the full chat is green (my bubble color) [Not sure if a bug]