I’ve been following Discourse for years but hesitated to switch since I’m not familiar with coding or command-line setups. However, the exciting features and open-source nature finally convinced me to migrate from XenForo, with the help of a tech-savvy friend.
Now, I’m eager to customize my forum! As a UI/UX designer, I have plenty of ideas, but I’m unsure where to start. With XenForo, I used themes that closely matched my vision and made minor tweaks with CSS. The built-in theme options also let me adjust specific UI elements, like post backgrounds or sidebar borders with GUI.
In Discourse, I see a color palette option, but are there any built-in controls for more detailed styling, or do I need to rely on code for everything? Any guidance would be greatly appreciated! That said, I’m truly impressed with Discourse’s functionality and excited to explore its potential.
Besides the color palette, it will be CSS/SCSS, and more if needed (JS, HTML).
You might be interested in this:
You can create themes and components. Components are like “subthemes” (they can contain styles and features), and any component can be enabled for one or multiple themes.
There’s a command line tool that helps for creating themes and components and I suggest you have a look at it:
There’s also a special page that lists most Discourse HTML elements so you can have an overview of what they look like, and create your styles accordingly.
The page must be enabled with the Styleguide enabled site setting.
Although it seems a bit daunting to me, I still feel positive about this, thanks for this amazing reply, I think the style guide thing will come in handy for sure. Thanks a million!
@nolo is extending the non (or less) coding options for theme building and customizing. I would start there (selfishly, I’d love to follow your progress with that until I can find the time to dig into it myself , so if you do that, please provide/post feedback and reports along your way!!!). It seems like he’s innovating some simplifications for us UI / UX nerds.
Not for everything, but for implementing any more custom design I do think you’d need to write code. My recommended steps would be:
Learn how to use the Theme CLI gem that @Canapin already mentioned. This can be a daunting first step, but if anything will make you fall in love with customising Discourse, it’s that little gem! It’s like a magic wand for designers Without it, you will likely feel friction every step of the way.
Practice implementing styles using CSS custom properties.
I think the guides are not up-to-date in this regard. There’s much left to do for a truly consistent system of design tokens, but Discourse has already come a long way! Figuring out where and how custom properties are used will help you a lot to understand best practices for the front of the front-end of Discourse.
You can find custom properties using your browser inspector, or look at this list for a first impression: Documenting custom properties. And you can style recent templates, like the sidebar, almost entirely with custom properties.
As @denvergeeks suggested, you could have a look at the Canvas theme template. What it does is adding a set of custom properties for layout styling that are not available in core.
, so if you do that, please provide/post feedback and reports along your way!!!). It seems like he’s innovating some simplifications for us UI / UX nerds.
Without it, you will likely feel friction every step of the way.