HTML NODES (Advanced use of Theme Editor)
Deriving from HTML Nodes, it is possible to create new custom classes, HTML Tags and Ids. The contextual menue of HTML Nodes is as follows:
· New Class
· New Tag
· New Id
New Class
As previously seen, you can define derived classes from the predefined
GeneXus classes (Attribute, Button, Table. Grid, Textblock, etc), but also, you can define classes outside this structure, that is to say, define custom classes.
The way to do it, is by selecting "New Class" under the HTML Nodes in the Editor.
It will not be possible to assign this custom classes to
GeneXus controls, the aim of this classes is to be used from HTML code added to any webpage.
Example:
1. Right click in the "HTML Nodes" and press "New Class" (in order to add a new (custom) class)
2. Name the class as you desire. In the example, we create a "ColorLinks" class and configure its properties.
New Tag (HTML)
The HTML Tags complement the Themes features, in the sense that they allow to define the characteristics of a HTML Tag, in a specific context. That is to say, whenever you want to establish the configuration of a specific Tag within a context, this can be done through the Themes Editor. You can, for example, define the links properties within a table.
If the Tags are in the HTML of the Web page in the same context in which they were defined in the Editor, the configuration given to them in the Editor will be reflected in the Web page.
The context is given by the hierarchy in which the Tags were defined. For the previously mentioned example, if we were to define the properties of the links within a table, it would be done as shown bellow:
A Tag A, child of tag TD is defined.
That is to say, every time a tag A is nested to a tag TD in the generated HTML,
it will take the forecolor defined in the example.
Another example would be to define a tag body and its "ForeColor" property, with which the page's free text will take that color.
New Id
A css may have different entries of selectors and combinations of them.
For more information see http://www.w3.org/TR/CSS21/selector.html
There is a special kind of selector, named Id.
Class ID is defined as "a unique identifier to an element".
CSS IDs are similar to classes in that they define a special case for an element.
They assign an identifier for an element.
Example of a CSS ID:
CSS Code:
p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }
HTML Code:
<p id="ExampleID1">This paragraph has an ID name of "exampleID1" and has a white CSS defined background</p>
<p id="ExampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters. </p>
In general, the use of Ids is not necessary, only in advanced cases when the user works with HTML code generated by himself. In that cases, the Id selectors can be maintained automatically in the CSS as any other class selector used by
GeneXus .
The way to define an ID selector is the following:
In the Theme Editor, by right clicking in the "HTMLNodes" node or in a descendant of it, and selecting "New Id" you can define an ID.
You can also define an ID for a specific element, by defining a new Tag in the Theme Editor and associating it with the ID previously defined.
Predefined HTML Nodes
The following selectors are already defined HTML Nodes:
1. Calendar
2. CalendarCombo
3. div.suggestions
They are used to configure the web calendar settings (
http://www.gxtechnical.com/gxdl/pub/genexus/internet/docum/releasenotes/8.0/datepicker.htm).
In javascript calendar.js (which is a third party js used by the web calendar), there is a reference to CSS classes. The CSS used until version 8.0 is the Calendar-System .css, which contains all the classes referred to in the js. Therefore, until version 8.0 it has not been possible to change the Calendar aesthetic unless Calendar-System .css was manually modified.
Since 9.0 version, you can setup the web calendar through the Theme.
Each of calendar and CalendarCombo contains different child elements that are referred to within the calendar js to setup its aesthetic.
The CalendarCombo is the combo appearing when the user presses the <, <<, >, >> buttons for a second. In this case, a combo is displayed to allow selecting months or years, depending on the button function.
To see the calendar preview you must go through the "Custom Views" (right bottom panel of the Editor).
Likewise, the Theme Editor has an element, div.suggestions, to setup the suggestions (
Suggest property ) display. The preview is located in the Custom Views, like in the previous case.
Since this is about HTML elements, there are no classes to be selected in
GeneXus . Currently, all calendars will take the settings provided there and the same will occur for the suggestions (unless different Themes are used).