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’s “Configure More” option allows you to select a site logo, color scheme, font, and home page style for the site:

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/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 Schemes

You can further customize your site by adjusting the color scheme from the “Admin → Customize → Colors” page (located at /admin/customize/colors).

Let’s create a new color scheme to use on your site by clicking the “+New” button on this page:

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!

Once you’re happy with your color scheme, you can assign it to your current theme, and preview it to see the changes to your site reflected live.

Your changes will also be automatically applied to the site once you refresh the page.

For additional information on how you can use color schemes 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 …

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:

• Dark/Light Mode Toggle
• Brand Header
• DiscoTOC - automatic table of contents
• Custom Header Links
• Versatile Banner

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

In addition to the logos you chose on the site setup wizard, Discourse also has several other site branding related settings on the “Admin → Settings → Branding” page (located at /admin/site_settings/category/branding) that you can use to add custom images and logos to your site.

From this page, you can add the following types of logos to your site:

• 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.
• logo small - The small logo image at the top left of your site, seen when scrolling down. Use a square 120 × 120 image. If left blank, a home glyph will be shown.
• digest logo - The alternate logo image used at the top of your site’s email summary. Use a wide rectangle image. Don’t use an SVG image. If left blank, the image from the logo setting will be used.
• mobile logo - The logo used on mobile version 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 image from the logo setting will be used.
• logo dark - Dark scheme alternative for the ‘logo’ site setting.
• logo small dark - Dark scheme alternative for the ‘logo small’ site setting.
• large icon - Image used as the base for other metadata icons. Should ideally be larger than 512 x 512. If left blank, logo_small will be used.
• manifest icon - Image used as logo/splash image on Android. Will be automatically resized to 512 × 512. If left blank, large_icon will be used.
• manifest screenshots - Screenshots that showcase your instance features and functionality on its install prompt page. All images should be local uploads and of the same dimensions.
• favicon - A favicon for your site, see Favicon - Wikipedia. To work correctly over a CDN it must be a png. Will be resized to 32x32. If left blank, large_icon will be used.
• apple touch icon - Icon used for Apple touch devices. Will be automatically resized to 180x180. If left blank, large_icon will be used.
• opengraph image - Default opengraph image, used by many apps and platforms for weblink previews when a page has no other suitable image. Should ideally be square. If left blank, large_icon will be used.
• twitter summary large image - Twitter card ‘summary large image’ (should be at least 280 in width, and at least 150 in height, cannot be .svg). If left blank, regular card metadata is generated using the opengraph_image, as long as that is not also a .svg

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

Additional Customizations

Now that you’ve added a custom theme, color scheme, 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: