AI-generated summary
In a discussion about customizing text colors, hippo initially sought help with locating the correct CSS. NateDhaliwal suggested using browser DevTools to target elements by class or ID. He then provided specific CSS snippets to color sidebar dots, topic badges, and notification icons, utilizing !important to override defaults NateDhaliwal. dontdieych shared a meta-discourse link for guidance on where to implement custom CSS. After applying these solutions, hippo expressed gratitude and reported progress. The user then requested further assistance to change the white text in the category edit area to black upon clicking and hovering hippo.
You can right-click the elements to open DevTools and target them by their class/id.
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!
If you don’t know where to put custom CSS code, read this topic.
Thanks this helped a lot and now I am making quick progress on customizing!
