# Hoe ga ik te werk om een zeer aangepast thema te maken?
**URL:** https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772
**Category:** Development
**Created:** [8 november 2023 om 02:40 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772 "2023-11-08T02:40:20Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@SinisterSpatula](https://meta.discourse.org/u/SinisterSpatula)
#### Post date: [8 november 2023 om 02:40 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772/1 "2023-11-08T02:40:20Z")
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. 😕 Any tips, advice, or videos I might haven’t become aware of? Any help is very much appreciated. 🙏
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [8 november 2023 om 03:28 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772/2 "2023-11-08T03:28:30Z")
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.
---
### Author:  [@SinisterSpatula](https://meta.discourse.org/u/SinisterSpatula)
#### Post date: [8 november 2023 om 04:08 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772/3 "2023-11-08T04:08:43Z")
Thanks 🙂 I have a ton of reading to do. Hopefully it’ll all start to make sense. I found a really relevant topic:
> [@(not recommended) Overriding Discourse templates from a Theme or Plugin](https://meta.discourse.org/t/overriding-discourse-templates-from-a-theme-or-plugin/247487):
>
> Ideally, when customizing Discourse via themes/plugins, you should use CSS, [the JavaScript Plugin API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051), or [plugin outlets](https://meta.discourse.org/t/connect-your-theme-to-plugin-outlets-to-inject-templates-with-custom-content/32727). If none of these work for your use-case, feel free to open a PR to Discourse core or start a #Development topic here on Meta. We’re always happy to discuss adding new outlets/APIs to make customization easier. If you’ve exhausted all other options, you may need to resort to template overrides. This technique allows you to override the entire template of any Ember Component or…
And then, just sharing some links/notes for others that might be in the same boat:
HTML templates are in [https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates)
Beginners Guide to Themes:
> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …
Developers Guide to Themes:
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…
Designers Guide to Themes:
> [@Designer's Guide to getting started with themes in Discourse](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002/11):
>
> This is possible, and the method I would reccomend. The only thing you need to be aware of is that these changes will be live on the forum as you make every change. What I do is set the theme to be user selectable, and change my personal user preference to that theme, while keeping the default theme the choice for all other users. This lets only you see any issues that may arise during theming.
Creating a Theme-Component:
> [@Theme Developer Quick Reference Guide](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#howto / #themes](https://meta.discourse.org/tags/c/howto/themes), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site…](https://meta.discourse.org/t/-/374376)
Theme Component to reveal plugin outlet locations (places to inject new html/script/styles):
[https://github.com/communiteq/plugin-outlets-theme-component](https://github.com/communiteq/plugin-outlets-theme-component)
Plug-in Development:
> [@Developing Discourse Plugins - Part 1 - Create a basic plugin](https://meta.discourse.org/t/developing-discourse-plugins-part-1-create-a-basic-plugin/30515):
>
> Building a plugin in Discourse can be really simple, once you learn a couple of quirks. The goal of this post is to create a skeleton plugin and introduce you to the basics. Your development environment Make sure you have a development environment of Discourse running on your computer. I recommend you use [the appropriate setup guide](https://meta.discourse.org/tag/dev-install) and come back when you’re done. plugin.rbtada Use [GitHub - discourse/discourse-plugin-skeleton: Template for Discourse plugins · GitHub](https://github.com/discourse/discourse-plugin-skeleton) to create a complete di…
Learn to start building stuff:
> [@Learn how to start building stuff for Discourse if you're newbie (like myself)](https://meta.discourse.org/t/learn-how-to-start-building-stuff-for-discourse-if-youre-newbie-like-myself/45954):
>
> There are a few ‘how to start’ guides for working with Discourse already and a wealth of useful info on meta, but I thought it might help to give an insight to the mental processes of starting from little, if any, prior coding experience to building substantial Discourse plugins. Discourse is written by experienced developers and has a large codebase. This can feel intimidating. This intimidation factor can be a significant barrier for novice developers. This is a kind of ‘psychological primer’…
Install Discourse on Ubuntu/Debian for Development:
> [@Install Discourse on Ubuntu or Debian for Development](https://meta.discourse.org/t/install-discourse-on-ubuntu-or-debian-for-development/14727):
>
> warning This guide covers installation instructions in a development environment. For a production guide see: [Install Discourse in production with the official supported instructions](https://meta.discourse.org/t/how-to-install-discourse-in-production/142537) So you want to set up Discourse on Ubuntu or Debian to hack on and develop with? We’ll assume that you work locally and don’t have Ruby/Rails/Postgres/Redis installed on your Ubuntu or Debian system. Let’s begin! Requirements We suggest having at least 4 GB RAM and 2 CPU cores. Current compatibility: O…
What I really want to modify is the “topic-list” or homepage
```
• This theme has already created the desired topic-list format:
```
> [@Sam's Simple Theme](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552):
>
> discourse2Summary Sam’s Simple Theme creates a “minimal” topic list designeyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/sams-simple-theme)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-simple-theme](https://github.com/discourse/discourse-simple-theme)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme Features I have been thinking about this a lot, and decided to take a shot at a “minimal” front page customisation. To select this theme here on Meta he…
```
• Author Name + Avatar:
```
[Author name plus avatar](https://meta.discourse.org/t/author-name-plus-avatar/225337) or [Show Original Poster Avatars](https://meta.discourse.org/t/show-original-poster-avatars/171346)
```
• Groups of Categories:
```
> [@Category Groups](https://meta.discourse.org/t/category-groups/200874):
>
> discourse2Summary Category Groups allows you to assign categories to groups, which are then used to sort and collapse categories on the categories page.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-groups)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-category-groups-component](https://github.com/discourse/discourse-category-groups-component)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Featuresinformation_source Important things to n…
```
• Featured category icons:
```
> [@Featured Categories Header](https://meta.discourse.org/t/featured-categories-header/203779):
>
> bookmark_tabsSummary Feature categories on select views.hammer_and_wrenchRepository Link [Manuel Kostka / Discourse / Components / Featured Categories · GitLab](https://gitlab.com/manuelkostka/discourse/components/featured-categories.git)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Cards view List view Settings You can switch between the two above layouts or choose none and declare your own styles. You …
Can also try the online theme editor:
> **[Theme Creator](https://discourse.theme-creator.io)**
>
> Demonstration sandbox for Discourse
Extra’s:
• Single Sign On? SSO
[Setup DiscourseConnect - Official Single-Sign-On for Discourse (sso)](https://meta.discourse.org/t/setup-discourseconnect-official-single-sign-on-for-discourse-sso/13045)
• Discord Bot
[Discord Bot Construction Kit 🤖](https://meta.discourse.org/t/discord-bot-construction-kit/122530)
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [8 november 2023 om 05:14 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772/4 "2023-11-08T05:14:39Z")
> [@SinisterSpatula](#):
>
> removing the sidebar
You can do this by clicking the hamburger icon, so that would be pretty easy to figure out.
> [@SinisterSpatula](#):
>
> adding navigation items to the top bar.
Have a at [Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588)
That might help you get started.