将带有子类别的框转换为项目符号列表

[MichelleBarnett]

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!

[Canapin (Coin-coin le Canapin)]

编辑：截至 2023 年 11 月 9 日：除方形项目符号外的类别样式将在不久的将来停用/不可用。

---

@MichelleBarnett

带子类别的框

我稍后回复，但迟做总比不做好……

要将它们堆叠在一起：

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

至于项目符号列表，它将取决于您为类别使用的样式。假设您使用的是“bullet”：

它看起来会像这样：

如果您想保留父类别彩色项目符号但子类别不保留：

使用实际的项目符号字符：

.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;
        }
    }
}

更简单的方法是重塑当前的 Discourse 类别项目符号：

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .badge-category-bg {
            border-radius: 50%;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}