# New sidebar custom CSS

**URL:** https://meta.discourse.org/t/new-sidebar-custom-css/250613
**Category:** Development
**Created:** [January 3, 2023, 7:22pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613 "2023-01-03T19:22:55Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![10ColorsTenkara](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/10colorstenkara/32/94154_2.png) [@10ColorsTenkara](https://meta.discourse.org/u/10ColorsTenkara)
#### Post date: [January 3, 2023, 7:22pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/1 "2023-01-03T19:22:55Z")

</div>

Continuing the discussion from [Try out the new sidebar and notification menus!](https://meta.discourse.org/t/try-out-the-new-sidebar-and-notification-menus/238821/219):

@Canapin Please forgive the ignorant question, it’s been awhile since I’ve been here on meta and I’ve not made many CSS changes to my instance in the past couple of years.

What CSS did you use to customize the unread/new/draft in the sidebar? I’ve been searching and not sure what to use.

Thanks much in advance.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 3, 2023, 8:26pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/2 "2023-01-03T20:26:11Z")

</div>

> [@10ColorsTenkara](#):
>
> I’ve been searching and not sure what to use.

That’s expected since I didn’t make any changes to my sidebar. 😄  
Other users had similar displays with unread numbers, see [Try out the new sidebar and notification menus! - #240 by MarcP](https://meta.discourse.org/t/try-out-the-new-sidebar-and-notification-menus/238821/240)

I notice there are now dots instead.

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/6/f/76f91bae11137914e92e10e9313c5f3df388832c.png)

So I guess the sidebar code was changed at some point during the development.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 3, 2023, 9:02pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/3 "2023-01-03T21:02:53Z")

</div>

> [@Canapin](#):
>
> So I guess the sidebar code was changed at some point during the development.

Yeah, it changed here 🙂

> [@Sidebar topic list links prefer unread and new over latest](https://meta.discourse.org/t/sidebar-topic-list-links-prefer-unread-and-new-over-latest/239575/82):
>
> @awesomerobot and @tgxworld just merged this pull request, which I think should address some of the above feedback: Now when using the default user preference, you see this: And when you use the “power user” preference, you see this: So, casual users have a bit less noise in their sidebar, and for everyone, what you see in the li…

---

<div class="post-metadata">

### Author: ![10ColorsTenkara](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/10colorstenkara/32/94154_2.png) [@10ColorsTenkara](https://meta.discourse.org/u/10ColorsTenkara)
#### Post date: [January 3, 2023, 10:36pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/4 "2023-01-03T22:36:49Z")

</div>

Interesting. In one of the split off topics, they point out that the dots or unread count can now be set by users. It can be found under Preferences\>Sidebar\>Navigation. I wish it could be set as default by admin. Users on my instance are not tech savvy and would never find that setting or know it exists.

Both here on meta.discourse and on my instance it looks like the following for me, in grey text.

 ![New-sidebar-custom-CSS-support-Discourse-Meta](https://global.discourse-cdn.com/meta/original/4X/b/2/d/b2d37c9a5080aed8e71989b002484698b754259c.png)

I think they are much easier to see with some other color text.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 4, 2023, 9:28am UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/5 "2023-01-04T09:28:14Z")

</div>

Hello,

> [@10ColorsTenkara](#):
>
> would never find that setting or know it exists

I think create a topic where you introduce the new sidebar could be a good solution for this. You can easily navigate your users to the correct place with a link, using the `/my/` parameter. 🙂

`yoursite.com/my/preferences/sidebar`

Like this: [https://meta.discourse.org/my/preferences/sidebar](https://meta.discourse.org/my/preferences/sidebar)

* * *

> [@10ColorsTenkara](#):
>
> I think they are much easier to see with some other color text.

Yes, it’s grayed out to make it look less like a link. This is possible to change by adding some CSS to a component. 🙂

For example:

Common \> CSS

```scss
// Sidebar new/unread color

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    .sidebar-section-link-content-badge {
      color: var(--tertiary);
    }
  }
  // don't change the review link color
  .sidebar-section-link-review {
    .sidebar-section-link-content-badge {
      color: var(--danger);
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![10ColorsTenkara](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/10colorstenkara/32/94154_2.png) [@10ColorsTenkara](https://meta.discourse.org/u/10ColorsTenkara)
#### Post date: [January 4, 2023, 3:34pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/6 "2023-01-04T15:34:56Z")

</div>

> [@Don](#):
>
> I think create a topic where you introduce the new sidebar could be a good solution for this. You can easily navigate your users to the correct place with a link, using the `/my/` parameter. 🙂

Lovely, thank you. Not sure why I didn’t think of that. 🤦🏾

> [@Don](#):
>
> Yes, it’s grayed out to make it look less like a link. This is possible to change by adding some CSS to a component.

Brilliant! Exactly what I was looking for!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [February 3, 2023, 3:35pm UTC](https://meta.discourse.org/t/new-sidebar-custom-css/250613/7 "2023-02-03T15:35:13Z")

</div>

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