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: Change the content font size to 20px:

<style>
.content-only {
font-size: 20px;
}
</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: 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: 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 code 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 paragraph style code in the toolbar to apply the style.

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

 

Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request