Natively integrated custom CSS (and editor) for Fibery workspaces

This is something I’d love to see implemented :+1:

I understand why the Fibery team does not provide the option for custom CSS natively. However, I think there are real use-cases as described in this thread that would be enabled by adding custom CSS to Fibery. While only the Fibery team can add a native way to allow for custom CSS, I am planning to build a browser extension that would allow Fibery users to manage their custom CSS styles for their Fibery workspace.

Key features would be:

  • One click to enable or disable all custom CSS styles.
  • A curated set of Fibery CSS styles the user can choose from.
  • You can also add your own custom CSS styles.
  • Publish your style to the Fibery community so everyone can benefit from it.
  • Rules when to enable a style:
    • Only for specific spaces.
    • Only for specific databases.
    • Only for specific users.
    • Any combination of filters (and/ or) can be used.
  • Manage CSS styles for your team:
    • Admins can install, enable or disable CSS styles for their Fibery team.
    • Updates to the styles will be instantly applied to everyone in your team.

I already created some mockups for the browser extension:

Now, the only issue is that the user needs to have the browser extension installed. This might be no problem for individual users, but a major use-case would be to manage the Fibery styles for your entire team as an admin. In this case everyone would need to install the extension and I am not sure whether this is feasible.

So my question is: Would this extension be useful to you or would custom CSS styles only make sense if the Fibery team offers them natively?

2 Likes

I applaud you wanting to take this on!

Central management of Chrome extension is possible AFAIK, so this seems like a viable solution to me. But I’m not currently an enterprise-level admin:

I’m not sure if that could include specific organization-wide CSS preinstalled or not. I suppose it might depend in part on how you implement it. So perhaps that’s something to look into/keep in mind.

1 Like

Thanks for pointing this out, I was not aware of the option to manage chrome extensions for an organisation. This would make it much easier to roll out the extension :100:

I am going to build the extension in the next couple of days, should not be to difficult as there is a Chrome API for this. I’ll provide the extension and Styles Registry for free as it is not that much work and almost no hosting cost :slight_smile:

Excited to see what the Fibery community will build. As others already pointed out, this can be a good testing ground for the Fibery team to observe. If a styling takes off and proves to be useful, it can be added to Fibery.

Support for broken styles or updating styles if Fibery changes the UI would be on my end.

1 Like

Quick progress update: I got the Chrome extension to work! You can choose and install Fibery Tweaks, which will be applied to your Fibery UI. A tweak can consist of custom CSS and JavaScript, which will be loaded into the Fibery tab.

Now I have to go through the Chrome Web Store publishing process, which will probably be very painful :upside_down_face:

Anyways, until the extension is approved I will build some more useful tweaks that were requested by the community.

Cheers,
Ben

3 Likes

One of the problems with trying to do this with chrome extensions is that many organizations disable chrome add-ons and there can be a (months long) process of trying to whitelist a particular plugin and there is always a high chance it won’t get approved. Being able to do this from within fibery would eliminate this problem while also ensuring it is applied everywhere.

The second best choice I think is to be able to add add-ons/plugins like this to the fibery desktop apps.

Valid point, best case would be to have this natively in Fibery. However, I get that an official custom CSS support by Fibery would create the expectation that customer support is provided.

I could also remove the need for a browser extension by offering these Fibery UI Tweaks as part of a white-labelling solution: If the Fibery user has their own domain, they can point it to one of my servers, which essentially just proxies all requests to the Fibery servers. However, I could inject the Fibery tweaks into the Fibery frontend when proxying the request, so that no extension is necessary.

I will experiment with this in the upcoming days. :test_tube:

2 Likes

Wouldn’t a proxy-based solution be at least as much of a security concern?

@Oshyan that is correct, the proxy would not change the base problem that larger organizations have to approve an extension first. I tried to implement a proxy but it was not straightforward, so I dropped the idea.

Anyways, I managed to published the Chrome Extension in the Chrome WebStore :tada:

I posted about it here :slight_smile:

3 Likes