Here are some simple recipes to alter the look of your workflows. These all involve using the Settings tool, and entering some CSS into the Code area.
Start here: Enter these CSS variables and change the hex color codes to those you like.
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,400;1,500&display=swap');
:root {
/* User vars */
--color-body: #180E31;
--color-primary: #7356FF;
--color-secondary: #EFEAFF;
--color-light: #FFFFFF;
/* Theme vars */
--font-size: 16px;
--border-color: rgba(0,0,0,0.15); /* opacity fits any color */
--border-width: 2px;
--border-radius: 5px;
--font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
--color-danger: #e3342f;
--color-success: #198754;
--color-info: #6cb2eb;
--color-warning: #ffc107;
--color-dark: #343a40;
--color-link: var(--color-primary);
}
<style>Key:
- @import url: Google font URL
- --color-body: The body text color
- --color-primary: The button and node title color
- --color-secondary: The background color in the buttons area (behind the buttons)
- --color-light: The content area background color
- --font-size: The paragraph font size
- --font-family: Change this to your google font of choice. Import the font in the first line @import url.
- --color-link: This takes on the primary color by default. You can change this to a hex color code of your choice.
NEW!! Try entering this CSS URL to Settings > Style for a very nice clean theme. Then, change the colors in the code to match your brand. You'd enter this CSS URL in Settings > Style > Choose Custom as the theme:
https://assets.zingtree.com/managed/templates/zingtree_2026.cssContent Blocks & Accordions
See this article for a full CSS reference to customize the style of Content Blocks and Accordions added from the Content Editor toolbar.
CSS Snippets
Example: Remove the quotation mark symbol from the top-left of the content area (Zingtree Default theme) and decrease the left padding:
<style>
.button-node-content::before, .panel-body.panels-node-content::before {
display: none;
}
.panel-body.panels-node-content {
padding-left: 30px;
}
</style>
Example: Enter this code to change the font family (Choose any Google font):
<style>
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
body.zingtree {
font-family: Quicksand;
}
</style>
Example: Shrink your workflow'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 color of the loading icon that shows when a workflow 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:
<style>
span#node-title {
display: none !important;
}
</style>