How to Use Custom CSS

Sometimes you want to customize your Family Tree JS 2 a little bit, like changing a color or a font style. You can use custom CSS to overwrite or add new CSS properties to the chart styles.

SVG Nodes

To change the color of a specific node [data-shape-id="id"] rect:

[data-shape-id="8"] rect {
  fill: #D9CFC1 !important;
}

To change the color conditionally, you should add selectors in the SVG definition.

For exampke if we have sexOrGender fields, and we would like to have different colors for males and fimales.

Here we add attributes for gender and relationship type:

familyTree.template.svg = function (node) {
    let sexOrGender = "";
    if (node.familyMember.sexOrGender == "male") {
        sexOrGender = "male";
    }
    else if (node.familyMember.sexOrGender == "female"){
        sexOrGender = "female";
    }
    return `<rect data-gender="${sexOrGender}" 
                    data-relationship-type="${node.relationshipType}"
                    rx="20" ry="20" x="0" y="0"
                    width="${node.width}" height="${node.height}"
                    style=" stroke:${node.stroke}; fill: #FFB300; stroke-width: ${node.strokeWidth};">
            </rect>`;
};

Here is the CSS:

[data-gender] {
    fill: #A68A4A !important;
}

[data-gender="male"] {
    fill: #3A5A78 !important;
}

[data-gender="female"] {
    fill: #8E4B4B !important;
}

[data-relationship-type='sibling'] {
    fill: #4A8A68 !important;
}

Links

To change the color of all links:

[data-link-id] path {
    stroke: #484742 !important;
}

Custom link

To change a custom link:

[data-link-id="1::8:"] path {
    stroke-dasharray: 5px, 5px;
    stroke: #918E85 !important;
}

Background

#tree>svg {
    background-color: #2E2E2E;
}

Fields

Here is how to change the font and the color of all fields:

[data-field] {
    color: #1A1A1A;
    font-family: Impact;
    text-transform: uppercase;
}

All buttons

.bft2-button>circle {
    fill: #484742 !important;
}

Expand/Collapse buttons

[data-button^="expcoll"]>circle {
  fill: #858482 !important;
}

Edit buttons

[data-button="edit"] circle {
    fill: #4A8A68 !important;
}

[data-button="camera"] circle {
    fill: #A68A4A !important;
}

Code example:

Edit in BALKAN Code