HTML Page Structure

The following information is intended for advanced users.

Overview

This page describes the HTML elements used by Second Site to implement the basic structure of the pages it creates. This information will help advanced users create User Styles, Custom Formats, custom Page Scripts, and custom Themes.

HTML Structure

Second Site uses the same basic HTML structure for all the pages it creates, with a few exceptions associated with specific Layout options. Graphically, the structure is as follows:

Element IDs

In the diagram above, a "#" separates the HTML element name from the ID of the element. When making User Styles, you can make rules that apply to a specific HTML element using the ID. So, for example, a User Style with a selector of "div#footer" will apply to the HTML DIV elements with the id="footer". Element IDs must be unique on a page, so there is only one "div#footer" element on any given page created by Second Site.

The body element is a special case. The diagram shows an ID of "pageset-id", but that is a stand-in for the actual value. When Second Site writes the page, it varies the ID of the body element to match the PageSet ID of the current page. That technique allows CSS styles to target pages that belong to a particular PageSet.

For example, all Person Pages have a body element with id="personpages". You can write a CSS rule that affects the content section of person pages using the selector:

#personpages #content

That selector chooses any HTML element with the ID "content" that is nested within any HTML element with the ID "personpages". That combination will only occur on person pages.

The example above also demonstrates that when writing CSS selectors, you can omit intervening elements such as the elements shown in gray in the diagram. The example specifies only the "body#personpages" and "div#content" elements even though there are four intervening elements.

Element Classes

In the diagram above, a "." separates the HTML element name from a CSS class assigned to the element. When making User Styles, you can make rules that apply to all HTML elements that are assigned to a class. So, for example, a User Style with a selector:

ul.menuside

... will apply to the HTML UL elements with class="menuside".

Elements of Interest

As you can see from the diagram, there are multiple levels of nested HTML elements. They are required to support the flexible Layout and CSS style options provided by Second Site. The structural HTML for a Second Site page is more complex than the average HTML page because it must be flexible enough to accommodate a wide variety of Layouts, Themes and user-variable CSS stylesheet properties. Many of the HTML elements would not be necessary in a hand-crafted page.

When making customizations, many of the HTML objects shown above should be ignored: the elements with a gray background are only present to support Layouts, which control how the major sections of the page align relative to each other. Users should not modify those elements or they risk breaking the layout of the page. Making layouts work correctly involves precisely-tuned CSS elements. If you make changes to those elements or CSS parameters, you run the risk that your site will not work properly in all browsers.

For users writing User Styles or making other similar customizations, the primary HTML elements of interest are as follows:

• body#pageset-id
• div#container
• div#header
• div#content
• div#sidebar
• div#extra
• div#footer
• div#compiler

Those elements contain most of the content contained on the page.

Chart Classes

The following styles are used in charts:

• .cf – the class assigned to the frame around all charts except timeline charts
• .chartdesc – an additional class assigned to the frame around descendant charts
• .chartpedcomp – an additional class assigned to the frame around compressed pedigree charts
• .chartpedwide – an additional class assigned to the frame around wide pedigree charts
• .chartpedpaged – an additional class assigned to the frame around paged pedigree charts
• .chartrel – an additional class assigned to the frame around relationship charts
• .tlcf – the class assigned to the frame around timeline charts

Annotated Example

The following image is a screenshot of an example page produced by Second Site. Move your mouse cursor over the image to see tooltips that indicate the HTML elements in use. The approximate boundaries of the elements will appear as a red border. Elements are nested, as indicated in the diagram above, although that is not always evident from the tooltips and borders.

In this example, it is difficult to hover over the "container" element because most of the container element is underneath other elements. The container border is visible, and hovering over that will change the border to red.

This particular example page does not use a SideBar or Extra section.