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 for specific data tag (let''s assume we have tags: ["green"]):

 
    svg.tommy .node.green.female 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_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:

     
    .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",
    });

To change the background color:

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

Here is the result:

Edit in BALKAN Code

To hover the clinks:

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

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

To change link labels color:

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

To change the search items:

 

     /* 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;
    }



    


````

How to Use Custom CSS

In this article