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

[MichelleBarnett]

您好，

我目前启用了“带子类别的方框”设置，但由于子类别很多，导致看起来有些拥挤。（见图片）

有没有办法将子类别改为项目符号列表？或者手动调整它们的位置，而不是使用“重新排序类别”功能？或者，如果我能减小每侧的边距，以便在一行中容纳更多内容，也可以。

谢谢！

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