From GeneXus Olimar version: Theme editor (II)

HTML Tags
By using the HTML Tags, users create a new HTML Tags structure and define its properties. This procedure includes the corresponding selectors in the CSS, as well as the hierarchy with which they are defined in the editor. For instance, if an LI tag, son of the UL tag to which the Font and ForeColor properties are configured, is defined, it will appear as a result in the CSS:

UL LI
{
          font-family : Microsoft Sans Serif;
          font-size : 8.25pt;
          color : rgb(255, 0, 0);     
}

The hierarchical relation for HTML tags corresponds to an offspring type of relation from the selectors involved. An A element is a descendant of a B element if A is a son of B or A is a son of a C element that descends from B. That is to say that if the A B generic tags are defined (B son of A in the hierarchy), the settings of B will be adopted in the web page, for all the cases in which the HTML contains a structure like the one that follows:

1. B son of A:
 A &. B ... /B & /A   
2. B descendant of A:
 A ...  C ...  B ....  /B .... /C .... /A

This means that the father-son relationship in the HTML Tags tree represents the nesting of the involved tags. For instance, if a structure is defined in which the father node is "Table", and it has two sons: "A:link" and "H2". This means that all the type-two headings from a table, and on the other hand all the links within a table will adopt the settings defined in the theme.
Settings to the tags defined in the editor are reflected in the web page only if those same tags are included in the html of the page, and in the same order established by the defined hierarchy, always keeping in mind the precedents declared in the published CSS specifications: http://www.w3.org/TR/REC-CSS2/

Basically, when the HTML is graphed, the engine follows this order: the values of the inheritable properties, the values of the properties defined in the CSS (associated through the CLASS attribute), and the values of the attributes specifically defined for the tag. Concerning point 1, the selectors that are nested among selectors will inherit the values of the properties from the most external selector, unless they are modified. For instance, the color defined for the BODY is applied to the text in a paragraph. There are cases in which properties are not inheritable. The margin-top property, for instance, is not inherited in our example. A paragraph would not intuitively have the same "top-margin" as the body of the document. The following is an example of the priority order: if a "SPAN" tag is defined, the attributes/variables (radio buttons and checkboxes) will be seen according to that particular tag's settings.
The HTML tags may be incorporated in the web page HTML by simply including one control in GeneXus, by defining the format of a line through the "Format" button from the GeneXus toolbar or by any action that causes a tag to be generated (for instance, by editing the HTML code).
The tag properties configured in the theme will be reflected under design in the objects linked to the theme, and in the generated web pages in runtime.

Using the editor
The editor may be used within GeneXus, and/or as an independent program. It may be called from outside GeneXus, by making a double click in the executable (GXThemeEditor.exe) or from the commands line running as a parameter, if so desired, a file with a .xml extension.
The theme editor (working either outside or inside GeneXus) enables saving the themes in files with XML extension. This way, work on themes created from GeneXus will be possible, by using the editor in an independent way, and vice-versa.
A list of files with XML extension, which are valid themes, may be impacted in the editor's application through the "Options Customize" menu's item. These themes will serve as the basis for the creation of new themes (in XML format). Within the list of files impacted in the application, one will be assigned as "default". When creating a new theme, this theme is created having the default as a basis.

The editor's aspect
The editor decides the space that is required in order to work with several themes simultaneously and in a comfortable way.
It is possible to place the themes vertically, horizontally or in a cascade. The following figure shows how the editor is seen when two themes are displayed vertically.

It is displayed as a hierarchical structure (a tree). Going down the structure, there is a "Classes" node and an "HTML tags" node on the first level of the tree. The properties of the classes and the HTML tags are visualized in the editor, in order to be modified, and they can be organized in alphabetical order or per category. In the editor's right vertical bar there is a Preview button through which a preview may be shown, if so desired, of how a control associated to that particular class may be visualized.

Example
1. Creating a new theme
For creating a new theme from inside GeneXus, you have to go to the option: Object   New Object   Theme.
The following elements are included in a new theme:
- A name (name of the root node)
- A set of pre-defined elements, corresponding to the classes, within the "Classes" folder.
- An "HTML tags" folder that is initially empty.
If there is a pre-determined theme, the new theme is initialized with the characteristics of that particular theme.