How do I go about making a very customized theme?

Hi, I’m new to Discourse and really love it’s features and function. I’m wanting to heavily customize it’s appearance and the way it presents content. I’ve been reading through various threads and posts trying to understand it. I have javascript coding experience, but I’m getting confused. By heavily customized I mean: removing the sidebar, adding navigation items to the top bar. Displaying topics with the author name, avatar, subject, and preview text, along with most recent reply and a preview of the reply with the reply authors avatar and name. Topics grouped under categories in one big list of categories and their topics (old school). I guess I need to get my head around how to override the data that gets displayed, or fetched then displayed, and I’m confused on how to best do that. Would it be a single “theme” would it be a theme component? Would it be a plugin? Would it be multiple themes, components and plugins? What’s the difference between a component and plugin? I wish there was a youtube video showing the development of a heavily customized “theme” like this. I am currently gathering a list of “addons?” that do similar things to what I want to achieve and am trying to read their code and understand them, but man it’s really confusing coming in to this “fresh off the street”. I learn best by watching videos than I do reading. :confused: Any tips, advice, or videos I might haven’t become aware of? Any help is very much appreciated. :pray:

1 Like

Since the changes you want would imply fetching extra data to pages, a theme or a component wouldn’t be enough, you need a plugin to achieve your vision.

3 Likes

Thanks :slight_smile: I have a ton of reading to do. Hopefully it’ll all start to make sense. I found a really relevant topic:

And then, just sharing some links/notes for others that might be in the same boat:

HTML templates are in discourse/app/assets/javascripts/discourse/app/templates at main · discourse/discourse · GitHub

Beginners Guide to Themes:

Developers Guide to Themes:

Designers Guide to Themes:

Creating a Theme-Component:

Theme Component to reveal plugin outlet locations (places to inject new html/script/styles):

Plug-in Development:

Learn to start building stuff:

Install Discourse on Ubuntu/Debian for Development:

What I really want to modify is the “topic-list” or homepage

• This theme has already created the desired topic-list format:
• Author Name + Avatar:

Author name plus avatar or Show Original Poster Avatars

• Groups of Categories:
• Featured category icons:

Can also try the online theme editor:

Extra’s:
• Single Sign On? SSO
Setup DiscourseConnect - Official Single-Sign-On for Discourse (sso)
• Discord Bot
Discord Bot Construction Kit 🤖

You can do this by clicking the hamburger icon, so that would be pretty easy to figure out.

Have a at Custom Header Links

That might help you get started.

4 Likes