Developing Apps - CSS

Hey all,

I am going through the developer documentation and I was wondering if there was a way to use CSS in the apps I develop?

In my particular case, I am trying to create a product “card” which looks similar to this:

https://situlive.com/products/desktop-pcs

Any help would be greatly appreciated.

Hi! Welcome to our community :hugs:

Rocket.Chat Apps will only run at server side. The way to interact with the UI (Web or Mobile) is thru the UIKit blocks.

So under the hood, Rocket.Chat has a “protocol”, where you specify how some UI elements will be presented. From there it is rendered accordingly for web, mobile or desktop when triggered by the App.

So for the time being, you cannot provide custom ways to render elements other than the one provided by our UI Kit.

Let me know if this helps :slight_smile:

Hi,

I feared that was the case. I have already played around with the UI Kit and although it looks “ok”, it leaves a lot to be desired when trying to create more advanced blocks. I would, for example, like to be able to align the buttons or apply CSS (which you have said I can’t). I assume there is no way I can create my own custom blocks within my APP with their own CSS?

Cheers

For now there isn’t.

We have had some discussions around this. The problem is that, while the css will work ok on web versions, it will have none to little effect on the mobile land.

even though, there are some use cases where this comes handy, so we were discussing how we could allow custom rendering that would be provided by an App.

So considering a use case where a XML is sent to the channel, and when you have a app installed, it would be able to render that xml differently.

Anyway, those are in early stage discussions… :slight_smile: