Example: Custom Styling with CSS

jOrgChart makes it easy to apply custom styles to your chart. You can either override the default CSS classes or add your own classes to specific nodes for targeted styling.

This example demonstrates how to add custom classes to <li> elements, which are then transferred to the chart nodes.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>jOrgChart - Custom Styling Example</title>
    <link rel="stylesheet" href="../css/jquery.jOrgChart.css"/>
    <style>
      body { font-family: sans-serif; }
      #chart-container { margin: 20px; }
      /* Base node style */
      .jOrgChart .node {
        border-radius: 4px;
        border: 2px solid #666;
        background-color: #f0f0f0;
      }

      /* Custom style for 'management' nodes */
      .jOrgChart .node.management {
        background-color: #d1e7dd; /* Light green */
        border-color: #198754;
      }
      .jOrgChart .node.management a {
        color: #0a3622;
      }

      /* Custom style for 'development' nodes */
      .jOrgChart .node.development {
        background-color: #cfe2ff; /* Light blue */
        border-color: #0d6efd;
      }
    </style>
</head>
<body>

    <!-- Data source with custom classes on <li> elements -->
    <ul id="org-data" style="display:none">
        <li class="management">
            <a href="#">CTO</a>
            <ul>
                <li class="management">Engineering Manager</li>
                <li class="development">Frontend Team Lead
                    <ul>
                        <li class="development">Senior Developer</li>
                        <li class="development">Junior Developer</li>
                    </ul>
                </li>
                <li class="development">Backend Team Lead</li>
            </ul>
        </li>
    </ul>

    <!-- Chart container -->
    <div id="chart-container"></div>

    <!-- JavaScript Libraries -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.jOrgChart.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            $("#org-data").jOrgChart({ chartElement : '#chart-container' });
        });
    </script>

</body>
</html>

Explanation

Classes on <li> Elements: In the #org-data list, we have added classes like management and development to the <li> tags.
Class Transfer: The jOrgChart plugin automatically copies any classes from an <li> element to its corresponding <div class="node"> in the rendered chart. The one exception is the special collapsed class, which is used for functionality and not copied.
CSS Targeting: In our <style> block, we can now create CSS rules that target these specific classes. For example, .jOrgChart .node.management applies a green background only to nodes that were generated from an <li class="management">.

This technique provides a powerful and semantic way to style different parts of your organization chart.