Customizing subcategory boxes in Discourse

Documentation Site Management
,
1

:bookmark: 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.

:person_raising_hand: 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:

Example of restyled subcategory boxes
Example of restyled subcategory boxes1021×257 93.8 KB

  1. Go to your site’s admin panel
  2. Navigate to Customize > Themes
  3. Create a new theme or edit an existing one
  4. 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:

Example of restyled subcategory boxes
Example of restyled subcategory boxes834×160 37.7 KB

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

:information_source: 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

Last edited by @hugh 2024-07-19T02:53:15Z

Last checked by @hugh 2024-07-19T02:53:23Z

Check documentPerform check on document:
2

Thanks for above tip.

Basic Setup > Desktop category page style

Here, I have selected “Boxes with subcategories” because I do not want topics to be shown.

This works on Desktop but not on mobile. On mobile topics are still visible. Is this intentional?