Customize style of subcategory boxes

Here are some tips related to customizing how subcategories are displayed in boxes.

(Related: Display boxes for subcategories above topic list)

Customizing Boxes with Featured Topics

Here’s a tip for customizing the “boxes with featured topics” style to use their colours more boldly.

I’ve removed the logos from my subcategories, and added the following site customization:

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

Customizing the “Boxes” style

Sample CSS to customize the “boxes” style.

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

Truncation of the Category Descriptions

We’ve added truncation of the category descriptions . Rather than add another new setting, the number of lines is defined in CSS. By default, it will truncate at 4 lines. To shorten it to two, this custom CSS can be used:

.category-boxes .description .overflow {
  max-height: 3em;
}

Updating Themes and Plugins to Support Automatic Dark Mode