Reordering [All categories] in the Discourse sidebar

Creating a Component

To apply custom CSS to your theme, you need to create a new component. Please refer to the link below to understand why creating a component is necessary instead of modifying the theme’s CSS directly.

🌐 https://appflix.cc/cannot-find-the-html-css-editing-option-on-discourse/

From the [Customize] settings on the Admin page, select [Theme] and then click the [Install] button in the [Components] tab.

In the Component Install window, click the [Create new] tab and enter an appropriate name. Then, click the [Create] button to generate the Component.

Enter custom CSS

To input custom CSS, click on the Component that you just created and click on the [Edit CSS/HTML] button.

Select [Common] to apply it to both PC and mobile environments, and then choose [CSS]. And Copy and paste the code below to apply it.

/** Reorder [All categories] **/
#sidebar-section-content-categories,
#sidebar-section-content-tags {
display: flex;
flex-direction: column;
li:last-child {
order: -1;
}
}

Don’t forget to save the changes after entering the code.

---

Apply the Component and check

Apply the Component that has been created to place [All categories] at the top of the category section in the sidebar of the theme you are using.

Go back to the homepage and check if the position of [All categories] in the Categories section of the sidebar has changed.

If there are no changes, please refresh your browser cache by pressing the shortcut key [Ctrl+F5] and check again.