How to style the `/categories` page?


(Régis Hanol) #1

Today, I added the desktop_category_page_style site setting which allows you to select the style of the categories page.

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

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.

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


Material Design Stock Theme
Native theme support
(Jeff Atwood) #2

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


(Erlend Sogge Heggen) #3

How about two columns:


#4

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


(matthew.cox) #5

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


(Barry van Oudtshoorn) #6

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!


(Alex Armstrong) #7

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.


#8

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!


(Martial) #9

Note : the css classes have changed from the previous version. For example this post will not work anymore (categorie view from example) Material Design for Discourse 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 :

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


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


(Rendra Pranadipa) #10

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


(Régis Hanol) #11

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


#12

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


#13

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


(Ashley Milne) #14

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: Screen Shot on 2018-06-29 at 14:00:54.png • Droplr

but my categories still appear in list: Screen Shot on 2018-06-29 at 13:59:47.png • Droplr


(Simon Cossar) #15

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.