In a discussion about the color of the “new messages circle” in the chat icon on the header, icaria36 notes that after customizing their forum, the circle blends with the icon, making notifications hard to spot. They wish to change this color without altering other site colors, ideally matching the default blue used for new topics. chapoi explains that the unread message indicator color is derived from the --tertiary-med-or-tertiary CSS variable (default blue), and suggests overriding .chat-channel-unread-indicator in CSS to customize it. Direct messages use --success (green). eecs_guy asks for the CSS class names to style unread indicators both in the header and within the chat sidebar, and also inquires about displaying unread message counts on the header’s channel indicator (currently only personal chats show a count). chapoi provides the selectors: .chat-enabled .sidebar-section-link-suffix.icon.unread svg for channels and .chat-enabled .sidebar-section-link-suffix.icon.urgent svg for personal chats. Regarding the missing unread count on the header’s channel indicator, chapoi states there’s no built-in way to enable it and suggests developing a plugin. The discussion centers on CSS customization and potential plugin development to improve chat notification visibility.
How is the color of the “new messages circle” decided? I mean in the chat icon on the header. After customizing our forum, the circle is now almost the same grey as the icon, and notifications of new messages are not obvious. We would like to change this color, hopefully without having to touch the colors we are using for the rest of the website.
Meanwhile, the color for new topics (that default blue) remains blue in our website. Using the same color for new chat messages and new topics would be fine.
the “regular” message (not a direct message, but unread messages in a channel) is the background: var(--tertiary-med-or-tertiary); colour. So this is derived of whatever you have set as your tertiary accent colour.
If you don’t want to change your tertiary colour, you could override this one specifically by setting a different background for .chat-channel-unread-indicator in your CSS.
New direct messages are green by default, which is the var(--success)
We want to change the background color not only for chat channel unread indicator on the header, but also for chat channel unread indicator following each channel inside the chat. What’s the class name for it?
Inside the chat, each channel has a number of unread messages on the indicator and each personal chat has a number of unread messages on the indicator as well. But on the header, only the personal chat indicator has a number that is the sum of all unread personal chat messages. The channel indicator doesn’t have a number. How can we make it show up?
This is easily found when you look at the DOM inspector. You can use this to override it:
for channels:: .chat-enabled .sidebar-section-link-suffix.icon.unread svg
for: personal chats .chat-enabled .sidebar-section-link-suffix.icon.urgent svg
There is no default way to do this as far as I know. You might need to look into making a plugin for that.
