How to display sub-categories in boxes

There are two new ways to display a list of sub-categories within the parent category:

  • in boxes with only the name, logo, and description
  • in boxes with name, logo, and a list of some featured topics

You can enable these styles by visiting the parent category, editing its settings, going to the settings tab, and choosing these options:

Boxes

The “Boxes” style is currently being used in our howto category. By using very short category description and adding logos to each subcategory, it looks like this:

The logos are optional, but its best to either use logos for all or none of the subcategories.

Boxes with featured topics

The “Boxes with featured topics” will include a list of a configurable number of topics.

Set how many topics to show in each sub-category’s settings:

35 Likes

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

19 Likes

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

Ok I 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;
}
5 Likes

I’m trying out displaying sub-categories in pretty boxes now for the first time on my site, to create a wiki. It’s a beautiful feature and I like it! However, a few issues I am confronting:

  • the boxes are not displaying for anyone but me. I don’t understand it - everyone else just sees the regular category view with the latest topics.
  • is there any logic to which featured links are displayed and their order? and is it possible to change the number of featured links?

Thanks for any guidance. :seedling:

1 Like

Hello everyone. I have a new setup of Discourse and I am trying to locate these settings, but can not find them.
Are those available by an extra plugin?

@spooky As per the first post they are in the settings section when editing / creating a main category - what do you see in this area?

This is standard and not part of a plugin.

4 Likes

oh… ok, I was looking in settings, main setting, not under A specific category settings. Thanks :roll_eyes:

3 Likes

Is it possible to have an [i frame] underneath these boxes. For instance if I wanted to put an interactive D3 graph (in html) to create some functionality of the “box” -graph I am not a coder but looking to get something like
Boxes (with hover)
but was looking to add some interactivity (can be done if iframe I think

any suggestions

Hey,

Unfortunately, the “Settings” menu is now changed and I cannot find the sub-category option in order to make sub-categories into boxes. Can you please tell me where is this setting in the new Discourse admin menu? I couldn’t find it anywhere.

Thank you!

Best,
Vlad

It’s not in the Admin menu, it’s in the Settings for the category you want to change: go to the category, tap/click Edit, then go to the Settings tab.

7 Likes

Thank you! It worked!

1 Like

Oh man, somethings changed and I can’t figure this out. Ok, so I was using images to act as a header for a category (see pic). But for some reason, recently the image has shrunk and I can’t get it to fill the space anymore!

Please help!!

How to get the short description?
Thanks

1 Like

You create a short description when you go to the category settings and click “Edit Description”.

4 Likes

and I can use the “unlist topic” option to not show it as a topic in the category.

Thanks a lot

1 Like

Yes, you can unlist the about this category topic.

2 Likes

How come my sub-cat boxes for are not showing any topics / desc / images?

1 Like

any way to sub cats show above posts in the category box’s?

thanks

1 Like

Hi! I was wondering if there is a way to implement the Boxes with Subcategories setting only to one specific theme/ theme component? If not, is there a way to preview this setting without publishing?