Customize Your Site Branding

[Discourse]

This is a non-technical tutorial that will guide you through customizing the branding and appearance for your Discourse site.

Required user level: Administrator

Want to customize your site branding, but don’t know where to start? Read more to find out!

The Setup Wizard

Discourse is very customizable! A good place to start with site customizations is to login your admin account on the site and run the site’s setup wizard.

The setup wizard allows you to configure your site’s title, default locale, and access settings (public vs private, sign-up vs invite-only, and whether users must be approved). These are the essential first steps for getting your site running.

Once the wizard is complete, you can further customize your site’s appearance — logos, colors, fonts, and more — from the admin panel.

You can preview the available options directly on this page. Click the “Next” button when you have found the settings that work for you. Don’t worry, you can always change these settings later if you decide they’re not what you’re looking for.

Site Themes

Once you have a basic configuration in place, it’s time to customize your site even further!

Themes are expansive customizations that change multiple elements of the style of your forum design, and often also include additional front-end features. Themes have the ability to significantly change the look and layout of your forum.

The #theme category on Meta hosts a variety of pre-created themes that you can use on your site to customize your site’s appearance. This is the best place to search for a theme to use on your site. Go ahead and pick out a theme you’d like to use for your site from this category.

Once you’ve decided on a theme to use for your site, you can add the theme to your site from the Admin -> Customize -> Themes page (located at /admin/config/customize/themes). You can also make changes to your site’s theme, or even create a completely new theme from this page.

The Beginner’s guide to using Discourse Themes is a crash course in Discourse theme basics, and provides an overview of how to install themes on your Discourse site. Read through this guide for instructions on how to install the theme you’ve chosen.

You can also find more info on how to use, create, and share your own themes in:

• Designer’s Guide to Discourse Themes
• Developer’s guide to Discourse Themes

Color Palettes

You can further customize your site by adjusting its color palette from the Admin -> Config -> Colors page (located at /admin/config/colors).

From here you can create a new color palette, select an existing palette to customize, and assign palettes as the default light or dark scheme for your theme.

Select an existing color scheme to base your new color scheme off of, and then customize the colors of your new scheme by clicking on the color next to each color section:

Don’t forget to name your new color scheme and save your changes once you’re finished!

Need some help deciding on colors? A color picking tool like Paletton - The Color Scheme Designer can be very helpful for this!

For additional information on how you can use color palettes within Discourse, see:

Create and share a color scheme

Discourse now supports importing color schemes from remote repository. Here I will demonstrate how you would go about doing this. Navigate to colors and add a color scheme. Head to /admin/customize/colors on your site and create a color scheme. [image] Tips: I used a chrome plugin (color picker) to select colors from an existing image of a palette on the web. If you create a theme, assign the color scheme to the theme and preview it, changes will be reflected live. Create a new gi…

Theme Components

Similar to themes, Discourse also has “Theme Components” you can use to change surface elements of your forum design, or add extra front-end features. Smaller and more targeted than full themes, they can generally (though not always) be combined with other theme components to create a bespoke forum design tailored for your community.

The #theme-component category on Meta contains all of Discourse’s official and non-official theme components. Look through the theme components listed there, and if you’d like to install any of them on your site, just follow the instructions here: The Discourse Theme Interface and How-To Install Theme Components

Some of the most popular Discourse Theme Components include:

• Brand Header
• DiscoTOC - automatic table of contents
• Custom Header Links
• Versatile Banner

Discourse also has a built-in dark/light mode toggle controlled by the interface_color_selector site setting, which can be set to show the toggle in the sidebar footer or the header.

The theme-guides tag on Meta also has lots of how-to guides with ideas for further customizing your site with Theme Components.

Site Branding

Discourse has a dedicated logo configuration page at Admin -> Config -> Logo (located at /admin/config/logo) where you can manage all of your site’s logos and icons.

