Take Full Control of Your Fibery UI – Introducing Fiberflow Tweaks!

Hey everyone,

I’ve developed a Chrome extension called Fiberflow Tweaks that allows you to customize Fibery’s UI with your own CSS. This tool lets you tweak the interface to better suit your preferences and workflow.

:sparkles: Key Features

Apply Custom CSS: Personalize the UI by injecting your own styles.

Enable/Disable Styles: Easily toggle your customizations on or off.

Install Pre-Made Tweaks: Access a public repository of tweaks to quickly change small parts of the Fibery UI.

:pen: List of Pre-Made Tweaks

  • Better Timeline Today Marker: Make the timeline today marker more visible. Increase the width and place the today marker in front of the timeline events.
  • Add View Name to Tab Title: Add the view name to the entity tab title.
  • Field background color: Set the background color of a field.
  • Border around Rich-Text Field: Add a border around the Rich-Text field.
  • Custom Branding: Customize the branding of your workspace.
  • Table header wrapping: Allow table view header field names to wrap into multiple lines.
  • Set Entity Icon as Tab Favicon: Set the entity icon/ avatar as the tab’s favicon. For pages, set the page icon or emoji as the tab’s favicon.

If you’ve been looking to adjust Fibery’s interface to better match your needs, this extension might be helpful. It’s free to use and there is no login required. I’d love to hear your feedback or suggestions for additional features.

You can download Fiberflow Styles here: Fiberflow - Chrome Web Store

Looking forward to your thoughts and any styles you create!

@Fibery-Team: I understand the concerns around supporting custom CSS, especially considering how extensive and varied the customizations can be. You’re right that there’s a potential for things to break, and I want to reassure you that I’m prepared to take on the responsibility of handling support for this extension.

10 Likes

Thats amazing, thank you Benjamin!
Could you integrate viewer context, similar to what I posted in the past? This opens up a massive amount of new feature possibilities.

Prototype: Chrome extension to facilitate viewer context - API & Programming - Fibery.io Community

@Yuri_BC thanks for the feature suggestion, I really like your idea and will implement it! The first version will display everyone who is currently looking at an entity or document :slight_smile: I’ll keep you posted about the progress! :rocket:

1 Like

Presumably it requires every user to be using the Chrome browser + extension?

1 Like

Exactly right, this is the biggest downside of this approach. However, maybe it is not a bad thing that users have to opt-in by installing the extension.

I remember encountering some challenges with the Viewer Context prototype, which required some decisions, such as if a user has two panels open in their browser, the last one opened is the ‘active’ entity being viewed. This makes most sense, but may need some testing on the impact of the features that we develop that depend on the viewer context.

Also, probably good to dedicate separate forum topics for each FiberFlow Tweak?

1 Like

Here is a feature that I have been proposing for years: hide empty collection fields. This could now be included as FiberFlow Tweak.
It creates a bit of a challenge how to allow users to turn on/of visibility in order to add an entity to a hidden field, but I think we can figure that out.

1 Like

Show-Hide Empty Collection Fields setting - Fibery Showcase - Fibery.io Community

1 Like

I’ve set up a public GitHub repository where you can now contribute your own Fibery Tweaks or suggest improvements to existing ones:

If you’ve built something cool or have ideas you’d like to share, this is the place! Whether it’s a new tweak, a fix, or just feedback—every contribution is welcome.

If you run into any issues or want to brainstorm ideas together, feel free to reach out :slight_smile:

Looking forward to your contributions!

5 Likes

I think there is quite some potential in FiberyFlow, but the bottleneck for users is the use of the Chrome extension when one or more tweaks need to be enabled, disabled, tested, etc.

What if we allow users to manage the tweaks through a custom FiberFlow Fibery plugin, so that we have a tweaks database and entities, and it only requires enabling the chrome extension once, and then the rest is handled directly in fibery?
That would be much cleaner and easier to handle.

