Hello all, I’m new here, and wasn’t sure where to post this since this questions about CSS/HTML were outside the scope on the support category. Anyway I digress. I came across Discourse through another platform I frequently use, and moved my Forum over to Discourse. The layout that is used on the platform looks really nice and I’m trying to do something similar. Anyone an idea how to do this kind of thing? [Screenshot] just a basic HTML/CSS edit or do I need to use a plugin?

you mean layout like this? [image] Way to view latest topics by category on desktop? Support We have multiple category page styles available on desktop (in the admin site setting called desktop category page style) the option called Categories with Featured Topics is the most similar to the mobile layout. [Screen Shot 2020-09-03 at 8.48.53 PM] for the green banner it can be done by editing css or take a look at existed banner component And also hide the avatar from topic list through css

This layout uses custom handlebars templates and css, you can find more info in this topic: [image] How do I add category banners? Support So now I have got it fixed for my self at least [4d34f94999cfa96f6578d9b3d6d33707] So first of all download this file discourse-misc-html-css (2).zip (2.5 KB) So if you are not sure how to add that file to your site then check this guide out first So in the Misc/HTML+CSS Common and then in CSS You have to tweak some settings So first you need to copy this line &.fivem > .category-list { &:before { content: 'FiveM'; } background-image… Though you might get there without adding new templates. You’d have to use fixed category positions in admin settings and then just add spaces and banner styles with CSS. I posted the approach here: [image] How to split the categories into sections with titles? Development You can select categories with their ids and inject your title texts before, e.g.: body [data-category-id="1"]:before { content: "Projects"; } Alternatively, you could use this new component, it comes with backend settings to add category sections: https://github.com/jordanvidrine/discourse-category-group-boxes

Thank you. I will try this out. the layout for example CFX.RE banner are these categories with subcategories? So the CFX.Re is the main category and Announcements, Cookbook and FxDK are subcategories, or are all of these just a single category?

In your screenshot ‘Announcements’, ‘Cookbook’ and ‘FxDK’ are the categories. ‘Design Documents’ and ‘Commit Annotations’ are for example sub-categories of Cookbook. And the CFx.re banner is a custom layout element.

Creating a nicer layout

Product Support

Periphery August 18, 2021, 5:25pm 6

Alright thanks. I think I have enough to go by and start designing

Topic		Replies	Views
Can We Represent Our Categories Like This on a Discourse Hosted Community Product Support	7	367	October 12, 2024
How to get specific category banners with subcategories listed below Product Support	1	901	May 12, 2020
How do I add category banners? Product Support	9	4024	December 28, 2021
How to build a Discourse theme similar to forum.cfx.re? Community Building	2	289	June 2, 2025
Banner-type content for each category Product Support	15	2120	November 16, 2020

Creating a nicer layout

Related topics