Pedigree Chart (Indented)

Overview

Indented Pedigree Charts are User Items that create pedigree charts where parents are indented under the entry for their child. The charts include plus and minus symbols that allow expanding or collapsing sections of the tree. The Second Site demonstration site includes an example chart.

For people in the chart who have a person page entry, the chart entry links to the person page entry and vice-versa.

Edit Indented Pedigree Chart

The Edit Indented Pedigree Chart window controls the properties of an Indented Pedigree Chart.

Shared Properties

Second Site uses many of the same properties for all the different chart types. If you do not see a property explained here, look for it on the Chart Properties page. See the Chart Membership page for an explanation of the Continue Excluded Lines property and other topics related to why people appear—or don't appear—in charts.

Include Non-Primary Parents

If the Include Non-Primary Parents property is checked, the chart will include parents with non-primary relationship tags. The default is unchecked. Non-primary parents appear after primary parents.

When non-primary parents appear in the output, Second Site inserts the relationship tag label in parentheses after the name.

Dynamic Features

The Indented Pedigree Chart includes some dynamic features that are implemented via browser scripting.

The chart may be configured to open fully collapsed or fully expanded based on the setting of the Open Collapsed checkbox.

The chart includes a Collapse All button to close all the expanded sections and an Expand All button to open all collapsed sections. For large charts with thousands of members, the browser may take a long time to respond to clicks on the Collapse All and Expand All buttons. For that reason, you should split large pedigrees across multiple charts.

Note The controls for the dynamic features are not visible when viewing the page using Internet Explorer version 7 or less, but are visible in modern browsers. The chart will always open fully expanded when the dynamic features are disabled.

Other Information

Most people who visit your site will understand that the [+] and [-] symbols open and close branches of the tree. Still, if you want to explain how the controls work, you may want to use the symbols in the text. To do that, you can use the following HTML to produce the same symbols as used in the chart:

<button class="iconlegend iconlistopen"></button>
<button class="iconlegend iconlistclose"></button>

Stylesheet Sections

The items in the chart are affected by the following Stylesheet sections. The sections apply to both the Indented Descendant Chart and Indented Pedigree Chart.

Stylesheets.Theme.Charts: This section defines the default color values for the items in all chart types.
Stylesheets.System.Charts.Indented Chart Items: This section defines the "icbase" class that is assigned to all items in the chart. Use this section to alter the border or font characteristics. The border color and text color are set in the Stylesheets.System.Charts.Indented Chart Colors section.
Stylesheets.System.Charts.Indented Chart Colors: This section defines the colors for specific items in the chart. The colors default to the same colors defined in the Stylesheets.Theme.Charts section, but they are applied to more specific types of entries. So, for example, the Stylesheets.Theme.Charts section has a male-background-color property and that value is assigned to the father-background-color and son-background-color properties in the Stylesheets.System.Indented Chart Colors section. The father-background-color value is used in the Indented Pedigree Chart and the son-background-color value is used in the Indented Descendant Chart.

CSS Information

The following information is intended for advanced users.

The Indented Pedigree Chart uses the following CSS classes. This is not an exhaustive list.

Multiple CSS classes are assigned to many chart items. An entry for a father in the chart is assigned the classes icbase and icfather, for example.

Class	Description
cf	The `cf` class is assigned to the DIV element that encloses all charts in Second Site. The properties of the `cf` class are modified via the Stylesheets.System.Charts.Container section.
chartindped	The `chartindped` class is assigned to the DIV element that encloses all charts in Second Site. There is no Stylesheet section for the `chartindped` class, but you can use it in the selector of a User Style to make a rule that applies to items in Indented Pedigree Charts only. So, for example, a User Style with the selector `.chartindped .icsubject` would apply to subjects in Indented Pedigree Charts, but not to subjects in other chart types.
icbase	The `idbase` class is assigned to all the people in the chart, i.e., subject, mothers, and fathers that appear in the chart. The properties of the `idbase` class are modified via the Stylesheets.System.Charts.Indented Chart Items section.
icsubject	The `icsubject` class is assigned to the subject of the chart. The properties of the `icsubject` class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "subject". Second Site also uses the values assigned to the subject to highlight other entries when following a link from a person page to a specific person in the chart.
icfather	The `icfather` class is assigned to fathers in the chart. The properties of the `icfather` class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "father".
icmother	The `icmother` class is assigned to mothers in the chart. The properties of the `icmother` class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "mother".
icnonprimary	The `icnonprimary` class is assigned to non-primary parents in the chart. There is no Stylesheet section for the `icnonprimary` class, and Second Site does not assign any properties to the class, but you can use it in the selector of a User Style.
iclabel	The `iclabel` class is assigned to the tag label that accompanies non-primary parents in the chart. There is no Stylesheet section for the `iclabel` class, and Second Site does not assign any properties to the class, but you can use it in the selector of a User Style.
icunknown	The `icunknown` class is assigned to people of unknown gender in the chart. The properties of the `icunknown` class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "unknown".
cdt	The `cdt` class is assigned to a SPAN element that encloses the dates in the chart. The properties of the `cdt` class are modified via properties in the Stylesheets.System.Charts.Chart Dates section.
cgn	The `cgn` class is assigned to SUP elements that enclose generation numbers in the chart. The properties of the `SUP` elements are modified via properties in the Stylesheets.System.Sources.Superscripts section. There is no Stylesheet section for the `cgn` class, and Second Site does not assign any properties to the class, but you can use it in the selector of a User Style. Second Site uses the selector `sup.cgn` to set the font-style to italic. You should use the same selector to modify other attributes of the generation number. It's difficult to achieve good, cross-browser results for SUP elements, so I suggest you test any modifications in multiple browsers.
icg1, icg2, etc.	The `icgN` classes are assigned to people in the chart based on the number of generations from the subject to the current person. So, for example, the `icg0` class is assigned to the subject: there are zero generations between the subject and himself or herself. The `icg1` class is assigned to the parents of the subject, `icg2` is assigned to the grandparents of the subject, etc. There are no Stylesheet sections for the `icgN` classes, but you can use them in the selectors of User Styles to make rules that vary by generation. For example, to assign alternating background colors for the first ten generations in the chart, you could define two User Styles as follows:
selector-1: icgn1, icgn3, icgn5, icgn7, icgn9 parameters-1: background-color: #eee; selector-2: icgn2, icgn4, icgn6, icgn8, icgn10 parameters-2: background-color: #ddd; You can copy the text above and then use the special paste command for User Styles to add it to your SDF file.

