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

Note

For the versions earlier than 4.x.x (including on-premises ones), please follow this instruction.

With Plumsail Org Chart you can also create custom CSS styles that will be applied to the chart only when you print it or generate a multi-page report. 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 a font size for the generated files only:

Change the font size when printing

Similarly, you can also change a background color of boxes:

Change the background color when printing

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 adds the following classes to elements when generating the files:

  • poch-print-mode for printing and

  • poch-report-mode for the multi-page reports.

Adding them to the CSS selectors, you can handle styles in the Custom CSS tab that will be applied only for the generated files.

To enlarge the font size for printing, the style used was:

.poch-print-mode .poch-box__field {
  font-size: 16px !important;
}

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

.poch-print-mode .poch-group-item__card {
  background-color: #e6f4ff !important;
}