Use custom styles for printed Org Chart in SharePoint and Microsoft Teams

With Plumsail Org Chart you can also create custom CSS styles that will be applied to the chart only when you print it. That way, you can apply custom styles that will help reading the chart after printing it, but without affecting the chart on your SharePoint site.

You can change font-size for printing purposes only:

Similarly, you can also change background color of boxes:

You need to open the configuration wizard and switch to the Custom CSS step. Then paste the CSS styles described below into the editor.

Org Chart will add the class pl-print-mode to elements before printing out the chart. This way, you can handle styles in the Custom CSS tab that will be applied only when printing the chart.

To enlarge font-size for printing, the code used was:

.pl-print-mode .pl-item-card .field-container {
  font-size: 16px;
}

And to modify the background color of boxes the following code was added:

.pl-print-mode .pl-item .pl-item-template {
  background-color: #e6f4ff !important;
}