customize-blog

We totally understand the need to expand the customizable features of Zingtree. The beauty in creating your own decision trees is the flexibility we allow to make it communicate, perform, and look the way you want it to! Since we’ve had requests for the ability to further customize the look and feel of deployed trees, we’ve added some basic yet powerful customization options to Zingtree to further improve them for your customers and for your company, organization, or project. Without further ado, you can (as of March 8th):

  • Use your own brand colors
  • Select fonts and styles
  • Add icons to your page titles and buttons
  • See your trees perfectly on tablet and mobile devices

To see an example of these new changes, we’ve altered our “What to Wear” demo with newly stylized red buttons and button icons.

More details below!

Make Trees Mobile-Friendly

Zingtree uses Bootstrap as a framework for Zingtree-hosted and iFrame-deployed trees. Bootstrap is a wonderfully popular HTML, CSS and JavaScript framework that makes web pages look good on desktop, tablet and specifically mobile devices. Check out http://zingtree.com from your phone, and you’ll see just how nicely it works.

Experiment With Fonts And Icons

Zingtree also uses the ever-fantastic FontAwesome package for those cute icons you see everywhere on the site. FontAwesome is well suited to work with Bootstrap.

FontAwesome is included in the Zingtree code, so you just need to add the HTML for the icon you want. You can see the full list of FontAwesome icons here.

It’s super easy to implement. For example, to add a Car icon to a button, just insert this code into the button text:
<i class="fa fa-car"></i>

Customize Layout and Colors

There are a lot of web sites offering customized Bootstrap templates – like Bootswatch. You can add these templates (or your own creation) to your Zingtrees from the Settings page.

Zingtree CSS Settings

 

We hope you enjoy this new, exciting customizing updates. Experiment, play, and let us know what you think.

Update August 7, 2015:

Here’s an example CSS file you can examine and modify. It works for both Panels and Button styles. Download here.