Styling

The layout of the HTML pages is arranged in style sheets (CSS files). Style sheets are available in various colors and with a slightly different layout of the HTML pages. In addition, a choice can also be made between different images on either side of the title, or no images at all.

The behavior of an HTML page depends on the chosen layout. On a page where the navigation bar is at the top, the navigation bar will always be visible when scrolling down. If the navigation bar is below the title, it may disappear from view when scrolling down.

Go to Reporting Install style to choose a different style.


Files

The selected style files are placed in [family tree folder]/Output/Style, next to the general style files.
The style dependent files are:

Atm.cssstyle sheet for the reporting
Viewer.cssstyle sheet for the scan pages
HeaderLeft.pngimage on the left-hand side of the title
HeaderRight.pngimage on the right-hand side of the title

Note: The new style only becomes visible after reloading a page in the browser. In Windows, the shortcut for this is Control+F5 and on macOS, the shortcut is Command+Shift+R.

Customizing the style

It is possible to adjust the installed style sheets to your own taste. Some knowledge of CSS is a requirement, here is a good CSS Tutorial.

The background image and the images next to the title can also be replaced with your own images.

Note: When installing a new version of ATM it can happen that something has changed in the style sheets. In that case, the new style sheets are automatically placed in [family tree folder]/Output/Style. If style sheets are adjusted to your own taste, the changes that have been made will be lost. Always make sure to backup these files so that the desired changes can be made in the new style sheets.