How would I go about creating a trivial plugin that adds a custom CSS bundle to mattermost? Are there any existing samples we could work from?
We have a few small tweaks we would like to add and patching mattermost seems like a terrible idea.
(In particular we want to hide online status in list and maybe tweak a few other tiny things)
There are some general instructions for creating a plugin here, as well as a link to a sample plugin that includes some CSS. I’ll pass this along to the community for ideas on how to specifically override those UI elements.
I did have a look at: https://github.com/jwilander/hovercardexample/tree/master/webapp but did not see any CSS in there. Am I not looking at the right place?
Hi @sam.saffron,
This should be the right link to an example plugin: https://github.com/jwilander/hovercardexample.
I’ll ask one of our engineers to take a look at the link you posted (https://github.com/jwilander/hovercardexample/tree/master/webapp) and see if it needs to be updated.
Let me know if this helps?
Hi @sam.saffron,
If I’m understanding you correctly, you mean you’re looking to override existing CSS classes used by the web app? We don’t have any “official” support for doing that with plugins, though it’s not impossible we’d add it in the future. It is possible to do, of course, since your JS is being included on the page and you can do whatever you like. For example, you could change an existing CSS class using JavaScript. You’d be doing that at your own risk, though, as we can’t guarantee those classes won’t change in a way that will break your plugin in a future version of Mattermost.
If I’m wrong, and you’re just looking to add CSS to your new components I suggest adding styles inline, similar to how I’ve done it in our Zoom plugin. That way you can make use of the user’s theme.
Some more documentation around plugins can be found here https://developers.mattermost.com/extend/plugins/
Yes this all makes sense, we will eat up an extra roundtrip and may get content flash a bit while restyling unless we can add in the tags to the initial page load.
Technically all we are looking to do is putting display: none on a couple of elements and switch the font to lato @import url('https://fonts.googleapis.com/css?family=Lato');
btw I tried the mdk and its complaining about node not having the --harmony switch which I feel has been removed.
Another question, is there any way to access particular settings for a plugin from the web app?
This is now done per:
https://github.com/discourse/mattermost-css-hacks
We much prefer Lato over the current font, we find it very hard to read, additionally we stripped off some elements we do not like.
I have some feedback on the plugin interface though:
Part of my “build” process creates a new id for the plugin, I do this cause you cache the bundle js on the client forever, my workaround feels absolutely terrible
It would be awesome if custom css was a bit easier to amend
It would be nice if you could specify a textarea in plugin settings
It would be nice if there was a flag that allowed you to ship said setting to the client
It’s a planned feature but not available currently. A workaround is extending the REST API with in your plugin with an endpoint that will return the plugin settings needed by the client. We’ve had other plugin builders successfully do that
Yeah I thought about this but it is not ideal. Cause then prior to changing CSS we will need one extra round trip to the server.
Perhaps if the server had some way of allowing us to add “text” into the <BODY> sections we could add a custom <SCRIPT> tag there to provide the globals.
I was able to disable printing (as much as one can) with the plugin @sam.saffron posted. Would be great to have a standard way to modify CSS without a plugin or building a custom webapp.