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

  If you'd like, you can adjust some other properties of various elements, such as the Search, Roll Buttons, and the Table elements themselves (rows, cells, headers). Do note that some adjustments made to these elements have the potential to break the layout of the tables.
CSS Guides

Comments

Please Login in order to comment!