Customizing Zingtree Decision Trees

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. Take a look here.

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.

 

6 Comments

  • Iggy says:

    No way to customize templates beyond CSS? No JavaScript additions?

    At least please add an additional page template to Zendesk custom themes withing your Zendesk plugin…. Hard to integrate with Zendesk when I need a separate page for trees there.

    • Bill Zing says:

      I’m not sure I understand, but I’ll take a stab at it. Are you looking to have the Zingtree theme match the custom Zendesk theme?

      • Iggy says:

        hi, i need to make homepage (1st screen – root tree) different from other trees pages per customer design. You don’t provide any class for home screen 🙁
        I found that I can add some JavaScript to a tree, but can’t catch changes between hidden and visible trees.

        • Bill Zing says:

          Yeah… the CSS styling we provide applies to every node, not just specific nodes.

          However, if you examine the CSS, you’ll see each node falls under a DIV tag with a unique ID. The ID for each node looks like node-TREEID-node number. So you can create CSS specific to each node in that fashion.

          I hope that helps!

          • Teablr says:

            It helps sometimes, but would be great if you could add a class/id to higher level, i.e. to body tag. Homepage very often have to be different from inner pages.

  • Bill Zing says:

    Ok Iggy. By the time you read this we will have class=”zingtree” on the tag for all of our trees. Should make it even easier to customize!

1 Trackback

Leave a Reply

Your email address will not be published. Required fields are marked *