# Personal Message Bubbles
**URL:** https://meta.discourse.org/t/personal-message-bubbles/147994
**Category:** Theme component
**Tags:** deprecated
**Created:** [April 13, 2020, 11:08pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994 "2020-04-13T23:08:13Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [April 13, 2020, 11:08pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/1 "2020-04-13T23:08:13Z")
> ❗ The functionality of this Theme Component was [added to Discourse core from version 2.8.0 onwards](https://meta.discourse.org/t/2-8-0-beta4-security-release-new-pm-style-and-more/197878). 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.
| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [github.com/naidihr/discourse-message-bubbles](https://github.com/naidihr/discourse-message-bubbles) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [April 14, 2020, 6:21pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/2 "2020-04-14T18:21:58Z")
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!
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [April 14, 2020, 6:36pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/3 "2020-04-14T18:36:12Z")
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.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [April 14, 2020, 7:01pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/4 "2020-04-14T19:01:04Z")
Thank you @Rhidian!!!
🎁
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!!
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [April 26, 2020, 9:08pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/26 "2020-04-26T21:08:58Z")
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.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [May 3, 2020, 10:19pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/27 "2020-05-03T22:19:49Z")
Fantastic work on this @Rhidian!
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [March 8, 2021, 2:26pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/54 "2021-03-08T14:26:11Z")
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.
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [March 8, 2021, 2:50pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/55 "2021-03-08T14:50:57Z")
Hi @ggurbet , please can you post a screen shot and share css you’ve changed?
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [March 8, 2021, 3:04pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/56 "2021-03-08T15:04:46Z")
@Rhidian, the borders was too distracting so I removed them. Ignore my colors 🙂
Screenshot for the light theme:
Screenshot for the dark theme:
I added this to `Common > CSS`:
```css
// Personal Message Bubble Component - No border
.archetype-private_message .topic-body .contents {
border: none !important;
}
```
---
### Author:  [@debryc](https://meta.discourse.org/u/debryc)
#### Post date: [March 8, 2021, 3:20pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/57 "2021-03-08T15:20:25Z")
Love this!
Request
- Could quaternary color be made available, too?
- I noticed a spelling mistake in the directions. `Tertiary` is spelled `teriary` instead
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [March 8, 2021, 9:07pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/58 "2021-03-08T21:07:29Z")
Very cool. I like it 😁
I’ve added in the option to remove the border - and the quaternary option and fixed the tertiary spelling.
Thank you @ggurbet @debryc
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [March 8, 2021, 9:10pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/59 "2021-03-08T21:10:28Z")
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.
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [March 9, 2021, 8:53am UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/60 "2021-03-09T08:53:53Z")
> [@ggurbet](#):
>
> 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.
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?
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [March 9, 2021, 8:57am UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/61 "2021-03-09T08:57:42Z")
No, it doesn’t. Just a few minor CSS modifications does the trick.
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [March 9, 2021, 10:26am UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/62 "2021-03-09T10:26:44Z")
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.
> [@Restrict editing of remote themes](https://meta.discourse.org/t/restrict-editing-of-remote-themes/170051):
>
> For quite a while, best practice has been to avoid editing themes installed from a remote Git repository locally on Discourse. Any changes to theme code or uploads get wiped out when updating the theme from the remote repo. [https://github.com/discourse/discourse/commit/65e123498b4f8f260a8461e48995a3ca166b605e](https://github.com/discourse/discourse/commit/65e123498b4f8f260a8461e48995a3ca166b605e) In this commit, we’ve removed the ability to locally edit a remote theme and are now enforcing this best practice in Discourse. What happens if I have a remote theme with local changes? N…
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [March 9, 2021, 11:16am UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/63 "2021-03-09T11:16:37Z")
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.
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [March 10, 2021, 9:46pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/64 "2021-03-10T21:46:22Z")
Hello and thanks for this delightful theme component. 🏆
**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:
> 
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [March 22, 2021, 9:46am UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/65 "2021-03-22T09:46:39Z")
@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.
---
### Author:  [@Mohammad1](https://meta.discourse.org/u/Mohammad1)
#### Post date: [April 4, 2021, 5:30pm UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/66 "2021-04-04T17:30:33Z")
Great component!
Do we have something similar for actual posts in topics? I mean a component that makes posts look like message bubbles!
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [April 5, 2021, 10:41am UTC](https://meta.discourse.org/t/personal-message-bubbles/147994/67 "2021-04-05T10:41:04Z")
I’ve added in the option to prepend text to the Reply button. This also hides the svg reply arrow before the Reply text.
[Next page](https://meta.discourse.org/t/personal-message-bubbles/147994.md?page=2)