How to Use Custom CSS

Sometimes you want to customize your FamilyTree 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.

Nodes

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

 
       Copy
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.

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

To change the color of one particular node:

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

To change the color for specific data tag (let''s assume we have tags: ["green"]):

 
       Copy
svg.tommy .node.green.female rect{
    fill: #00D3A5;
}

Links

To change the color of all links:

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

Fields

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

 
       Copy
FamilyTree.templates.tommy_female.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_female.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>`;
FamilyTree.templates.tommy_male.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_male.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:

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

To change the color of the second field:

 
   Copy  
.field_1 {
    fill: #cfcfcf;
}

Other selectors

To change the background color:

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

To change the mode use this option in the configuration:

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

Here is the result:

Edit in BALKAN Code

nodeTreeMenu icon:

 
       Copy
#base_tree_menu path, #base_tree_menu ellipse {
    fill: red
}

To hover the clinks:

 
   Copy  
[data-c-l-from]:hover {
    cursor: pointer !important;
}

[data-c-l-from]:hover>path:first-child {
    stroke-width: 3;
}

To change link labels color:

 
   Copy  
[data-l-id] text {  
    fill: #750000;
}

To change the search items:

 
   Copy  
/* border color */
div.bft-light .bft-input>input{
    border-color: red ;
}

/* input field on focus */
div.bft-light .bft-input>input:focus {
    border-color: green;
}

/* the search label on focus */
.bft-light .bft-input>label.focused, .bft-dark .bft-input>label.focused {
    color: green !important;
}

/* the hovered search resutt */
.bft-light .bft-search [data-search-item-id]:hover, .bft-light .bft-search [data-selected=yes] {
    background-color: green !important;
}