Boxes with Subcategories into Bulleted List

Dev
1

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)

Screen Shot 2020-08-07 at 10.01.23 AM
Screen Shot 2020-08-07 at 10.01.23 AM604×820 31.4 KB

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!

1 Like
2

:warning: 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… :slight_smile:

To stack them on top of each others:

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

image

As for a bulleted list, it will depend on what style you use for your categories. Let’s assume you’re using “bullet”:
image

It will look like this:
image

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

image

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

image

2 Likes