Help with locating the correct CSS location to change color of specific text

[hipp0]

[NateDhaliwal]

You can right-click the elements to open DevTools and target them by their class/id.

[NateDhaliwal]

The dot in the sidebar for new/unread topics can be coloured like so:

span.sidebar-section-link-suffix.icon.unread svg {
  color: red !important;
}

For the topic’s dot for new topics, use:

a.badge-notification.new-topic::before {
  background-color: red !important;
}

If you want to target icons in the notification menu, you can use this CSS:

div.tabs-list a.user-menu-tab svg {
  color: red !important;
}

If you want to target only active icons in the notification menu, use:

div.tabs-list a.user-menu-tab.active svg {
  color: red !important;
}

To target the whole notification on hover, use:

div.quick-access-panel ul li:hover {
  background-color: red !important;
}

Hope this helps!

[dontdieych (YCH)]

If you don’t know where to put custom CSS code, read this topic.

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics CSS…

[hipp0]

Thanks this helped a lot and now I am making quick progress on customizing!

[hipp0]

I am trying to change the category edit area, the white text on click and hover to black.