Overview
Zingtree lets you customize in these ways:
- Pick from several stock Themes provided by Zingtree.
- Customize colors within any of the Themes.
- Create your own CSS file to use instead of a Zingtree Theme.
- Add CSS code to your tree via the Settings tool.
How to Customize Layout and Colors
- Go to the Settings tool.
- Click the Style tab.
- Click Pick a Color Theme.
- Pick from one of the listed themes. With some themes, you can customize the colors easily. Here is what each color category is defined:
- Primary: The color of your buttons, node titles and textual links
- Secondary: The background color in the buttons area (behind the buttons)
- Compliment: The background color of the content area
- Text: The color of your textual content
- Choose if you would like your buttons displayed horizontally or vertically. Choose horizontal if you typically have short action buttons like "Yes", "No", "Continue". Choose vertical if your action buttons are longer textually, and/or if you typically have more than just a few button choices. The vertical style displays your buttons full-width and stacked.
- Click the Preview button at the bottom to see a preview of that theme applied to your tree. The preview will open in another browser tab.
- Click Apply Settings to save your changes permanently.
Using your own CSS file URL:
In the theme dropdown list, choose Custom if you'd like to define and use your own CSS URL. Please note: You'll need to save this CSS file to a server that supports https.
Changing colors, fonts, and text size with CSS in the tree's Settings
You can define and include custom CSS. This can override the defaults in your theme. Go to the Settings tool, and click the Code tab, then enter your custom styling, like this:
Start here: Enter these CSS variables and change the hex color codes to those you like. Usually, just changing the ---color-primary is enough. The primary color will set all of your buttons, titles, and textual links to your chosen color.
<style>
:root {
/* User vars */
--color-body: #180E31;
--color-primary: #7356FF;
--color-secondary: #EFEAFF;
--color-light: #FFFFFF;
/* Theme vars */
--font-size: 16px;
--border-color: rgba(0,0,0,0.15); /* opacity fits any color */
--border-width: 2px;
--border-radius: 5px;
--font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
--color-danger: #e3342f;
--color-success: #198754;
--color-info: #6cb2eb;
--color-warning: #ffc107;
--color-dark: #343a40;
--color-link: var(--color-primary);
}
</style>
Key:
- @import url: Google font URL
- --color-body: The body text color
- --color-primary: The button and node title color
- --color-secondary: The background color in the buttons area (behind the buttons)
- --color-light: The content area background color
- --font-size: The paragraph font size
- --font-family: Change this to your google font of choice. Import the font in the first line @import URL.
- --color-link: This takes on the primary color by default. You can change this to a hex color code of your choice.
NEW!! Try entering this CSS URL for a very nice clean theme. Then, change the colors to match your brand. You'd enter this CSS URL in Settings > Style > Choose Custom as the theme:
https://assets.zingtree.com/managed/templates/zingtree_2025.css
How to Add Icons to Buttons and Titles
FontAwesome 4.7 is included in the Zingtree code, so you just need to add the HTML for the icon you want.
The list of FontAwesome icons is here.
Example: To add a Car icon to a button, just insert this code into the button text:
<i class="fa fa-car"></i>