How do I install a Theme or Theme Component?

themes

(Sam Saffron) #1

Importing new themes and theme components

To import new themes and components, visit

www.yoursite.com/admin/customize/themes

or via the UI head to Admin > Customize > Themes

Then click on import here

you’ll see this

You can then import theme files from your device or via a theme repository link. The repository link for each theme is provided by the author on the theme topic. There are also options to import from a specific branch and to specify whether the repository is private.

If you import a theme component, you need to also add it to your actives themes. This is covered in detail in the next section

Add theme components to a theme

Let’s say you like the Discourse category banners theme component and want to use it. You would proceed as follows

  1. import the theme from the repository like we discussed above
  2. add it as a theme component to your active / user-selectable themes

You can do that like so:

After importing the component, go to the theme you want to add it to and look for the Theme components section

This list will show all installed theme components. From there you can add theme components to the theme. If we add the Discourse category banners theme component it would look like so

If you have more than one user-selectable themes, you would need to add the component to all of them like we did above.

Checking for updates

Sometimes the themes or components you install will have updates.

If a theme or component has updates, an icon will display next to its name like so

If you select that theme or component you can update it with one click by clicking on the update button here:


This should cover everything you need to install a theme or theme component. If you'd like to learn more about the Discourse theme system, we have a more detailed guide that should provide you with a general overview with more details.

Material Design Stock Theme
Moonclaw Theme port
Hamburger Theme Selector
Sam's personal "minimal" topic list design
Discourse Category Banners
Add /users to top nav
An alternate dark theme
Customization of discourse
Discourse Vincent theme
FlexFooter component
Custom top navigation links
Night Mode Buttons
Easy responsive footer
Header submenus
How do I get this design?
Add /groups to top nav
Custom Header Links
Big Header - Little Header
FlexFooter component
Emoji mention theme component
Custom hamburger menu links
Slick Image Gallery
Topic Stopwatch
Mobile user-cards
Category icons component
Optional mobile title switch component
Add Category Column
Minimal, “classic” topic list design
Change the Like icon
Trust-Level Avatar Flair
Add <abbr> tags to words in posts
Altering default buttons in topic
Alternative Voting Category Style
Script to enable Matomo analytics on Discourse
Banner themes (and instructions for customizing them)
Topic list sidebar navigation
Alternative logo for dark themes
A graceful theme for Discourse
Discourse Youtube player
Iframe Lightboxes
Discourse Button Styles
Custom hamburger menu links
Tiles Image Gallery
Iconified Header Links
Iconified Header Links
Tiles Image Gallery
(+ New topic) button on all pages
Thin header component
StackBlur backgrounds
Linkify words in post
Warn admins when replying to closed topics
Dark Mode Theme Switch (for Safari on macOS)
Dark Admin Editor Component
Discourse Vincent theme
Brand header theme component
Discourse Tab Bar for Mobile
Font size theme
Ghost, a cyberpunk theme for Discourse
Discourse Topic Status Filter
DiscoTOC - automatic table of contents
Discourse Popular Tag Sidebar
Discourse Tag Sidebars
Discourse Topic Author
Defer Topic Button - Mark topic unread
Blog Post Styling
Discourse optional Apple iOS hardware Keyboard support
TavoWEB theme for Discourse
Tag icons component
Versatile Banner
Fakebook, a theme for social media lovers
Discourse Cookie Consent Banner
Minima, a minimal theme for Discourse
Custom source code formatting component
Discourse Category Sidebars
Intercom widget
Daemonite Material Theme: Ample layout adjustments
Category badge adjustment component
Avatar size and shape
Christmas hats component
Discourse Vincent theme
DEPRECATED: Discourse masonry gallery theme component
DEPRECATED: Discourse masonry gallery theme component
"Last Seen" User Card
Media Overlay component
(Chris Beach) #42

Thanks for these instructions.

After adding a theme component today, I initially forgot to add it to my default theme and wondered why it wasn’t active. Does anyone else make this mistake?

If it’s a common problem, perhaps Discourse could prompt when you install a theme component: “would you like to add this component to your theme?”, and clicking “yes” will perform this step for you.


(Sam Saffron) #43

This gets particularly painful here on meta where we have 10 user selectable themes.

I add a component, and then need to remember to click on 10 different themes to add it.

Completely agree it would be ultra nice to

  1. Have a button on components that allows you to add a component to all active themes

  2. After importing a new component prompt user to add it to all active themes (if they wish to)

@Johani any ideas for UX here, can you do a new topic on this if you think it is a good idea?


(Kris) #44

This would also apply to newly added themes, right? So maybe some sort of toggle between enable on all themes and disable on all themes?