Master Component CSS

Guild Exclusive

This is a Master+ feature. To get access, Join the Worldbuilder's Guild!

Family Trees & Bloodlines

The family trees is a complex element with many moving parts. Messing with it can easily break it and its hard to inspect the various elements. This is why most elements use variables for their properties. The list below includes the full list. Copy this into your CSS editor and start messing with the values until you get the desired effect. Once you are done remove any variables you did not change.
Family Tree Variables and Parent for Classes - Click to Expand

.user-css .rhea-family-tree {
  --rootNodeHeight: 600px;
  --rootNodeBg: #e1d9c03d;
  --rootNodeBorder: 2px solid #a296374f;
  --loaderBgColor: #a296374f;
  --loaderBorder: 1px solid #ccc;
  --loaderFont: 'PT Sans', sans-serif;
  --loaderTransition: all .8s ease-out;
  --minimumContainerSize: 3000px;
  --containerBg: transparent;
  --containerCursor: grab;
  --containerTransition: all .3s ease-in-out;
  --charRootNodeCursor: pointer;
  --charRootNodeSize: 120px;
  --charRootNodeBottomSize: 5rem;
  --lineWidth: 2px;
  --lineColor: black;
  --characterPortraitPadding: 5px;
  --characterPortraitOuterBorder: 1px solid #777;
  --characterPortraitInnerBorder: 1px solid #777;
  --characterPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --characterPortraitAnimation: portrait-frame 200s infinite;
  --characterPortraitBg: transparent;
  --characterPortraitWidth: 100%;
  --characterPortraitBorderRadius: 50%;
  --characterNamePadding: 6px;
  --characterNameBg: #aaa;
  --characterNameBorder: 1px solid #999;
  --characterNameBorderRadius: 5px;
  --colorRed: #D5382A;
  --colorDarkRed: #5C3A31;
  --colorRedBrown: #46271E;
  --colorBrown: #674534;
  --colorYellow: #AF945C;
  --colorCream: #FAF7EA;
  --colorDarkCream: #EFE6D4;
  --mainCharWidth: 120px;
  --mainCharPortraitPadding: 7px;
  --mainCharPortraitBg: transparent;
  --mainCharPortraitOuterBorder: 1px solid #777;
  --mainCharPortraitFrameBg: linear-gradient(90deg, rgb(197, 176, 38) 0%, rgb(222, 197, 15) 18%, rgba(244,243,220,1) 35%, rgb(228, 197, 10) 65%, rgb(236, 194, 100) 100%) ;
  --mainCharPortraitAnimation: portrait-frame 200s infinite;
  --mainCharSpouseWidth: 120px;
  --mainCharSpousePortraitPadding: 5px;
  --mainCharSpousePortraitBg: transparent;
  --mainCharSpousePortraitOuterBorder: 1px solid #777;
  --mainCharSpousePortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --mainCharSpousePortraitAnimation: portrait-frame 200s infinite;
  --mainCharChildWidth: 120px;
  --mainCharChildPortraitPadding: 5px;
  --mainCharChildPortraitBg: transparent;
  --mainCharChildPortraitOuterBorder: 1px solid #777;
  --mainCharChildPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --mainCharChildPortraitAnimation: portrait-frame 200s infinite;
  --mainCharGrandchildWidth: 120px;
  --mainCharGrandchildPortraitPadding: 5px;
  --mainCharGrandchildPortraitBg: transparent;
  --mainCharGrandchildPortraitOuterBorder: 1px solid #777;
  --mainCharGrandchildPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --mainCharGrandchildPortraitAnimation: portrait-frame 200s infinite;
  --mainCharParentWidth: 120px;
  --mainCharParentPortraitPadding: 5px;
  --mainCharParentPortraitBg: transparent;
  --mainCharParentPortraitOuterBorder: 1px solid #777;
  --mainCharParentPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --mainCharParentPortraitAnimation: portrait-frame 200s infinite;
  --mainCharGrandparentWidth: 120px;
  --mainCharGrandparentPortraitPadding: 5px;
  --mainCharGrandparentPortraitBg: transparent;
  --mainCharGrandparentPortraitOuterBorder: 1px solid #777;
  --mainCharGrandparentPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --mainCharGrandparentPortraitAnimation: portrait-frame 200s infinite;
  --mainCharGreatgrandparentWidth: 120px;
  --mainCharGreatgrandparentPortraitPadding: 5px;
  --mainCharGreatgrandparentPortraitBg: transparent;
  --mainCharGreatgrandparentPortraitOuterBorder: 1px solid #777;
  --mainCharGreatgrandparentPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
  --mainCharGreatgrandparentPortraitAnimation: portrait-frame 200s infinite;
}

