I never thought I’d do this, but here I am, editing CSS and JavaScript, and creating my first simple theme and plugin components. As I’ve read before (though I wasn’t quite ready — one need a certain foundation to get started), the process of adding features and/or modifying existing ones in Discourse is actually very simple, and I’m very grateful for that. Something I’ve noticed from my humble and brief experience with this is the lack of standardized guidelines, especially regarding theme components. I understand that plugins follow a stricter, more defined path. When designing or coding for Horizon, oe must take into account the Discourse core that applies equally to all themes, changes made by Horizon, Foundation (modernized), implementations from Topic Cards, and any other components that may have arbitrarily modified variables. Is there currently a guide I can follow from the start to simplify this process and stop running into px, em, rem, or variables that overlap and stop working with subsequent updates? Am I missing something, or is this an simplification that could be very beneficial for all of us?

Here is a link to the theme skeleton [תמונה] GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes Template for Discourse themes I start my own from that and load it in a development instance using [image] and then paste in my git repository [image]

Thanks Andrew, but I’m afraid it still relies on the different themes/components I described before.

Take a look at this: [תמונה] Guidelines for CSS classes using BEM Developer Guides Background When writing CSS classes for Discourse components, themes, or plugins, we follow a modified variant of Block Element Modifier (BEM). Following these guidelines will make it much less likely for CSS conflicts to occur, since BEM helps a lot with specificity. Themes and components have an easier time of overriding Discourse core styles, and the more descriptive class names make it easy at a glance to see where CSS classes should be applied in core. The guidelines This is what the Disco…

Thanks, I will read it! But I’m still afraid that will not prevent struggling with px, em, and px alternatives mixed everywhere, and overrides between theme components, topic cards, modernizations, defaults on Foundation, and Horizon. The same applies to different display modes. Grid, flexbox, and tables are used everywhere, yet Discourse is not extensive enough to warrant such a mixture: we have topics, posts, user profiles, chats and a few other individual pages. I am seeing a lack of integration regarding the basis to follow or implement, or a need for improvement in their communication. There are variables, and there are guidelines about how and what to do for specific things. Well, we all need to know them and align with those, so all our work will be simpler for everyone. Perhaps some of you, more experienced folks, can understand what I am trying to communicate and explain it in a proper way. I am not technical like you, and all of this is still new to me. Thanks for reading and sharing links. I am also open to discussion and opinions about it!

About standardized guidelines for theme components

מפתח

NateDhaliwal (Nate Dhaliwal) 23 באוגוסט,‏ 2026,‏ 10:52pm 4

Take a look at this:

נושא		תגובות	צפיות
Developing Discourse Themes & Theme Components Developer Guides reference , tutorial , theme-guides	14	110156	18 במרץ,‏ 2025
Theme Developer Tutorial: 3. CSS in Themes Developer Guides	5	993	18 במרץ,‏ 2025
Guidelines for CSS classes using BEM Developer Guides	0	460	15 באפריל,‏ 2025
Beginner's guide to using Discourse Themes Site Management reference , customization	12	86377	9 ביולי,‏ 2026
Please support any theme/component. css+html can be customized UX	8	392	7 בדצמבר,‏ 2024

About standardized guidelines for theme components

נושאים קשורים