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