Customizing Section Appearance in Discourse
Alex_Tramp is seeking help to customize the appearance of sections in Discourse, specifically to create a list of subsections in one column and add indents between sections, similar to Amazon’s forum layout.
Alex_Tramp discovered that modifying the category-list.scss file can achieve the desired layout, but wants to know how to do this through the admin panel without changing the files on the server.
Riking clarified that the default CSS for subcategories can be modified by assigning a “Parent Category” and setting the subcategory and parent category to have the same color.
However, Alex_Tramp pointed out that this solution doesn’t address the horizontal alignment of subcategories and provided a CSS solution to align them vertically.
Riking advised that the correct way to add custom CSS is through a theme component, which allows for site-wide customizations.
Alex_Tramp noted that Amazon’s layout also involves changes to the HTML markup, which is not easily replicable through CSS alone.
Awesomerobot suggested that adding a specific CSS rule can achieve the desired subcategory style, but warned that making markup changes requires knowledge of template overrides in Discourse.
The community is invited to help Alex_Tramp create a custom theme that resembles Amazon’s concise layout with indents between sections.
Hello, community!
I recently installed discourse and want to customize the appearance
But I do not know how to select groups of sections with indents from other sections, as well as how to make a list of subsections in one column.
I looked at the settings in the admin panel, but I didn’t find anything similar that could help me.
I will be glad of any help.
I recently started studying this platform.
Thank you!
For example, to make a list of subsections into a single column, I need to change the values here (category-list.scss)
To these values
But how can I do this correctly through the admin panel without changing the files themselves on the server?
display: block;
align-items: baseline;
margin-right: 0;
I understood correctly - what should be done like this?
Is this the correct way to solve the problem?
That is the default CSS for subcategories. Simply assign a “Parent Category” in the category edit dialog, and set the subcategory and parent category to have the same color.
I don’t really understand what the color has to do with it.
By default, subcategories are displayed as follows: one after the other, horizontally
After applying the css that I specified above, the subsections line up in a vertical position as I wanted.
I just wanted to know-adding css in the form I indicated-through the admin panel-is this the right way?
And the second main question is how to make the sections themselves separated from each other by indents, as in the example of the screenshot from The Amazon forum?
Ah, I see.
The correct thing to do is to place this CSS into a theme component, which is only slightly different from what you are doing!
If you edit the Light theme, the changes will not be visible on the Dark theme.
Create a single theme component for all your site local customizations!
Thank you for the advice, about what is better to allocate it as components
If we talk about a specific example Amazon - it’s not just about css, their markup also differs from the standard one (html)
How to quickly organize the same display?
Unfortunately, I have a superficial knowledge of layout, I am a backend developer, so layout is difficult.
Can I transfer this layout without changing the code of the source files themselves?
I looked through a lot of different ready-made themes
But most of them are similar to each other, and such a concise as Amazon-not found. Maybe we can do it together with the community? It looks more concise with indents between sections
Their markup is different partiall because they haven’t appeared to update their site in quite a while
Adding this CSS gets you most of the way there with the subcategory style…
.category-list .subcategories .subcategory {
display: flex;
}
If you want to make markup changes, you’ll have to start looking into how template overrides in Discourse work… that’s in the advanced section of Developer’s guide to Discourse Themes