Styling

It is possible to change the style via CSS.

The HTML code generated makes it easy to target specific elements or apply styling rules for the whole page. Each view has its own structure of elements, and for now a simple "Inspect Element" from browser will reveal selectors.

CSS via the editor

When using the editor, CSS can be added directly from the style popup:

CSS embedded in XML

Styles can be defined directly in the XML file, by using a STYLE tag.

These styles will only apply to this specific document.

<STYLE>
.view-timeline td {
    border-color:red;
}
.view-timeline tr.tier-header {
    text-align:right;
}
</STYLE>

CSS in separate file

Styles can be defined in a separate CSS file, which must be placed in the include folder.

All the generated HTML documents will load this file and have these styles in common.

e.g. avaa-toolkit/include/my-styles.css

h2 {
    color:green;
}
section {
    border-left: 2px solid gray;
}

Styling Views

Views generate simple HTML code and try to follow common guidelines so that applying styles is straightforward.

Annotations' text labels always have the annotation class, so for instance to change the color of all annotations:

.view .annotation {
    color:red;
}