To engage your customers around your roadmap, you can make it look and feel like you wish by creating custom styling themes for your roadmap views.
What is a roadmap styling theme?
A roadmap styling theme is a set of visual attributes (logo, colors, fonts, etc.) that will be applied to one or several roadmap views and will be visible when sharing this roadmap via a public link.
How to create a styling theme?
To create a styling theme, go to the dedicated settings in the roadmap section and click on the "Create new them" button.
This will open a page with a sample roadmap on the left and the theme configuration panel on the right of your screen. Every change you make to the theme will automatically be reflected on the sample roadmap.
You can start by giving your theme a name and, optionally, a description.
Base template
Then, you will have to choose one of our four base templates that will give your theme a default visual structure:
Select the "Light/flat" template if you plan to have a light background and no color for your project cards
Select the "Light/colored" template if you plan to have a light background with colored project cards
Select the "Dark/flat" template if you plan to have a dark background and no color for your project cards
Select the "Dark/colored" template if you plan to have a dark background with colored project cards
All these templates come with some default properties (contrasts, etc.), which are not visible and editable from the interface. We set those properties for you to ensure that your themes look great.
Apart from those properties, you can configure everything described below.
Branding and banner
In this section, you can configure how the top banner of your roadmap will look like.
Favicon
The favicon is the icon displayed in the tab header when your roadmap view is opened in a browser.
Logo
The logo will be displayed in the top-left corner of your roadmap view. You can also add a hyperlink that will be opened when someone clicks on the logo.
Background
You can choose a background color for your banner.
Pro tip: add two background colors to build gradients!
Viewport
In this section, you can configure how your everything below the banner will look like:
Theme color (only available with the Light/Colore and Dark/Colored templates): the background color of your project cards
Font family (global): the font that will be applied to all the text visible on your roadmap, like titles, descriptions, captions, etc.
Primary font (global): the font color that will be applied to the titles of your roadmap, groups, sub-groups, and project cards
Secondary font (global): the font color that will be applied to your roadmap's description, groups' description, and the captions of your project cards
Card primary font: the font color that will be used only for the titles of your project cards and that will overwrite the global primary font
Card secondary font: the font color that will be used only for the captions of your project cards and that will overwrite the global secondary font
Background: the color of the view's background (independently from the banner's background)
Background image: you can also upload an image that will be displayed in the background instead of just a color
Project dialog
In this section, you can configure how your roadmap project will look when clicking on a project card to open it:
Content background: the color of your cards' background when the card is opened
Footer background: the color of your cards' footer when the card is opened
Project fields
Customize colors
Here is where you can overwrite the default colors that can be assigned to the values of your project fields in the Edit fields settings panel.
For each default color inside the circles on the left, you can match a new custom color in the square based on your branding, for example.
These custom colors will only be visible in public views where you apply the related roadmap theme. Inside Harvestr, only the default colors will be visible.
Applying themes to public roadmap views
Once you have created a styling theme, you can apply it to one of your public roadmap views by opening the theme selection dropdown in the top right corner.
You can select the theme you want, and it will automatically be applied to the view.
