Custom CSS

Note

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

  • Instead of using custom styles, you can ajust the Org Chart view with Bulma classes.

The Org Chart allows to specify custom CSS styles. If you are familiar with CSS , you can adjust visualization of company structure to your brand book.

On the picture below you can see example of CSS style which changes the background of boxes to black:

Custom CSS

You can change the background of the person’s box to black using CSS like this:

.poch-group-item__card.box {
  background-color: black !important;
  border-color: black !important;
}

And this is another example which resizes Org Chart boxes to smaller size. Thus, more boxes can be displayed in the single screen.

/*Width of the box*/
.poch-application-container .poch-group-item  {
  width: 170px;
}

/*Font size for the fields in the box*/
.poch-application-container .poch-box__field {
  font-size: 12px;
}

/*Font size for the header field in the box (the first in the box)*/
.poch-application-container .poch-box__field.poch-box__header {
  font-size: 12px;
}

/*Width of the photo in the box*/
.poch-application-container .poch-box .poch-photo-container.is-medium {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

Review more articles on customizing Org Chart look:

Note

Go to the next step of the configuration wizard General.