• Primary logo - Appears on the site’s top navigation, as well as the top of the site’s Email Notifications. Recommended size is 600 × 80 pixels.
• Primary logo dark - Dark mode alternative for the primary logo. Recommended size is 600 × 80 pixels.
• Square icon - A square version of the logo image that appears at the top of the site and is also the mobile app logo. Recommended size is 512 × 512 pixels.
• Favicon - The logo will appear as the icon in the browser tab and the browser favorites/bookmarks.
• Small logo - The small logo image at the top left of your site, seen when scrolling down. If left blank, a home glyph will be shown. Recommended size is 120 × 120 pixels.
• Small logo dark - Dark mode alternative for the small logo. Recommended size is 120 × 120 pixels.

Under the Mobile section:

• Mobile logo - The logo used on mobile version of your site. If left blank, the image from the logo setting will be used. Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1.
• Mobile logo dark - Dark mode alternative for the mobile logo. Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1.
• Manifest icon - Image used as logo/splash image on Android. If left blank, large_icon will be used. Recommended size is 512 × 512 pixels.
• Manifest screenshots - Screenshots that showcase your instance features and functionality on its install prompt page (shown when using “Add to Homescreen” on Android). All images should be local uploads and of the same dimensions.
• Apple touch icon - Icon used for Apple touch devices. If left blank, large_icon will be used. Recommended size is 180 × 180 pixels. A transparent background is not recommended.

Under the Email section:

• Digest logo - The alternate logo image used at the top of your site’s email summary. If left blank, the image from the logo setting will be used. Use a wide rectangle image. Don’t use an SVG image.

Under the Social media section:

• OpenGraph image - Default opengraph image, used by many apps and platforms for weblink previews when a page has no other suitable image. If left blank, large_icon will be used.
• X summary large image - X card ‘summary large image’. If left blank, regular card metadata is generated using the OpenGraph_image, as long as that is not also a .svg. Recommended size is at least 280 × 150 pixels. Don’t use an SVG image.

For best results, we recommend following the size guidelines listed above for each type of logo and icon.

Additional Customizations

Now that you’ve added a custom theme, color palette, some brand logos, and maybe a few theme components to your site, you’re finished with all the basic site customizations!

If you’re still looking for more ways to customize your Discourse site, we recommend reading through any of the following topics that might interest you:

• Customize any text in Discourse
• Customizing the Discourse outer email template
• Creating and configuring custom user fields
• Configure custom emoji

Last edited by @JammyDodger 2024-09-02T16:01:53Z

Check document

Perform check on document:

[jordan-violet]

So what does Manifest screenshots actually do? Like, where are these screenshots used? Is it when someone installs your community as a local app through their browser? Are the images what show up if you make your community discoverable with Discourse Discover?

[Moin]

I see those screenshots when I use the “add to homescreen” option in Chrome on my Android device

[jordan-violet]

Interesting! I thought that’s what they did, but I didn’t see them when I installed on my desktop (Chrome, Windows). But I may not have given them enough time to load/propagate somewhere.

Glad to know I was right on what they do, though!

[calebhearth]

@Discourse

For best results here, we recommend following the size guidelines for each type of logo.

Looks like this section was left out by mistake,

[Moin]

After reading it twice, I think I understood. The size guidelines are included above. For example:

@Discourse

• logo - The logo image at the top left of your site. Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1. If left blank, the site title text will be shown.

I think in general this guide is quite outdated. You can no longer add a logo or configure the look and feel in the wizard. The themes admin page looks totally different now, and color schemes were renamed to color palettes.
The dark/light mode toggle theme component was moved to core. And branding has a new config page at /admin/config/logo.
I just wonder why the size mentioned on the config page is different from the description when I look at the site setting.

600×80 is different from min. 360×120.

[nathank (Nathan Kershaw)]

This topic is now a bit out of date as this stuff has been recently overhauled.

Here are my thoughts on a few minor (but valuable) suggestions for improvements:

Some additional tweaks for Logos and Icons in the core settings

I’ve just set up a new site, and hit a few hiccoughs. First, I love the new admin settings (/admin/config/logo) - they are a vast improvement and visually very nice. Suggestion 1 That the new term “Square icon” be used instead of large_icon in the text explainers. The old name has been changed, but this hasn’t been followed through with in the text. Suggestion 2 That there is a separate Android icon under Mobile, as there is for iOS. At present, the Square Icon is used for the Android home …