Continuing the discussion from Try out the new sidebar and notification menus!: @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.

Hello, [image] 10 Colors Tenkara: 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. :slightly_smiling_face: yoursite.com/my/preferences/sidebar Like this: https://meta.discourse.org/my/preferences/sidebar [image] 10 Colors Tenkara: 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. :slightly_smiling_face: For example: Common > CSS // 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); } } }

[image] 10 Colors Tenkara: I’ve been searching and not sure what to use. That’s expected since I didn’t make any changes to my sidebar. :smile: Other users had similar displays with unread numbers, see Try out the new sidebar and notification menus! - #240 by MarcP I notice there are now dots instead. [image] So I guess the sidebar code was changed at some point during the development.

[image] Coin-coin le Canapin: So I guess the sidebar code was changed at some point during the development. Yeah, it changed here :slightly_smiling_face: [image] Sidebar topic list links prefer unread and new over latest UX @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: [Screenshot 2022-11-02 at 10.57.25 AM] [Screenshot 2022-11-02 at 10.57.29 AM] And when you use the “power user” preference, you see this: [Screenshot 2022-11-02 at 10.57.48 AM] [Screenshot 2022-11-02 at 10.57.38 AM] So, casual users have a bit less noise in their sidebar, and for everyone, what you see in the li…

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] I think they are much easier to see with some other color text.

[image] 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. :slightly_smiling_face: Lovely, thank you. Not sure why I didn’t think of that. :person_facepalming:t5: [image] 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!

New sidebar custom CSS

Development

10ColorsTenkara (10 Colors Tenkara) January 4, 2023, 3:34pm 6

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

Brilliant! Exactly what I was looking for!

Topic		Replies	Views
Sidebar topic list links prefer unread and new over latest UX sidebar	92	5130	April 12, 2023
The "new new" has been enabled on Meta Announcements sidebar	31	3131	December 6, 2023
How to change unread count to a dot in navigation sidebar? Product Support sidebar	3	259	June 8, 2025
Category/tag sidebar notifications Product Support sidebar	2	334	April 7, 2024
Description of /latest and /new pages Product Support	12	1011	June 23, 2023

New sidebar custom CSS

Related topics