This guide explains how to customize the appearance of subcategory boxes in Discourse, including adjusting styles for featured topics, modifying the “Boxes” style, and managing category description truncation.
Required user level: Administrator
Subcategory boxes in Discourse can be customized to enhance the visual appeal and organization of your forum. This guide will walk you through various customization options for subcategory boxes, including styles for featured topics, the “Boxes” style, and category description truncation.
Customizing boxes with featured topics
To create a bold, colorful look for your subcategory boxes with featured topics, you can use custom CSS. This method removes logos and applies distinct background colors to each subcategory.
Here’s how to make your subcategory boxes look like this:
- Go to your site’s admin panel
- Navigate to Customize > Themes
- Create a new theme or edit an existing one
- Add the following CSS to your theme:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
Adjust the CSS selectors and colors to match your specific category names and desired color scheme.
Customizing the “Boxes” style
If you’re using the “Boxes” style for subcategories, you can customize it similarly:
In your theme’s CSS, add the following code:
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > h3 {
color: white;
}
}
}
Again, modify the selectors and colors to fit your forum’s structure and design preferences.
Managing category description truncation
By default, Discourse truncates category descriptions to 4 lines in the category boxes. You can adjust this using custom CSS:
To shorten the description to two lines, add this CSS to your theme:
.category-boxes .description .overflow {
max-height: 3em;
}
Adjust the max-height
value to achieve your desired number of visible lines.
Considerations for mobile devices
When using the “Boxes with subcategories” style on desktop, be aware that topics may still be visible on mobile devices. This behavior might be intentional in the Discourse design to maintain readability on smaller screens.
If you need to adjust the mobile layout, you may need to add specific CSS for mobile views or consult with a Discourse theme developer for a more tailored solution.
Additional resources
- Display boxes for subcategories above topic list
- Update themes and plugins to support automatic dark mode
Last edited by @hugh 2024-07-19T02:53:15Z
Last checked by @hugh 2024-07-19T02:53:23Z
Check document
Perform check on document: