Documentation › How to use custom styles for printed Org Chart in SharePoint and Microsoft Teams

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 create custom CSS styles that are applied only when printing the chart or generating a multi-page report. This allows you to make the chart easier to read in printed reports without affecting how the chart looks on your SharePoint site.

For example, you can change the font size for generated files only:

Change the font size when printing

You can also change the background color of boxes:

Change the background color when printing

To apply these styles, open the configuration wizard and switch to the Custom code 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.

By adding them to CSS selectors, you can define styles in the Custom CSS tab that apply only to generated files.

To increase the font size for printing, use the following style:

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

To change the background color of boxes, use this style:

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

You can also customize the styles of connection lines in generated documents.

Use the following CSS for printing:

.poch-print-mode .poch-node-line {
  stroke: chocolate;
  stroke-width: 2px;
}

To customize line appearance in reports, use this CSS:

.poch-report-mode .poch-node-line {
  stroke: #000000;
  stroke-width: 2px;
}

If you want to apply the same styles to lines in both print and report modes, you can combine the selectors:

.poch-print-mode .poch-node-line,
.poch-report-mode .poch-node-line {
  stroke: #000000;
  stroke-width: 2px;
}

Learn more in our detailed guide on how to customize lines.

Note

For a complete overview of exporting Org Chart in different formats and platforms, see this blog post. It applies to both SharePoint and Microsoft Teams.