I did it in the past through dynamically adjusting CSS based on settings defined at a higher level in the HTML structure. Using data attributes (e.g., data-theme=“dark”) with CSS attribute selectors, CSS custom properties (e.g., --primary-color) modified inline or via JavaScript, inline tags with server-side or client-side logic. Or by toggling classes on parent elements like to style descendants. JavaScript can also read settings and update styles dynamically.

1 Like

thanks :heart: Glad you see the potential in community-driven tweaks to the Fibery-UI as well!

I absolutely see the value in making it easier for users to add and manage tweaks. The main challenge is that JavaScript in tweaks must go through the Chrome Web Store review process - with Manifest V3, it’s no longer possible to inject dynamic JS. That’s actually a good thing from a security standpoint, since it ensures that only reviewed and trusted code runs in the FiberFlow extension. For now, I think it’s best if users suggest tweaks here in the forum or contribute via the GitHub repo, and I can include them in the extension :slight_smile: I will make sure I add the tweaks in a timely manner so I do not become the bottleneck here!

I like this idea as well. So instead of GitHub or the Community Forum, users can suggest Tweaks and custom CSS/ JS via a dedicated Fibery database. However, I would like to have a manual review step - so I can guarantee the quality of each Tweak - before I add it to the extension. People trust that everything works when installing the Fiberflow extension, and I would like to deliver on that promise as much as possible :slight_smile:

I agree.

What I had in mind is to move the enabling and disabling of the officaial tweaks as well as creation of custom tweaks in the Fibery workspace.

So the ‘official’ FiberFlow tweaks can still have their own development and verification workflow (similar to importing a space template from your FiberFlow server), but users can add their own tweaks, just like they can do now in the chrome extension under the ‘+ Create Your Own Tweak’ button.

1 Like

@derbenoo Is fiberflow still available? I was interested in the advanced automation features, particularly enabling webhooks.

I tried to make an account on the fiberflow website and i got the error that ‘Fibery wasn’t available’. I tried both creating an account through google as well as the direct API Key method, neither worked.

Also, is it free or is there a monthly subscription? didnt see anything about pricing.

Hey Ethan,

Fiberflow is currently unavailable as I am doing a major redesign. Talking to Fibery users, I discovered that people want to extend the functionality of existing Fibery Automation Rules instead of using a separate Automation engine. So I am currently building that.

I expect a release including the Webhook Trigger end of this month. I will offer a free tier with a certain number of trigger executions and a paid plan for higher limits :slight_smile:

5 Likes

Some other ideas:

The hight of a collection field becomes often very long, e.g. when using list view. To keep them short and compact, especially when users want to see the last few items (e.g. ‘recent items’) the max amount of visible items per collection field could be set. This is currently not possible in fibery.

I’m not sure if this actually can be done without issues using css and html injection /javascript, but it would be great if its possible. I can help prototype, it would make the UI such much easier to work with:

The ability to drag-drop panels, minimize (pin) panels, but most importantly to allow an entity view panel to appear at the left, instead of always right.

Fibery currently enforces the breadcrumb left-to-right sequence of new panel creation. This makes no sense to me, and there have been some requests about this.

This is great, thank you! Do you have a list of selectors/classes to help write our own styles?

1 Like

That sounds very doable, I will build a Fibery Tweak for this over the weekend :hot_beverage:

I see your point with the side-by-side panels. I think it is doable with JS & CSS, just takes some time to build. I am currently focusing on the new release of Fiberflow (Sites & Automation Triggers), so a large tweak like this would have to be created by someone from the community :slight_smile:

Hey @driddle, I do not really have a list of selectors/ classes. I pretty much just use the Chrome DevTools and inspect the Fibery UI to get the necessary selectors for a style. However, I try to avoid the auto-generated classes (like c6shb0) as they are likely to change in the future.

However, you can check out the common selectors I use in the source code of the existing tweaks (public GitHub repository).

Do you have a specific tweak in mind? :slight_smile: