Custom Buttons: Colors and Icons

  • Updated
  • Zingtree makes it easy to create custom colored buttons, that can also use stock icons.


    Overview

    Customizing button styles is done by prefixing the button text with special classes. To choose a color, use one of these prefixes:

    • .btn-orange
    • .btn-red
    • .btn-green
    • .btn-blue
    • .btn-yellow
    • .btn-sky
    • .btn-purple
    • .btn-pink


    Here's how to customize a button color

    1. Go to Overview, and edit the node to customize.
    2. Under Question and Action Buttons click Add Action Button.2022-04-26_14-14-22.png
    3. Edit the button text, and prefix it with one of the color options above.  For example, to make a Stop button, enter:2022-04-26_14-16-28.png


    Adding Icons to Buttons

    In addition to colors, we've provided some icon styles you can easily add:

    • .btn-yes
    • .btn-no
    • .btn-careful
    • .btn-caret
    • .btn-arrow
    • .btn-thumbs-up
    • .btn-thumbs-down
    • .btn-information
    • .btn-question

    You can also combine colors and icons together. So .btn-yes.btn-green makes a green yes button. 

    2022-04-26_14-19-05.png

     


  • Zingtree makes it easy to create custom colored buttons, that can also use stock icons.

    Overview

    Customizing button styles is done by prefixing the button text with special classes. To choose a color, use one of these prefixes:

    • .btn-orange
    • .btn-red
    • .btn-green
    • .btn-blue
    • .btn-yellow
    • .btn-sky
    • .btn-purple
    • .btn-pink


    Here's how to customize a button color

    1. Go to Overview, and edit the node to customize.
    2. Click Edit Buttons.
    3. Edit the button text, and prefix it with one of the color options above.  For example, to make a Stop button, enter:
    4. Click Save Changes when done editing buttons.


    Adding Icons to Buttons

    In addition to colors, we've provided some icon styles you can easily add:

    • .btn-yes
    • .btn-no
    • .btn-careful
    • .btn-caret
    • .btn-arrow
    • .btn-thumbs-up
    • .btn-thumbs-down
    • .btn-information
    • .btn-question

    You can also combine colors and icons together. So .btn-yes.btn-green makes the button below. 

    Example: Yes is created as follows:

     


    The Button Customization Gallery tree has examples of every color and style available.


  • 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