Show / Hide Table of Contents

How to Use Custom CSS

Sometimes you want to customize your Family Tree JS 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.


To change the color of all male nodes use svg.[template_name] .node.male>rect: For circular nodes use circle instead of rect.

 
    svg.tommy .node.male>rect {
      fill: #039be5;
    }   

To change the color of all male nodes use svg.[template_name] .node.female>rect: For circular nodes use circle instead of rect.

 
    svg.tommy .node.female>rect {
      fill: #FF46A3;
    }   

To change the color of one particular node:

 
    svg.tommy [data-n-id="3"].node.male>rect {
        fill: #00D3A5;
    }


To change the color of all links:

 
    [data-l-id] path {
        stroke: #ffca28;
    }


To change a field, you need to define a class in the field declaration.

 
     FamilyTree.templates.tommy.field_0 = 
        '<text width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="95" text-anchor="middle" class="field_0">{val}</text>';
     FamilyTree.templates.tommy.field_1 = 
        '<text data-width="130" data-text-overflow="multiline" style="font-size: 14px;" fill="#ffffff" x="230" y="30" text-anchor="end" class="field_1">{val}</text>';

To change the color and the font-family of the first field:

     
    .field_0 {
        font-family: Impact;
        text-transform: uppercase;
        fill: #cfcfcf;
    }

To change the color of the second field:

 
    .field_1 {
        fill: #cfcfcf;
    }

To change the mode:

 
    var family = new FamilyTree(document.getElementById("tree"), {
        mode: "dark",
    });

Here is the result:



To change the background color:

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