Theme Builder: Customize your Flyers, Menus and more!

March 31, 2022 15:51

With the release of Themes 2.0 in March 2021, the Raydiant Dashboard now includes the ability to create your own custom themes for use with Flyers, Menus, and other built-in Raydiant apps. In this article, we'll show you how to create and manage your own themes!

Creating a New Theme

You can create a new theme from any saved presentation that supports themes. (For now, that means a saved Flyer, Video, Newsfeed, Menu, Clock, Calendar, Instagram, Soundtrack Your Brand, Multizone, or Toast presentation.)

On any presentation that supports themes, you'll see the theming controls:

Screen_Shot_2021-04-13_at_14.47.17.png

From left to right, these icons mean:

Edit current theme (disabled for Raydiant's default themes)
Theme manager (edit, duplicate, and delete your custom themes)
Theme builder

Click on the + icon, and you'll see the theme builder, with default fonts and colors applied to the presentation you're editing:

Screen_Shot_2021-04-13_at_15.03.56.png

From here, you can choose the fonts, font colors, background color, border color and background image for your new theme.

Custom fonts

For each type of text, you can choose from 15 distinct fonts to find one that matches your desired look and feel. If you're not able to find a font that matches your branding you can choose to upload custom fonts. Scroll down to the "Uploading Custom Fonts" section to learn more.

Custom colors

The color picker allows you to either select a color by eye or directly enter a color hex code if you want to use a specific color associated with your brand for borders, background and fonts.

Custom background images

Upload a custom background image to breathe life into your theme. Press the "Background Image" field and choose an image to upload. Raydiant supports GIF (animated and still), JPG, PNG, SVG, and BMP images. For best results, use a high-resolution photo with a 16:9 aspect ratio. Images with a resolution of 1920x1080 are perfect. Images with lower resolutions may appear pixelated, while images with other aspect ratios may be letterboxed.

Other considerations

Not all apps use all of the available themes features. For example, the Flyer shown above doesn't use "Heading 2 Text" because it only has header text and body text, but Menus presentations use "Heading 2 Text" heavily for item names. We recommend testing your themes with each different presentation to make sure they look the way you want!

Screen_Shot_2021-04-13_at_15.40.10.png

Once you're happy with your theme, you can hit "Done" to use it with the current presentation—or, if you think you'll want to use the new theme in other presentations, hit "Add to List" to save it for future use!

Managing Your Custom Themes

Clicking the theme manager icon on any presentation allows you to easily edit, duplicate, or delete any custom themes you've created, making it super easy to create variants of your themes with minor differences depending on your needs. (Raydiant's default themes can't be removed via the theme manager, so don't worry about accidentally deleting them.)

Screen_Shot_2021-04-13_at_15.48.22.png

Uploading Custom Fonts

If you're not able to find fonts that match your branding you can choose to upload custom fonts. In the Theme Manager, scroll down until you see the "Font(s) Uploader" field. Press it and select font files you wish to upload. Raydiant currently supports WOFF & TTF file types.

Make sure to include hyphens in your filenames to distinguish font names from their weights ie. LuxuriousRoman-Regular.woff rather than LuxuriousRomanRegular.woff. Omitting hyphens and uploading multiple fonts from the same family, with varying weights, will result in them showing as distinct fonts in the font selector.

"Catamaran" font files uploaded without hyphenation result in distinct fonts displayed in a theme's font selector. Each of these will have only one "Regular" weight.

"Catamaran" font files uploaded with hyphenation result in only one "Catamaran" font displayed in a theme's font selector. Weights are selected using the weight selector when editing a theme.

Screenshot_2022-02-04_at_11.36.12.png

Weight selector for the "Catamaran" font when using hyphenation.

The following font weights are supported:

bold
bolditalic
extra
extrabold
extrabolditalic
extraitalic
extralight
italic
light
medium
regular
semi
semibold
semibolditalic
semiitalic
thin
blackitalic
black
lightitalic
extralightitalic
mediumitalic
thinitalic

After a font is uploaded it may take a minute or two for it to process and become available in Theme Builder's font selectors. There is currently no way to delete fonts. If you're an Enterprise user any fonts you upload will be accessible to everyone in your domain.

If you have any questions about creating themes with the new theme builder, contact us at support@raydiant.com!