How customize the appearance of sections like Amazon?

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;

1 Like

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.

1 Like

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?

1 Like

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!

4 Likes

Thank you for the advice, about what is better to allocate it as components

If we talk about a specific example Amazon Seller Forums - 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