# 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:** 6\
**Page:** 2

<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, 6:04pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/21 "2023-11-23T18:04:55Z")

</div>

hmm, I really like several fonts from obsidian theme,  
How can I extract those to stylebot extension, especially some fonts are google font

---

<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, 6:54pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/22 "2023-11-23T18:54:56Z")

</div>

My Current Css for heading, bold, italic

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

em {
  color: #bac04f; 
}

h1{
  font-size: 29px;
  color: #F07171 !important;
}

h2{
  font-size: 25px;
  color: #FF9940 !important;

}

h3{
 font-size: 21px;
 color: #55B4D4 !important;
}

h4{
 font-size: 19px;
 color: #4CBF99 !important;
}
div.ProseMirror.d3bmse7.e1asc8ji.r16gx8dj.tp6imfe.gq0jvxg.g35wrl0.da62fg.lm8ld4x.rqj97k8.coqdyjn {
  font-family: Inter;
  
}
label.cod1kl3.object_editor_collapsible_field_container {
  font-family: Marhey;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 100;
  font-style: normal;
  line-height: 24px;
  color: #434343;
  background-color: #f3f3f3;
  
}

```

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

---

<div class="post-metadata">

**Author:** ![njyo](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/njyo/32/923_2.png) [@njyo](https://community.fibery.io/u/njyo)\
**Post date:** [November 24, 2023, 11:02am UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/23 "2023-11-24T11:02:33Z")

</div>

Here are my custom CSS tweaks:

**Make the text easier to read and headings easier to distinguish**

 ![2023-11-24 at 19.00](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/b/be5c4afbd8d80349ceab8d0ce2d4095cc793024a.png)

```auto
strong { font-weight: 700 !important;}

h1 { font-size: 3rem !important; font-weight: 900 !important; margin: 1.5rem 0 .25rem;}
h2 { font-size: 2.5rem !important; font-weight: 800 !important; margin: 1.25rem 0 .25rem; color: #074652 !important;}
h3 { font-size: 2rem !important; font-weight: 800 !important; margin: 1rem 0 .25rem;}
h4 { font-size: 1.75rem !important; font-weight: 700 !important; margin: .875rem 0 .25rem; color: #114678 !important;}
h5 { font-size: 1.5rem !important; font-weight: 700 !important; margin: .75rem 0 .25rem;}
h6 { font-size: 1.25rem !important; font-weight: 600 !important; margin: .625rem 0 .25rem; color: #21307A !important;}

p { font-size: 1rem !important; padding-bottom: 1rem !important;}
li p { padding-bottom: .25rem !important;}

```

**Make the left menu easier to scan**  
 ![2023-11-24 at 19.01](https://us1.discourse-cdn.com/flex020/uploads/fibery/original/2X/6/6951266f1e85c7fa3c83ab1d6c57cbaed103a909.png)

```auto
.tree_menu_item_wrapper a.MenuLink[href^="/fibery/space/"] .tree_menu_item {
    margin-top: .35rem !important;
    font-weight: 600;}

```

---

<div class="post-metadata">

**Author:** ![Lod](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/lod/32/8358_2.png) [@Lod](https://community.fibery.io/u/Lod)\
**Post date:** [February 23, 2024, 7:14am UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/24 "2024-02-23T07:14:51Z")

</div>

Hi, Yuri, the workaround isn’t work today.  
Do you have any idea?

---

<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:** [February 23, 2024, 8:02am UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/25 "2024-02-23T08:02:36Z")

</div>

> [@Lod](#):
>
> Hi, Yuri, the workaround isn’t work today.

The color coding class apparently has changed. The element is:  
`<div class="c16udp1 card_container c15yd6sx" style="--c15yd6sx-0: linear-gradient(to bottom, #d40915 0%, #d40915 100%);"></div>`

so you can see that the dynamic color part of this is `.c15yd6sx`, which is the new class instead of the previously used class.  
This element is actually exactly the same in the calendar view and board view (and probably more that I did not check) so it works for all.

FYI “[SelectorGadget](https://chromewebstore.google.com/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb)” chrome extension is very helpful to quickly identify the element:

---

<div class="post-metadata">

**Author:** ![Lod](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/lod/32/8358_2.png) [@Lod](https://community.fibery.io/u/Lod)\
**Post date:** [February 23, 2024, 3:06pm UTC](https://community.fibery.io/t/what-css-do-you-use-to-adapt-the-fibery-interface/5421/26 "2024-02-23T15:06:46Z")

</div>

Wow, thanks for the tool you suggest, it works.

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