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 Rendering tab.
- Click Pick a Color Theme.
- Pick from one of the listed themes, and choose Buttons or Panels style. You'll see a preview of each theme as you scroll through the selections.
- Pick from a Primary, Secondary, and Complementary color, and see how that affects your theme.
- Select Save Theme and Colors when finished.
- Click Update Settings to save your changes permanently.
Changing colors, fonts and text size with CSS
You can easily include CSS code in your tree's rendering. 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.
OR
The Theme/Custom CSS option in the Settings tool lets you enter a URL that contains all the CSS information required to customize the appearance of your tree. If you like, you can go one step further and modify the CSS from one of the URLs generated by the Theme selector to create your own file.
To use your own CSS file: Go to the Settings tool, click the Rendering tab, and enter your custom CSS URL here:
Please note: You'll need to save this CSS file to a server that supports https.
NEW!! Try entering this CSS URL for a very nice clean theme. Then, change the colors to match your brand.
https://assets.zingtree.com/managed/templates/base.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>