What CSS do you use to adapt the Fibery interface?

Get Help
21

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

22

My Current Css for heading, bold, italic

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
image1110×467 15.9 KB

2 Likes
23

Here are my custom CSS tweaks:

Make the text easier to read and headings easier to distinguish

2023-11-24 at 19.00
2023-11-24 at 19.00850×1139 90 KB

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

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

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

25

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” chrome extension is very helpful to quickly identify the element:

26

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

1 Like