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?
just a basic HTML/CSS edit or do I need to use a plugin?סיכום מבוסס בינה מלאכותית
A user new to Discourse asks how to create a custom layout similar to one they saw, featuring a green banner and organized categories. th21 suggests using CSS or a theme component for the banner and hiding avatars via CSS. manuel explains that the layout uses custom Handlebars templates and CSS, but a simpler approach is possible using fixed category positions and CSS styling. manuel clarifies that the categories in the screenshot are separate, with some having subcategories, and the banner is a custom element. The user thanks the community and plans to begin implementing the design Periphery.
you mean layout like this?
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:
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:
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.
Alright thanks. I think I have enough to go by and start designing ![]()