Class

Description

The cf class is assigned to the DIV element that encloses all charts in Second Site. The properties of the cf class are modified via the Stylesheets.System.Charts.Container section.

chartindped

The chartindped class is assigned to the DIV element that encloses all charts in Second Site. There is no Stylesheet section for the chartindped class, but you can use it in the selector of a User Style to make a rule that applies to items in Indented Pedigree Charts only. So, for example, a User Style with the selector .chartindped .icsubject would apply to subjects in Indented Pedigree Charts, but not to subjects in other chart types.

icbase

The idbase class is assigned to all the people in the chart, i.e., subject, mothers, and fathers that appear in the chart. The properties of the idbase class are modified via the Stylesheets.System.Charts.Indented Chart Items section.

icsubject

The icsubject class is assigned to the subject of the chart. The properties of the icsubject class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "subject".

Second Site also uses the values assigned to the subject to highlight other entries when following a link from a person page to a specific person in the chart.

icfather

The icfather class is assigned to fathers in the chart. The properties of the icfather class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "father".

icmother

The icmother class is assigned to mothers in the chart. The properties of the icmother class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "mother".

icnonprimary

The icnonprimary class is assigned to non-primary parents in the chart. There is no Stylesheet section for the icnonprimary class, and Second Site does not assign any properties to the class, but you can use it in the selector of a User Style.

iclabel

The iclabel class is assigned to the tag label that accompanies non-primary parents in the chart. There is no Stylesheet section for the iclabel class, and Second Site does not assign any properties to the class, but you can use it in the selector of a User Style.

icunknown

The icunknown class is assigned to people of unknown gender in the chart. The properties of the icunknown class are modified via properties in the Stylesheets.System.Charts.Indented Chart Colors section that begin with the prefix "unknown".

cdt

The cdt class is assigned to a SPAN element that encloses the dates in the chart. The properties of the cdt class are modified via properties in the Stylesheets.System.Charts.Chart Dates section.

cgn

The cgn class is assigned to SUP elements that enclose generation numbers in the chart. The properties of the SUP elements are modified via properties in the Stylesheets.System.Sources.Superscripts section. There is no Stylesheet section for the cgn class, and Second Site does not assign any properties to the class, but you can use it in the selector of a User Style. Second Site uses the selector sup.cgn to set the font-style to italic. You should use the same selector to modify other attributes of the generation number. It's difficult to achieve good, cross-browser results for SUP elements, so I suggest you test any modifications in multiple browsers.

icg1, icg2, etc.

The icgN classes are assigned to people in the chart based on the number of generations from the subject to the current person. So, for example, the icg0 class is assigned to the subject: there are zero generations between the subject and himself or herself. The icg1 class is assigned to the parents of the subject, icg2 is assigned to the grandparents of the subject, etc.

There are no Stylesheet sections for the icgN classes, but you can use them in the selectors of User Styles to make rules that vary by generation. For example, to assign alternating background colors for the first ten generations in the chart, you could define two User Styles as follows:

selector-1:
icgn1, icgn3, icgn5, icgn7, icgn9
 
parameters-1:
background-color: #eee;
 
selector-2:
icgn2, icgn4, icgn6, icgn8, icgn10
 
parameters-2: background-color: #ddd;

You can copy the text above and then use the special paste command for User Styles to add it to your SDF file.

Pedigree Chart (Indented)

Overview

Edit Indented Pedigree Chart

Shared Properties

Include Non-Primary Parents

Dynamic Features

Other Information

Stylesheet Sections

CSS Information

See also: