Hierarchy Maintenance DSP Plugin - adjusting the node style

If you are using the Hierarchy Maintenance plugin you might want to adjust the style of the nodes, for example, to display additional text, or use a different color.  This can be achieved by adjusting the HTML style in the delivered package.

We recommend taking a copy of the file before making any amendments.  Knowledge of HTML and CSS is recommended to make these changes.  For some background reading visit this page - https://www.w3schools.com/css/css_intro.asp.

The original HTML styles used can be seen in this stylesheet - https://github.com/dabeng/OrgChart/blob/master/src/css/jquery.orgchart.css.  Using this stylesheet for reference, find the property of the element you wish to modify, then copy it to the delivered package.

The delivered content uses red as its color and small nodes, as seen below.

To adjust the color of the node title perform the following steps.

1 - Using the stylesheet here - https://github.com/dabeng/OrgChart/blob/master/src/css/jquery.orgchart.css identify the property to adjust (it is called background-color).  Copy this whole section from the stylesheet

2 - Locate the file Hierarchy.aspx in the custom webapp folder on the DSP application server.  The folder will be named DSP\Web\UserArea\{GUID of Custom WebApp}\web.

3 - Open the file in a text editor and paste the selected text into the <style> section.  Remove the properties you don't want to adjust, and adjust the background color to the desired value.  It should now look like this

 <style type="text/css">

    #chart-container { height: 600px; border: none; }

    .orgchart { background: #fff; }

    .orgchart .node .title {

        background-color: DarkOrange;

    }

  </style>

The hierarchy will now be displayed with a dark orange title.

Adjusting the node width and text wrapping is achieved using the same technique.  Applying the following styles will allow larger descriptions to be displayed.

.orgchart .node {
width: 200px;
}

.orgchart .node .content {
height: 40px;
white-space: pre-line;
}