What CSS do you use to adapt the Fibery interface?

Get Help
1

Maybe you are also using a browser extension to adapt your Fibery interface?
(Such as ‘Stylebot’ or ‘Stylus’ or ‘User Javascript and CSS’ extension)
Please share your css code…

2

Hide relationship icons:

.a1pbmzc8 {
    display: none;
}

Before:
image

After:
image

1 Like
3

We don’t use any since it too complex to set-up for our (Fibery) clients.

But the ability to hide a relationship icon would make a lot of views so much better!

I really love icons; we even set them via script for some database entity to make the overall look visually attractive.

But for some databases it’s an overkill and there removing would be very handy.

1 Like
4

Hide the colored dot in list view

This may be improved. It successfully hides the dots and maintains the expand-collapse icon, but the vertical alignment is a bit off.

.b1k1fg4r > .Icon:first-child{
display: none !important;
}

Before:
image

After:

image

1 Like
5

I have the intuition that Custom CSS will at some point become an admin feature in Fibery. For many reasons already shared before. So it’s still useful to experiment and share I think.

If not, then this can be a sandbox for users to try out potential display improvements that the Fibery team may choose to integrate if people are excited about them.

2 Likes
6

Absolutely! I’m a bit jealous, would love it in my own workspace. But that looks odd if I create a screenshot our share my screen to show what we’ve built.

That would be awesome :star_struck:

2 Likes
7

Yuri, you might want to check out User Javascript and CSS extension it’s very powerful.

3 Likes
8

The main issue is that you then need to install it on every client you view the app on, which quickly becomes unmanageable for a decently sized team.

Custom admin CSS would be heaven, I agree with @Yuri_BC on this!

I haven’t yet delved into css changes for Fibery but have done so for Clickup and Coda.io. I’ll definitely keep an eye on this thread!

2 Likes
9

Full background color coding (calendar cards)

.c12jeug2 {
    width: 100%;
    opacity: 1;
}

.t8g2uh7.title-wrapper.card_container,
.t1mu84wd {
    z-index: 1;
}

Before:
image

After:
image

3 Likes
10

any css for text using like heading, bold, …it looks similar right now, do we have way to custom theme ?

11

Fonts and headers

Make bold bolder

Out of the box, bold is 600. This is insufficient since we can’t see the difference very well, so we make it 700, and optionally give it a color:

strong {
  font-weight: 700;
  font-style: normal;
  color: #E1DBAE; 
}

Styling headers (bigger and with color)

These are just examples.

h1{
  font-size: 32px;
  color: #FFF1C7 !important;
}

h2{
  font-size: 24px;
  color: #FF9138 !important;

}

h3{
 font-size: 20px;
 color: #B2FFE4 !important;
}
1 Like
12

Make entity view its fields column hidden by default

Currently the fields column always shows (when it contains fields) when opening an entity view and there is not setting to hide it by default.
The following css reverses that behavior: it is hidden by default and shows up when clicking the button.
image

.fr6lxd6 {
    grid-template-columns: 1fr;
}

.f1cp95kl.fr6lxd6 {
grid-template-columns: minmax(0,2.5fr) 1fr;
}

.c1j2n7kn {
    display: block;
}
1 Like
13

Make the panels resizable

After applying the css the bottom corner between two panels becomes a handle to resize them.
Note: the dragging appears a bit strange, please try it out and maybe suggest better ways to accomplish this:
C0i0Aeo

.a7o1qpl {
    flex-basis: unset;
    flex-grow: 1;
    flex-shrink: 1;
    resize: horizontal;
    overflow: auto;
    width: 50%;
}
2 Likes
14

Do we have any way to customize the text in rich text field, I mean markdown input like bullet point, number list, checkbox …

15

What about making the background of the board view a different color?

16

@Yuri_BC Can I get theme file from obsidian to paste to stylebot for setting fonts, bold, heading …

17

Markdown input? If you want to convert markdown, that is Support more in-line markdown formatting

For simply adjusting html list styles in fibery rich text, you could do for example:

Html list styles

.rqj97k8 li, .rqj97k8 ul {          /* all bullets, numbers, checkboxes etc */
    color: yellow;
}

.r16gx8dj li p {                       /* the text in the html lists */
    color: orange;
}

.checkbox { 
    border-radius: 0;               /* default is 4px */
}
1 Like
18

actually I mean I wanna outliner like Roam Research

19

“actually I mean I wanna outliner like Roam Research”

I wannit too! But outliner functionality is not just about appearance (which CSS handles) but also about behavior and data structure, which typically require backend logic and JavaScript. Post that as a dedicated feature request and refeference all the existing posts about it.

20

Converting CSS from Obsidian to Fibery is complex due to different HTML structures and class names, requiring manual adjustments and testing for compatibility.
Best is to keep it simple pick the style you like most, and check what HTML selectors in Obsidian correspond with the ones in Fibery.

1 Like