Customizing Zingtrees with Themes and Custom CSS

  • Updated


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

  1. Go to the Settings tool.
  2. Click the Rendering tab.
  3. Click Pick a Color Theme.
  4. 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.

  5. Pick from a Primary, Secondary and Complementary color, and see how that affects your theme.
  6. Select Save Theme and Colors when finished. 
  7. Click Update Settings to save your changes permanently.


Advanced CSS Customization

This detailed video (about 12 minutes) shows how to do various CSS Customizations:


Simple Method - Entering Style Code Directly

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:

Example: Enter this code to make an orange background in Panels style:

.panel-body {background-color: #DD7439;}

Advanced Method - Creating your own CSS File

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.


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>


Was this article helpful?

2 out of 2 found this helpful

Have more questions? Submit a request

Didn't find what you need?

Our friendly customer support team is here to help

Submit a Ticket

Looking for help or advice?

Reach out to our knowledgeable community of users.

Zingtree Community