Customizing Zingtrees with Themes and Custom CSS

  • Updated
  • 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

    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:

    <style>
    .panel-body {background-color: #DD7439;}
    </style>



    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>


  • 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

    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:

    <style>
    .panel-body {background-color: #DD7439;}
    </style>



    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>


  • Throughout 2022 Zingtree will be upgrading customers to our new faster and more modern user experience! Here's how to tell which experience your Zingtree Authors are currently using.

    Log in to your Zingtree Author account and navigate to My Trees. How does your current My Trees page look?

    Zingtree Classic

    2022-02-25_12-24-51.png

    New User Experience

    mceclip0.png

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request