The Theme Builder enables the creation of basic custom themes to apply to your Shorthand stories. Your theme can include a unique logo, multiple fonts, colours, and more.

The theme builder can be accessed from two locations:

From the story editor
​​From the story editor of a standalone story (not a story under a Shorthand "Project") choose "THEMES" from the top menu, then click the button to create a new theme:

Or if you have an existing Theme Builder theme you can edit it from here as well by hovering over the theme and selecting edit:

From the dashboard
If you're on a plan with user permissions or multiple teams, choose 'Settings' in the bottom left-corner of the screen, select the appropriate team (if not already selected), then select 'Themes' from the TEAM SETTINGS sub-menu:

Then select the button to create a new theme or edit an existing theme:

The theme builder is divided into two main sections: a left-side pane with a menu of configurable items, and a larger right-side pane that acts as a preview of your theme elements.

When you create a new theme, the left-side pane will start with the 'Details' menu category open. Here you can enter a name and description for the theme so that you and your collaborators can recogise it and/or know what type of stories to use it with:

Click the Logo menu item in the left pane to upload a logo file for your theme. Provide an image that is at least 60px high, to ensure it will display well across screen-types. We recommend using a PNG file. PNG transparency is supported and advised if your logo isn't rectangular.

Add the URL that you would like the logo to link to in your theme, such as the address of your main website.

Add Image alt text to your logo so that it can be read by screen readers. Consider using the standard format: "[Organisation name] logo."

Choose the 'Typography' menu item in the left pane to select up to six fonts to add to the theme. Two fonts will already be specified. If you don't wish to use these, click the trash-can icon beside them, then click "ADD A NEW FONT". A menu will open with a range of fonts to choose from:

Select a font name, and the font will be added to your set.

The menu also includes buttons to "Browse more fonts", which will open a menu displaying many more Google fonts to choose from. The menu enables searching (handy if you know the name of a particular Google font), filtering the list by font style, and several sorting options.

Scrolling further down the left pane, you'll see fields with which you can choose to apply any of your selected fonts to various story components that use text. These include four heading styles, body text, button text and blockquotes. As you choose from the drop-down fields, you'll see your selected fonts applied in the main preview window.

Headings may use the same or different font to that used for body text. Often a bolder or more decorative font is used for headings, with a more neutral font for body text. Consider accessibility best practices.

Choose the 'Palette Colours' menu item and you'll see the list of colours already contained in the theme, along with their HEX code and a name. Each of these colours can be replaced. To do so, either click one of the coloured dots and choose a new colour from the colour picker that displays (its HEX code will be automatically added to the table), or directly enter the HEX code of a colour to add (the coloured circle will update to show the appropriate colour):

Naming your theme colours will help you and your story collaborators to identify the colours within the editor. This is useful to ensure your colours can easily be applied consistently in your stories, especially if your theme has multiple similar colours: for instance it might be beneficial to name colours as "Heading blue", "Background blue", & "Highlight blue".

If you aren’t sure which colours to use, consider using a tool like Coolor to generate a palette.

The Shorthand editor provides 'section options' to choose between two different colour themes for each section in a story. These are labelled as a "Light" and a "Dark" option. When creating a story these options are an easy way to apply variations of a theme to a section with a single click. Typically the Light option contains a light-coloured background with contrasting text colour, and the Dark option contains a dark-coloured background with a contrasting text colour.

Within the Theme Builder, these Light and Dark options are configurable in the Theming menu item:

Choose the colours to apply as defaults for the Text and Background (+ overlays) for the Light and Dark options for your theme. Use the right-hand side of the window to see the colours applied and ensure they present enough contrast with your chosen fonts.

It is common for themes to use inversions of the same colours for their 'Light' and 'Dark' versions, however the terms 'Light' and 'Dark' are merely suggestions. You could create variations that are both light in tone, both dark, are only slight variations of the same basic colours, or starkly different.

Not all your stories may have or need internal navigation, but when they do, it appears as a row at the top of the page. Styling for that navigation row can also be set in the theme. In the example below, the navigation row has been set in the left panel to have a blue background and white text, which is previewed in the right-hand preview pane:

When you are finished creating your theme with the Theme Builder, click the “SAVE AS NEW” button at the top-right of the screen.

To apply the theme to your story, navigate back to your workspace, select the story you’d like to apply the new theme to, and open the THEMES panel, then click “Apply” beside the new theme:

Theme Builder themes can be edited at any time. Readers will not see the theme changes until/unless the stories are republished.
​

If you make any theme edits for stories that will be republished then be sure to review the stories before republishing, particularly if you update the color palette.