Bellow are a few specific components with just their variables. Use this instead of the full list if what you wish to change is included.
Family Tree Lines - Click to Expand

.user-css .rhea-family-tree {
  --lineWidth: 2px;
  --lineColor: black;
}

Family Tree Name Boxes - Click to Expand

.user-css .rhea-family-tree {
  --characterNameBorder: 1px solid black;
  --characterNamePadding: 5px;
}


.user-css .rhea-family-tree .rhea-character-node .character-data .character-label{
  background-color: var(--colorCream) ;
}

Family Tree Frames - Click to Expand

.user-css .rhea-family-tree {
  --mainCharPortraitFrameBg: linear-gradient(90deg, rgb(197, 176, 38) 0%, rgb(222, 197, 15) 18%, rgba(244,243,220,1) 35%, rgb(228, 197, 10) 65%, rgb(236, 194, 100) 100%) ;
  --characterPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
}

Family Tree (all of the above options together) - Click to Expand

.user-css .rhea-family-tree {
  --lineWidth: 2px;
  --lineColor: black;
  --characterNameBorder: 1px solid black;
  --characterNamePadding: 5px;
  --mainCharPortraitFrameBg: linear-gradient(90deg, rgb(197, 176, 38) 0%, rgb(222, 197, 15) 18%, rgba(244,243,220,1) 35%, rgb(228, 197, 10) 65%, rgb(236, 194, 100) 100%) ;
  --characterPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
}


.user-css .rhea-family-tree .rhea-character-node .character-data .character-name{
  background-color: var(--colorCream) ;
}

Interactive Tables

Below is the list of supported variables for interactive tables. These are defined in the root, but can be set as per the first example.
Interactive Tables Variables

.user-css .thales-render {
   --ComponentBorder: 1px solid transparent;
   --ComponentPadding: 1em 1em;
   --ComponentBackground: transparent;
   --ComponentSplashBackground: rgba(0,0,0,0.4) ;
   --TableContainerBackground: transparent;
   --TableContainerBorder: 0px solid rgba(99,99,99,0.5) ;
   --TableBorder: 1px solid #999;
   --TableBackground: #fff;
   --TableHeaderBackground: #a83427;
   --TableHeaderBorder: 1px solid #222;
   --TableHeaderFontColor: #fff;
   --TableHeaderFontSize: 1.2em;
   --TableHeaderFontWeight: 700;
   --TableHeaderControlsColor: #ddd;
   --TableHeaderPadding: 10px 10px;
   --TableHeaderButtonBackground: #4f6d88;
   --TableHeaderButtonIconColor: #fff;
   --TableRowBorder: 1px solid #c0c0c0;
   --TableRowHoverBackground: #efefef;
   --TableRowRollBackground: #c9f2ff;
   --TableCellBackground: transparent;
   --TableCellFontColor: #222;
   --TableCellPlaceholderColor: #a0a0a0;
   --TableCellPadding: 10px 10px;
   --TableCellBackgroundHover: transparent;
   --TableCellBorder: 1px solid #ddd;
}

Some elements of the tables are not covered by these variables. You can figure out what classes to use by inspecting them in your browser.

Content

1. Family Tress
2. Interactive Tables

CSS Guides

Related Guides

Guide to Family Trees
Guide to Tables