Show topic count in category list

Product Support
8

Hi, sorry I missed this. Try this one for CSS.

To create a CSS that shows the topic count in the subcategory on Discourse, you’ll need to target the specific elements in the Discourse DOM that represent the count of topics for a subcategory. Below is a CSS example that you can apply via the admin interface in Discourse.

  1. Navigate to the Admin Customize Section:

    • Go to Admin > Customize > Themes.
    • Select an existing theme or create a new one.
    • Click on Edit CSS/HTML.

  2. Add Custom CSS:

    • Within the CSS tab, add your custom styles. For example:
/* Custom CSS to show topic count in subcategory */
.subcategory {
    position: relative;
    padding-right: 40px; /* Adjust as needed for spacing */
}

.subcategory .subcategory-details .topics {
    font-size: 0.8em; /* Makes the topic count slightly smaller */
    color: #666; /* Use a color that matches your theme */
    position: absolute;
    top: 50%;
    right: 10px; /* Place it on the right of the subcategory */
    transform: translateY(-50%);
    background: #f2f2f2; /* Background color to make it stand out */
    padding: 2px 5px;
    border-radius: 3px; /* Rounded corners for a better look */
}

.subcategory:hover .subcategory-details .topics {
    background: #ddd; /* Change background color on hover, if desired */
}
  1. Save the Changes:
    • Click on the Save button to apply the custom CSS.

The CSS above assumes the existing structure of subcategories in Discourse. You might need to inspect the HTML structure using browser developer tools (right-click and Inspect in most browsers) and modify the CSS selectors accordingly based on the actual DOM structure of your Discourse setup.

In Discourse, subcategories typically have the class .subcategory and topic counts might be inside certain element structures that you can target with more specific CSS if necessary. Ensure that elements like .topics, .subcategory-details, and their hierarchical structures match what is in your platform for accurate styling.