New sidebar custom CSS

[10ColorsTenkara]

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.

[Canapin (Coin-coin le Canapin)]

@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

I notice there are now dots instead.

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

[Don]

@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

@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 links …

[10ColorsTenkara]

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.

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

[Don]

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

---

@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

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

[10ColorsTenkara]

@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!