# Increase fontsize under Notebook

**URL:** <https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063>\
**Category:** Support\
**Created:** [17 October 2021 11:26 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063 "2021-10-17T11:26:28Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [17 October 2021 11:26 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/1 "2021-10-17T11:26:28Z")

</div>

How do I increase the fontsize under the list of Notebooks on the left panel of Joplin / 2.4.12 / macOS.

Thanks.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [17 October 2021 11:44 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/2 "2021-10-17T11:44:59Z")

</div>

Add the below codes to your `userchrome.css` which can be found on the `preference` \> `Apperence` \> `Show Advanced Settings` \> ` Custom stylesheet for Joplin-wide app styles`

```auto

#react-root .bxcDPk {
    font-size: 13px;
}

```

Change the font size value to whatever you want then quit & restart Joplin. Then, you'll see it works.

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [17 October 2021 11:55 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/3 "2021-10-17T11:55:03Z")

</div>

> [@Nacandev](#):
>
> ```auto
> #react-root .bxcDPk {
> font-size: 13px;
> }
> 
> ```

Thanks for the reply.

When I select "Custom stylesheet for Joplin-wide app styles", a web browser opens up, not a text editor. So far I can't figure out howto workaround this. Under "Text editor command" I specified the path to Sublime, but that doesn't resolve this.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [17 October 2021 12:03 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/4 "2021-10-17T12:03:35Z")

</div>

I think this is about the defualt settings of what software to open a `.css` file on you computer, but I'm not a Mac user, so I can't tell you more details of it.

For alternative, you can directly add the Joplin folder to your text editor, then you can be easily acess to those files when open the text editor.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [17 October 2021 12:05 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/5 "2021-10-17T12:05:58Z")

</div>

@thelight welcome to the forum.

It would seem that for your system the file type `css` is associated with your browser. Either associate `css` with your text editor using your OS system tools or open a text editor and navigate to the css file (`~/.config/joplin-desktop/userchrome.css`). That's linux, I assume mac is similar.

The suggested class of `.bxcDPk` is probably not the best to use. This looks like one that is auto-generated during the build process and so may change between versions. Try:

```css
span.title, span.tag-label {
    font-size: 16px;
}

```

... to change the font size of the notebook titles _and_ the tag titles.

Alternatively you can use **View** \> **Zoom in / out** to generally increase font sizes across _all_ of Joplin.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [17 October 2021 12:35 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/6 "2021-10-17T12:35:15Z")

</div>

> [@dpoulton](#):
>
> The suggested class of `.bxcDPk` is probably not the best to use. This looks like one that is auto-generated during the build process and so may change between versions. Try:

Thank you for the correction.

> [@dpoulton](#):
>
> Alternatively you can use **View** \> **Zoom in / out** to generally increase font sizes across _all_ of Joplin.

It is my first time trying this function. It's great! Joplin always surprising me when every time I've found something that I missed.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [17 October 2021 13:23 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/7 "2021-10-17T13:23:49Z")

</div>

> [@Nacandev](#):
>
> It is my first time trying this function. It's great!

This is rather useful for those with higher resolution screens who want to make the text a bit bigger without delving into css. Most importantly the zoom factor selected is remembered and so survives restarts / reboots.

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [17 October 2021 13:57 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/8 "2021-10-17T13:57:21Z")

</div>

Thank you, really great to fix that issue.

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [17 October 2021 20:23 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/9 "2021-10-17T20:23:59Z")

</div>

Is it possible to increase the font size of the sub-notebook text too via CSS ?

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [17 October 2021 21:06 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/10 "2021-10-17T21:06:40Z")

</div>

I just tested this one is just fine:

```auto
span.title, span.tag-label {
    font-size: 16px;
}

```

Or, If you are talking about the notelist it would be use the below:

```auto

.note-list-item > a > span {
    font-size:16px;
}

```

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [17 October 2021 21:53 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/12 "2021-10-17T21:53:57Z")

</div>

Yes, I was referring to the notelist.

Handy tips!

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [21 October 2021 10:26 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/13 "2021-10-21T10:26:14Z")

</div>

How do I change the colour of the notebooks ? I'm not really an expert in CSS.

I'd like black text on a white background and to change the font to something which is easier on the eye.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [21 October 2021 11:25 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/14 "2021-10-21T11:25:48Z")

</div>

How about to use a Joplin built-in light theme? You can change it in the `preference` \> `Apperence` \> `Theme` \> `Light`. Is that what you need?

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [21 October 2021 19:23 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/15 "2021-10-21T19:23:33Z")

</div>

I am avoiding using a theme as these don't appear to honor the userchrome.css settings, thus why I was asking how to do this directly in CSS

Many thanks

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [21 October 2021 20:04 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/16 "2021-10-21T20:04:49Z")

</div>

If things are being overwritten by the theme you can put `!important` to make sure it works.  
e.g.

```css
span.cm-header.cm-header-1 {
    color: #FF0000 !important;
    }

```

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [21 October 2021 21:53 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/17 "2021-10-21T21:53:46Z")

</div>

That makes sense, but if you want white background and black text, you better start from a built-in light theme, then, you can do less css work.

About the font, you can edit the font-family through the `Appearance` settings, so, you're not really need to touch the css code.

And as Daeraxa said, if you found some of your CSS has been overwritten by the theme, you can just overwrite them back. Using the `!important` is the most easiest way to make that success.

---

<div class="post-metadata">

**Author:** ![thelight](https://avatars.discourse-cdn.com/v4/letter/t/57b2e6/32.png) [@thelight](https://discourse.joplinapp.org/u/thelight)\
**Post date:** [21 October 2021 22:22 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/18 "2021-10-21T22:22:53Z")

</div>

Thank you both for the reply's.

When I select the Light theme, the sidebar on the left (list of notebooks) still has a black background and white text.

The nice thing about configuring the font in the CSS is I can use this as a settings template, rather than having to manually configure each deployment of Joplin.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [21 October 2021 23:07 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/19 "2021-10-21T23:07:15Z")

</div>

Fine, give a try.

```auto
.​codeMirrorEditor​ .​CodeMirror​ ​*​ {
    font-family: "your font name", monospace !important;
} 

.sidebar {
   background-color: white !important;
} 

span.title, span tag-label {
    color: black !important;
} 

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [20 November 2021 23:07 UTC](https://discourse.joplinapp.org/t/increase-fontsize-under-notebook/21063/20 "2021-11-20T23:07:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.