Wizard Themes

Documentation Discourse Custom Wizard
,
1

You can apply a Discourse Theme to a wizard to change the wizard CSS (style), or override wizard locale strings (text).

For an example of a Wizard Theme check out the theme we use for the wizards

Select a Theme

You can select the theme you wish to apply to your wizard at the top of the wizard admin panel.

image

Make sure you save your wizard to apply the change.

CSS (Styles)

Any CSS you add to the theme you apply will be loaded when the wizard loads. This means you can override the styles of any class you see in the Wizard UI.

In our Pavilion Wizard theme (linked above), we’ve added an underline to wizard step titles and a background.

image
image832×654 62.4 KB

See our wizard CSS 
body.custom-wizard {
  background-image: url($background);
  background-size: cover;
  
  .wizard-field {
    margin-bottom: 0.5em;
  }
}

.custom-wizard .wizard-step-title p {
  background-image: linear-gradient(180deg, transparent 95%, #08c 0);
  background-repeat: no-repeat;
  background-color: initial;
  padding: 0px;
  background-size: 100% 100%;
  text-decoration: none;
}

Local Overrides (text)

You can override any static text you see in a wizard by adding a locale override to your wizard theme. For some background on theme locales check out this topic on Discourse Meta.

For an example, check out the locale overide we’ve used in our Pavilion Wizard theme. It’s pretty simple:

en:
  wizard:
    done: I'm ready!

This changes the “Done” button text (which appears on the last step of a wizard) to “I’m ready!”

For a full list of the wizard locale strings, see this section of the custom wizard plugin code.

1 Like
2

How do we control the font that is applied to the Wizard?

I note that your Wizards on this instance still have the default font.

3

The way to control the font at the moment is by adding the font to the theme the wizard is using.

https://meta.discourse.org/t/include-images-and-fonts-in-themes-and-components/62459

4

@angus Is there any way to add locales into a theme component created directly in discourse admin? So basically without having to host the theme component on a git repo.

1 Like