Change color of personal messages

For some time I borrowed @ChrisBeach’s CSS snippet, so I converted it into a theme component, find the result here:


What it does

It changes the appearance of the page when a personal message is being read:

  • the head banner color (with a gradient),
  • the font color,
  • the background color,
  • the title color,
  • by adding some text after reply.

All these changes are optional and can be toggled with their on/off setting. The main «personal messages» color can also be changed with a setting. To tweak the different colors, edit the top part of the CSS file.

17 Likes

Thank you, @oca!

I’ve found that this only works with color names, not Hex color codes. This makes it tricky to match to a colour palate. From looking at the CSS and the way colours are mixed, I’m guessing it wouldn’t be very easy to change this. Can anyone prove me wrong?

2 Likes

It appears that this is a Theme and not a Theme “Component” but please correct me if I’m wrong.

I’m already using a Theme that I’ve completely customized, and only one theme can be used at a time, and you can allow users to toggle from one theme to another… is that right?

It’s my understanding that theme COMPONENTS allow you to apply the component to your active/main/default theme. At least this is how the other theme components seem to work for me. In the theme Components, there’s a box that says " Include component on these themes" which allows you to apply the component to your default theme.

Would it be possible to turn this into a component so I can keep my main/defualt theme active, while enability these customizations for the personal messages or DMs/PMs ?

2 Likes

I remember sending PRs to all the theme components we have here on Meta when we made the change that differentiates between themes and theme components.

I think this one slipped through the cracks because it was a reply to some other topic and has since been moved to its own topic in the #theme category.

@oca You only need to add one line to this “theme” to make it function as a theme component. You need to add

"component": true

to the about.json file of your component like so

{
  "name": "Private messages with color",
  "about_url": "https://framagit.org/oca/discourse-theme-colored-private-messages   ",
  "license_url": "https://framagit.org/oca/discourse-theme-colored-private-messages/blob/master/LICENSE",
+ "component": true,
   "assets": {
        "asset-variable": "assets/background.svg"
   }
}

Once you do that, it should work just like any other component and we can then add the theme-component tag to this topic.

6 Likes

In the meantime @Rhidian taught me a new trick that you can convert a theme to a component or vise versa, using the “Convert” button…

2 Likes

I would also love to see the ability to use a HEX code here!

3 Likes

Done !
Thanks for the tips.

5 Likes

I’ll have a look.
It could be worth adding that as a component parameter now that we can do that.
Can’t promise anything, i’m still learning that stuff.

6 Likes

Nice :+1:

I’ve added the tag to this topic. When you get a chance, can you please add a screenshot or two to the OP in this topic? No rush, but it makes it easier to see the changes this component makes.

6 Likes

FYI - says that about.json is invalid

Am I right in thinking that the correct git URL is just:
https://framagit.org/oca/discourse-theme-colored-private-messages
?

1 Like

I think the issue is that there’s an extra comma at the end of about.json

Screen Shot 2020-05-11 at 9.29.37 PM

5 Likes

Thanks for that !

But no thanks for those who built the json norm…

4 Likes