# What CSS do you use to adapt the Fibery interface?

**URL:** <https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421>\
**Category:** Get Help\
**Created:** [November 17, 2023, 4:20pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421 "2023-11-17T16:20:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 17, 2023, 4:20pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/1 "2023-11-17T16:20:29Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 17, 2023, 4:24pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/2 "2023-11-17T16:24:12Z")

</div>

# Hide relationship icons:

```auto
.a1pbmzc8 {
    display: none;
}

```

**Before:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/8/8e4ae2f6605f43a3cf6dcacf68d5a303c0008711.png)

**After:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/b/b6b04f92af70d4e8d3bb45f2af394a6eac1218e3.png)

---

<div class="post-metadata">

**Author:** ![YvetteLans](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yvettelans/32/6101_2.png) [@YvetteLans](https://community.fibery.io/u/YvetteLans)\
**Post date:** [November 17, 2023, 4:50pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/3 "2023-11-17T16:50:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 17, 2023, 4:55pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/4 "2023-11-17T16:55:50Z")

</div>

# 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.

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

```

**Before:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/4/4ae1414db1a756daa19a9cd5354606dd05cfb4ed.png)

**After:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/7/76de81671757a70f6202fc9cca3de3c21d485f11.png)

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 17, 2023, 5:02pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/5 "2023-11-17T17:02:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![YvetteLans](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yvettelans/32/6101_2.png) [@YvetteLans](https://community.fibery.io/u/YvetteLans)\
**Post date:** [November 17, 2023, 6:26pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/6 "2023-11-17T18:26:02Z")

</div>

> [@Yuri\_BC](#):
>
> So it’s still useful to experiment and share I think.

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.

> [@Yuri\_BC](#):
>
> Custom CSS will at some point become an admin feature in Fibery.

That would be awesome 🤩

---

<div class="post-metadata">

**Author:** ![Robert\_B](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/robert_b/32/7198_2.png) [@Robert\_B](https://community.fibery.io/u/Robert_B)\
**Post date:** [November 17, 2023, 7:19pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/7 "2023-11-17T19:19:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PsyRoelofs](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/psyroelofs/32/7163_2.png) [@PsyRoelofs](https://community.fibery.io/u/PsyRoelofs)\
**Post date:** [November 19, 2023, 10:39am UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/8 "2023-11-19T10:39:05Z")

</div>

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](http://Coda.io). I’ll definitely keep an eye on this thread!

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 20, 2023, 8:12pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/9 "2023-11-20T20:12:00Z")

</div>

# Full background color coding (calendar cards)

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

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

```

**Before:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/5/53e1b274898870f7fbfbc24adcbe95be4b405c69.png)

**After:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/1/18e4a4f58d1d91041991e35b3cd82e9cb2653011.png)

---

<div class="post-metadata">

**Author:** ![Minh\_Tri\_Do\_Hang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/minh_tri_do_hang/32/6791_2.png) [@Minh\_Tri\_Do\_Hang](https://community.fibery.io/u/Minh_Tri_Do_Hang)\
**Post date:** [November 21, 2023, 1:51am UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/10 "2023-11-21T01:51:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 22, 2023, 5:51pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/11 "2023-11-22T17:51:41Z")

</div>

# 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:

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

```

### Styling headers (bigger and with color)

These are just examples.

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

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

}

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

```

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 22, 2023, 10:21pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/12 "2023-11-22T22:21:00Z")

</div>

# 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](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/1/1fe2763d7406a8c2be0c23007cc19b6ca5759a89.png)

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

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

.c1j2n7kn {
    display: block;
}

```

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 23, 2023, 9:49am UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/13 "2023-11-23T09:49:18Z")

</div>

# 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](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/5/5aed6aef6a75e22e6c05516d7129f4bf743d65ed.png)

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

```

---

<div class="post-metadata">

**Author:** ![Minh\_Tri\_Do\_Hang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/minh_tri_do_hang/32/6791_2.png) [@Minh\_Tri\_Do\_Hang](https://community.fibery.io/u/Minh_Tri_Do_Hang)\
**Post date:** [November 23, 2023, 3:31pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/14 "2023-11-23T15:31:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![driddle](https://avatars.discourse-cdn.com/v4/letter/d/71e660/32.png) [@driddle](https://community.fibery.io/u/driddle)\
**Post date:** [November 23, 2023, 4:22pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/15 "2023-11-23T16:22:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Minh\_Tri\_Do\_Hang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/minh_tri_do_hang/32/6791_2.png) [@Minh\_Tri\_Do\_Hang](https://community.fibery.io/u/Minh_Tri_Do_Hang)\
**Post date:** [November 23, 2023, 4:46pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/16 "2023-11-23T16:46:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 23, 2023, 5:17pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/17 "2023-11-23T17:17:32Z")

</div>

> [@Minh\_Tri\_Do\_Hang](#):
>
> Do we have any way to customize the text in rich text field, I mean markdown input like bullet point, number list, checkbox …

Markdown input? If you want to convert markdown, that is [Support more in-line markdown formatting](https://community.fibery.io/t/support-more-in-line-markdown-formatting/3313)

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

# Html list styles

```auto
.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 */
}

```

---

<div class="post-metadata">

**Author:** ![Minh\_Tri\_Do\_Hang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/minh_tri_do_hang/32/6791_2.png) [@Minh\_Tri\_Do\_Hang](https://community.fibery.io/u/Minh_Tri_Do_Hang)\
**Post date:** [November 23, 2023, 5:32pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/18 "2023-11-23T17:32:46Z")

</div>

actually I mean I wanna outliner like Roam Research

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 23, 2023, 5:45pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/19 "2023-11-23T17:45:35Z")

</div>

“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.

---

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [November 23, 2023, 6:00pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/20 "2023-11-23T18:00:45Z")

</div>

> [@Minh\_Tri\_Do\_Hang](#):
>
> @Yuri_BC Can I get theme file from obsidian to paste to stylebot for setting fonts, bold, heading …

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.

[Next page](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421.md?page=2)