# Creating a plugin that adds a custom CSS bundle
**URL:** https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808
**Category:** Troubleshooting
**Created:** [April 16, 2018, 9:19pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808 "2018-04-16T21:19:10Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@sam.saffron](https://forum.mattermost.com/u/sam.saffron)
#### Post date: [April 16, 2018, 9:19pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/1 "2018-04-16T21:19:10Z")
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)
---
### Author:  [@paulrothrock](https://forum.mattermost.com/u/paulrothrock)
#### Post date: [April 17, 2018, 5:28pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/2 "2018-04-17T17:28:42Z")
There are some [general instructions for creating a plugin here](https://docs.mattermost.com/administration/plugins.html), 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.
---
### Author:  [@sam.saffron](https://forum.mattermost.com/u/sam.saffron)
#### Post date: [April 17, 2018, 10:25pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/3 "2018-04-17T22:25:23Z")
I did have a look at: [https://github.com/jwilander/hovercardexample/tree/master/webapp](https://github.com/jwilander/hovercardexample/tree/master/webapp) but did not see any CSS in there. Am I not looking at the right place?
---
### Author:  [@amy.blais](https://forum.mattermost.com/u/amy.blais)
#### Post date: [April 18, 2018, 1:42pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/4 "2018-04-18T13:42:39Z")
Hi @sam.saffron,
This should be the right link to an example plugin: [https://github.com/jwilander/hovercardexample](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](https://github.com/jwilander/hovercardexample/tree/master/webapp)) and see if it needs to be updated.
Let me know if this helps?
---
### Author:  [@jwilander](https://forum.mattermost.com/u/jwilander)
#### Post date: [April 18, 2018, 2:06pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/5 "2018-04-18T14:06:44Z")
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](https://stackoverflow.com/q/1409225). 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](https://github.com/mattermost/mattermost-plugin-zoom/blob/master/webapp/components/share_meeting_modal/share_meeting_modal.jsx#L194). 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/](https://developers.mattermost.com/extend/plugins/)
---
### Author:  [@sam.saffron](https://forum.mattermost.com/u/sam.saffron)
#### Post date: [April 18, 2018, 9:07pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/6 "2018-04-18T21:07:35Z")
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.
---
### Author:  [@sam.saffron](https://forum.mattermost.com/u/sam.saffron)
#### Post date: [April 19, 2018, 2:38am UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/7 "2018-04-19T02:38:15Z")
Another question, is there any way to access particular settings for a plugin from the web app?
---
### Author:  [@sam.saffron](https://forum.mattermost.com/u/sam.saffron)
#### Post date: [April 19, 2018, 7:18am UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/8 "2018-04-19T07:18:31Z")
This is now done per:
[https://github.com/discourse/mattermost-css-hacks](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
---
### Author:  [@jwilander](https://forum.mattermost.com/u/jwilander)
#### Post date: [April 23, 2018, 12:09pm UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/9 "2018-04-23T12:09:52Z")
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
---
### Author:  [@sam.saffron](https://forum.mattermost.com/u/sam.saffron)
#### Post date: [April 26, 2018, 3:29am UTC](https://forum.mattermost.com/t/creating-a-plugin-that-adds-a-custom-css-bundle/4808/10 "2018-04-26T03:29:14Z")
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 `` sections we could add a custom `