The discussion revolves around customizing the “Boxes with Subcategories” feature in Discourse. MichelleBarnett is seeking a way to make subcategories appear as a bulleted list, manually reorder them, or reduce the margins to fit more on one line.
Canapin provides CSS and SCSS code snippets to achieve the desired outcomes. To stack subcategories vertically, use:
.category-box .subcategories {
flex-direction: column;
.subcategory {
.subcategory-image-placeholder {
display: none;
}
}
}
For a bulleted list, the solution depends on the category style. If using “bullet,” it will look like this:
Two additional code snippets are provided to keep colored bullets for parent categories but not for subcategories, using either a real bullet character or reshaping the current Discourse category bullet.
Hello,
I currently have the setting “Boxes with Subcategories” turned on, but I have a lot of subcategories, causing it to look a little crowded. (see image)
Is there a way I can make the subcategories into a bulleted list? Or move them around manually rather than using the “Reorder Categories” feature? Or even if I could make the margins on each side smaller so that more could fit on one line?
Thank you!
Edit: as of 11/9/2023: Category styles other than squared bullets are or will be discontinued/unavailable in the short future.
I’m replying to this later, but better late than never… 
To stack them on top of each others:
.category-box .subcategories {
flex-direction: column;
.subcategory {
.subcategory-image-placeholder {
display: none;
}
}
}
As for a bulleted list, it will depend on what style you use for your categories. Let’s assume you’re using “bullet”:
It will look like this:
If you want to keep the colored bullets for the parent categories but not for the subcategories:
Using real bullet character:
.category-box .subcategories {
flex-direction: column;
.subcategory {
&:before {
content: "•";
margin-right: .25em;
font-size: 1.5em;
line-height: 0;
}
.badge-category-bg {
display: none;
}
.subcategory-image-placeholder {
display: none;
}
}
}
Simpler, reshaping the current Discourse category bullet:
.category-box .subcategories {
flex-direction: column;
.subcategory {
.badge-category-bg {
border-radius: 50%;
}
.subcategory-image-placeholder {
display: none;
}
}
}
