On the site made with Discourse, categories are very important. This is because the website itself, made with Discourse, is composed of categories and posts included in the categories. Based on my experience, there aren’t any major issues with PCs, but in mobile environments, it’s best to simplify the category items to allow for more items to be displayed on one screen. This will make it easier for users to see many items on the homepage at a glance. On this page, let’s learn how to change and modify the style of the category items and subcategory items displayed on the category page. If you simply need a minimal category component, you can download it directly at the bottom of the post.

The nature and characteristics of the community can result in different types of posts being created by users. If the length of the posts is long and they include various elements such as links, images, and videos, we recommend keeping the Preview section to ensure a better user experience. However, if you still want to remove the Preview section in the Post Editor, follow the instructions on this page.

There are some inconveniences. Directly editing the theme’s HTML and CSS can be somewhat risky for some people. There may also be cases where the user’s modifications are all reset due to updates from the theme creator. For more information, please refer to the document below. Therefore, through this page, I would like to share a way for users to create Discourse Theme Components themselves and manage HTML and CSS modifications that users have made themselves as additional functions of the theme.

Discourse doesn’t provide many options for configuring the Sidebar. Therefore, most of the Sidebar styling is done through Custom CSS.

While it is possible to change the order of items listed in the Sidebar categories using Discourse’s built-in features, there is no option to change the order of [All categories] displayed at the bottom.

To improve the accessibility of [All categories] in the Sidebar on this page, we will move it to the top of the Category section.

When configuring a site with Discourse, there may be cases where you need to change and modify the layout and design based on the user. In such cases, you can edit or modify the HTML and CSS from the theme applied to Discourse.

However, there are cases where the HTML/CSS editing button is not visible on the theme page. This option is not visible for themes that are directly installed from the Discourse community or through a Git repository link.

There are two ways to solve this problem. You can either install the theme locally to modify the HTML and CSS or create a local Theme component. Please continue to follow this post for the exact method.