CSS Snippets to Change Font Size and More

  • Updated
  • Here are some simple recipes to alter the look of your trees. These all involve using the Settings tool, and entering some basic CSS into the Code area.


    Example: Enter this code to change the font family (Choose any google font and replace the font name in both places in this snippet):

    <style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

    body {  font-family: 'Montserrat', sans-serif;}
    </style>

     

    Example: Enter this code to make an orange background in Panels style. Replace with the color code of your choice:

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


    Example: Enter this code to change the paragraph text color to #BB414B. Replace with the color code of your choice:

    <style>
    p {
    color: #BB414B;
    }
    </style>


    Example: Shrink your tree's display to 80%:

    <style>
    .widewrapper {
    transform: scale(0.8);
    transform-origin: 0 0;
    }
    </style>


    Example: Hide the History in the Zingtree Zendesk App:

    <script>
    $('#accordion-history').hide() ;
    </script>


    Example: Change the link color:

    <style>
    .content-only a {
    color: #6A148E;
    }
    </style>


    Example: Change the color of the spinning cog icon that shows when a tree is loading:

    <style>
    #please-wait-cog {
    color: #2F6AAF;
    }
    </style>

     

    Example: Display variables in all uppercase:

    <style>
    .form-control.zt-data {
    display: initial !important;
    text-transform: uppercase;
    }
    </style>


    Example: Hide node titles for trees displayed in buttons style:

    <style>
    #node-title {
    visibility: hidden;
    }
    </style>


    Example: Hide node titles and icon for trees displayed in panels style:

    <style>
    .panel-title {
    visibility: hidden;
    }
    </style>


    Example: Increase the size of checkboxes and radio buttons:

    <style>
    input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    }

    input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    }
    </style>


    Example:
    Format quote blocks with a background color. This is helpful to call out an area of an agent script with special instructions. In the Content Node editor, type in some text and use the quote button in the toolbar to apply the style.

    <style>
    blockquote {
    padding: 14px 16px;
    background: #EDF4FC;
    font-size: 14px;
    color: #003FBD;
    }
    </style>

  • Here are some simple recipes to alter the look of your trees. These all involve using the Settings tool, and entering some basic CSS into the Code area.


    Example: Enter this code to change the font family (Choose any google font):

    <style>
    font-family: 'Open Sans', sans-serif !important;
    }
    </style>

     

    Example: Enter this code to make an orange background in Panels style. Replace with the color code of your choice:

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


    Example: Enter this code to change the paragraph text color to #BB414B. Replace with the color code of your choice:

    <style>
    p {
    color: #BB414B;
    }
    </style>


    Example: Shrink your tree's display to 80%:

    <style>
    .widewrapper {
    transform: scale(0.8);
    transform-origin: 0 0;
    }
    </style>


    Example: Hide the History in the Zingtree Zendesk App:

    <script>
    $('#accordion-history').hide() ;
    </script>


    Example: Change the link color:

    <style>
    .content-only a {
    color: #6A148E;
    }
    </style>


    Example: Change the color of the spinning cog icon that shows when a tree is loading:

    <style>
    #please-wait-cog {
    color: #2F6AAF;
    }
    </style>

     

    Example: Display variables in all uppercase:

    <style>
    .form-control.zt-data {
    display: initial !important;
    text-transform: uppercase;
    }
    </style>


    Example: Hide node titles for trees displayed in buttons style:

    <style>
    #node-title {
    visibility: hidden;
    }
    </style>


    Example: Hide node titles and icon for trees displayed in panels style:

    <style>
    .panel-title {
    visibility: hidden;
    }
    </style>


    Example: Increase the size of checkboxes and radio buttons:

    <style>
    input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    }

    input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    }
    </style>


    Example:
    Format quote blocks with a background color. This is helpful to call out an area of an agent script with special instructions. In the Content Node editor, type in some text and use the quote button in the toolbar to apply the style.

    <style>
    blockquote {
    padding: 14px 16px;
    background: #EDF4FC;
    font-size: 14px;
    color: #003FBD;
    }
    </style>

  • 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