# How to change notebook color in userchrome.css?

**URL:** <https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823>\
**Category:** Support\
**Created:** [11 March 2020 02:02 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823 "2020-03-11T02:02:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![4SM](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/4sm/32/2805_2.png) [@4SM](https://discourse.joplinapp.org/u/4SM)\
**Post date:** [11 March 2020 02:02 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/1 "2020-03-11T02:02:46Z")

</div>

Hi everyone,  
How to change notebook color in userchrome.css?  
😅thanks.

---

<div class="post-metadata">

**Author:** ![uxamanda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/uxamanda/32/6786_2.png) [@uxamanda](https://discourse.joplinapp.org/u/uxamanda)\
**Post date:** [11 March 2020 07:04 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/2 "2020-03-11T07:04:46Z")

</div>

You mean the background color of the currently selected notebook, right?

I may be mistaken, but I couldn’t find a way to do this via CSS. It seems like it would be styling `list-item-container`, but the background color for that item is being applied via element styling vs a class.

Div of currently selected notebook

```auto
<div class="list-item-container" background-color: rgb(1, 63, 116);" draggable="true" folderid="x..." style="box-sizing: border-box; height: 25px; display: flex; align-items: stretch; >

```

Div of Non-selected notebook

```auto
<div class="list-item-container" background-color: rgba(200, 200, 200, 0);" draggable="true" folderid="y..." style="box-sizing: border-box; height: 25px; display: flex; align-items: stretch;>

```

Ideally the first element would have a `class="selected"` that was changing the background color, or even just there as a styling hook.

Curious if anyone else has found a work around.

---

<div class="post-metadata">

**Author:** ![4SM](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/4sm/32/2805_2.png) [@4SM](https://discourse.joplinapp.org/u/4SM)\
**Post date:** [11 March 2020 13:00 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/3 "2020-03-11T13:00:19Z")

</div>

Like this. color code notebook.  
 ![](https://i.imgur.com/ZTHTssU.png)

---

<div class="post-metadata">

**Author:** ![jamedeus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jamedeus/32/2785_2.png) [@jamedeus](https://discourse.joplinapp.org/u/jamedeus)\
**Post date:** [14 March 2020 00:40 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/4 "2020-03-14T00:40:11Z")

</div>

I’d be surprised if there was a way to do that in css since Joplin doesn’t support setting different colors for different notebooks. Usually to do something like that you would give each notebook a different class in html, then in css you would apply a different style to each class. But since Joplin styles them all the same I bet they all have the same class, so you can only change all of them in CSS. But I haven’t looked at source and I’m not the greatest at CSS so could be missing something!

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [14 March 2020 01:31 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/5 "2020-03-14T01:31:31Z")

</div>

You can set the color for all notebooks, but not for individual ones.

There was a PR open to add an icon to a notebook, but we had to defer the merge. This PR could be used to also add individual coloring. But this is a long way to go, because we have to develop a dialog framework first. (The one we are using is rather limited.)

---

<div class="post-metadata">

**Author:** ![4SM](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/4sm/32/2805_2.png) [@4SM](https://discourse.joplinapp.org/u/4SM)\
**Post date:** [14 March 2020 01:52 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/6 "2020-03-14T01:52:41Z")

</div>

Thank you 😀

---

<div class="post-metadata">

**Author:** ![4SM](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/4sm/32/2805_2.png) [@4SM](https://discourse.joplinapp.org/u/4SM)\
**Post date:** [14 March 2020 01:53 UTC](https://discourse.joplinapp.org/t/how-to-change-notebook-color-in-userchrome-css/6823/7 "2020-03-14T01:53:03Z")

</div>

Thank you 😊