# How to style the \`/categories\` page?

**URL:** https://meta.discourse.org/t/how-to-style-the-categories-page/49030
**Category:** UX
**Created:** [22 أغسطس 2016، 9:53م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030 "2016-08-22T21:53:07Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [22 أغسطس 2016، 9:53م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/1 "2016-08-22T21:53:08Z")

</div>

Today, I added the `desktop_category_page_style` site setting which allows you to select the style of the [categories](https://meta.discourse.org/categories) page.

The **default** is “Categories and Latest Topics” which list the categories on the left and the latest topics on the right.

 ![](https://global.discourse-cdn.com/meta/original/3X/1/7/170ec480609c0defd75bb15f763244dc82c89dda.png)

You might want to go back to our previous default, now called “Categories with Featured Topics” which list the categories and the top X featured topics for each category.

 ![](https://global.discourse-cdn.com/meta/original/3X/5/8/5879649c9a8db6f781c0ab4f938cdf1260eaaccf.png)

Or you might want to use (and customize) the _old school_ “Categories Only” which lists only the categories.

 ![](https://global.discourse-cdn.com/meta/original/3X/c/9/c9c84f756bfc6799142a3aee266467bc6be17088.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [22 أغسطس 2016، 10:18م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/2 "2016-08-22T22:18:21Z")

</div>

Also I think @sam has some ideas for default improvements for the third version, “categories only”, there.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [23 أغسطس 2016، 7:19م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/3 "2016-08-23T19:19:16Z")

</div>

> [@zogstrip](#):
>
> Or you might want to use (and customize) the old school “Categories Only” which lists only the categories.

How about two columns:

 ![](https://global.discourse-cdn.com/meta/original/3X/3/8/389945b36f96c4abd3c4e917d3edae1f7517ed35.png)

---

<div class="post-metadata">

### Author: ![tjlamby](https://avatars.discourse-cdn.com/v4/letter/t/3da27b/32.png) [@tjlamby](https://meta.discourse.org/u/tjlamby)
#### Post date: [23 أغسطس 2016، 8:41م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/4 "2016-08-23T20:41:25Z")

</div>

Is there a way to change the size of heading font and color of seperator line?

---

<div class="post-metadata">

### Author: ![matthew.cox](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matthew.cox/32/57466_2.png) [@matthew.cox](https://meta.discourse.org/u/matthew.cox)
#### Post date: [26 أغسطس 2016، 6:55ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/5 "2016-08-26T06:55:28Z")

</div>

In the variant with categories and featured topics, if there are no “featured” topics, will the page default to showing latest?

---

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [26 أغسطس 2016، 7:34ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/6 "2016-08-26T07:34:07Z")

</div>

Having spent a little bit of time with this new page, I actually wonder if a reversed version of it would work well as an updated “Latest” page. In other words, show the latest topics on the _left_ and the categories on the _right_. This would (in my opinion) better meet the default use-case of “see what’s new and fresh” as well as “dive into a specific area”. I know this is probably just bike-shedding, though!

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [26 أغسطس 2016، 7:55ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/7 "2016-08-26T07:55:44Z")

</div>

I also felt that the latest on the left-hand side made a bit more sense, especially as the column will likely be longer than the list of categories. But maybe we’re just weird.

A comment from one of my moderators:

> There’s very little visual separation between the Category column and the Latest column. At first glance I wondered if [the first post] was associated with the [first category], for example, since it’s right next to it.

---

<div class="post-metadata">

### Author: ![mjarvis](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mjarvis](https://meta.discourse.org/u/mjarvis)
#### Post date: [26 أغسطس 2016، 8:10ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/8 "2016-08-26T08:10:10Z")

</div>

Hi! This change seems to have broken some of our custom CSS. Could you send me the change log please so we can fix it? Thank you!

---

<div class="post-metadata">

### Author: ![Chopper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chopper/32/57073_2.png) [@Chopper](https://meta.discourse.org/u/Chopper)
#### Post date: [27 أغسطس 2016، 11:26ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/9 "2016-08-27T11:26:34Z")

</div>

Note : the css classes have changed from the previous version. For example this post will not work anymore (categorie view from example) [https://meta.discourse.org/t/material-design-for-discourse/28864](https://meta.discourse.org/t/material-design-for-discourse/28864) since css classes were updated.

It’s not a big deal but users who have customize the “categorie” page can be surprise after the update !!

When i update to 7.3 i didn’t imagine this will be now the default page for the categories and my custom css will be broken. Yes, 10 mins after everything was back to normal but it’s was a surprise.

I also have this huge empty space :

 ![](https://global.discourse-cdn.com/meta/original/3X/9/9/99cc0253027f63c890f89c5aab81973dea8e577e.png)

When i check a post and click back on the logo forum this space appear.

* * *

> [@zogstrip](#):
>
> You might want to go back to our previous default, now called “Categories with Featured Topics”

This is not the same has the orginal. Now there is toooooooooo much empty space on the right (lastest topic) !

---

<div class="post-metadata">

### Author: ![Rendradipa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rendradipa/32/62371_2.png) [@Rendradipa](https://meta.discourse.org/u/Rendradipa)
#### Post date: [31 أغسطس 2016، 2:05ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/10 "2016-08-31T02:05:44Z")

</div>

Hello.  
I want to ask, in my categories style Why user icon doesn’t appear? However, before this situation, the icon has appeared.

 ![](https://global.discourse-cdn.com/meta/original/3X/6/4/649784b0f74178bbfb4dd09f7c76c52380da5b46.PNG)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [31 أغسطس 2016، 9:00ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/11 "2016-08-31T09:00:48Z")

</div>

Do you have any CSS customization hiding the avatars by any chances?

---

<div class="post-metadata">

### Author: ![pinbot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pinbot/32/61332_2.png) [@pinbot](https://meta.discourse.org/u/pinbot)
#### Post date: [31 أغسطس 2016، 12:04م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/12 "2016-08-31T12:04:26Z")

</div>

People are going to use the third option “Categories only” only if there is a way to provide description for subcategories.

---

<div class="post-metadata">

### Author: ![LastDance](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lastdance/32/121324_2.png) [@LastDance](https://meta.discourse.org/u/LastDance)
#### Post date: [3 سبتمبر 2016، 8:44م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/13 "2016-09-03T20:44:06Z")

</div>

How does one actually set up two columns in any of these views?

---

<div class="post-metadata">

### Author: ![Ashley\_Milne](https://avatars.discourse-cdn.com/v4/letter/a/e68b1a/32.png) [@Ashley\_Milne](https://meta.discourse.org/u/Ashley_Milne)
#### Post date: [29 يونيو 2018، 8:01م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/14 "2018-06-29T20:01:28Z")

</div>

I may be missing something here, but how do I actually get the categories in “box” style? I have selected this in my admin setting: [https://import2.d.pr/ZNNGs9](https://import2.d.pr/ZNNGs9)

but my categories still appear in list: [https://import2.d.pr/8PM1nR](https://import2.d.pr/8PM1nR)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [29 يونيو 2018، 11:44م UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/15 "2018-06-29T23:44:05Z")

</div>

The setting in your first screen shot is used for setting the style of the category badge. You can see the effect it has by changing the value of the setting. The category badge for the selected style will be displayed for you.

It’s not possible to have categories displayed in boxes without adding some fairly complex custom styles to your site. What Discourse does let you do is display **subcategories** in boxes above a category’s topic list. This is set on the Settings tab of the parent category’s edit modal. The setting you need to select is ‘Show subcategory list above topics in this category.’ When that setting is selected, you will see a dropdown menu that lets you select the subcategory style. Check out the #howto category on meta to see an example of it.

---

<div class="post-metadata">

### Author: ![lisandro\_iaffar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lisandro_iaffar/32/315816_2.png) [@lisandro\_iaffar](https://meta.discourse.org/u/lisandro_iaffar)
#### Post date: [4 يوليو 2022، 2:57ص UTC](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/16 "2022-07-04T02:57:39Z")

</div>

مرحباً! 🙂  
أرى أن عدد المواضيع المميزة لكل فئة مضبوط افتراضيًا على 3. لم أجد أي خيار لزيادة هذا العدد إلى 4، كما في مثالك. هل هناك أي طريقة للقيام بذلك؟
