How to Use Custom CSS

Sometimes you want to customize your FamilyTree 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 all nodes use [data-shape-id] rect:

 
     
[data-shape-id] rect:first-child {
    fill: #FFB300;
}

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

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

To customize the new adding nodes:

 
     
[data-shape-id^="system"] rect {
    fill: #FFB300 !important;
    opacity: 0.5;
}

To change the color conditionaly, you should add selectors in the svg definition.
Here we add attributes for gender and relationship type:

 
     
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-relationshiptype="${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;
}

To change the background color:

     
#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

How to Use Custom CSS

SVG Nodes

Links

Custom link

Fields

In this article