What CSS do you use to adapt the Fibery interface?

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

My Current Css for heading, bold, italic

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

em {
  color: #bac04f; 

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

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


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

 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;

1 Like

Here are my custom CSS tweaks:

Make the text easier to read and headings easier to distinguish

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;}

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

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:

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

1 Like