- HTML NODES (Advanced use of the Theme Editor)
- New Class
- New Tag (HTML)
- New Id
- Predefined HTML Nodes
You can create new custom classes, HTML Tags and Ids derived from HTML Nodes. The contextual menu of HTML Nodes is as follows:
As we have seen, you can define derived classes from the predefined GeneXus classes (Attribute, Button, Table. Grid, Textblock, etc), but you can also define classes outside this structure, that is, you can define custom classes.
To do this, select "Add Class" under the HTML Nodes in the Editor.
It will not be possible to assign these custom classes to GeneXus controls. These classes are used from HTML code added to any webpage.
1. Right click on the "HTML Nodes" and press "Add Class" (in order to add a new (custom) class).
2. Give the class any name you want. In the example, we created a "ColorLinks" class and configured its properties.
The HTML Tags complement the Themes features, in the sense that they allow you to define the characteristics of an HTML Tag, in a specific context. That is to say, whenever you want to establish the configuration of a specific Tag within a context, you can do it through the Themes Editor. You can, for example, define the links properties within a table.
If the Tags are in the web page's HTML in the same context they were defined in in the Editor, the configuration they were given in the Editor will be reflected in the web page.
The context is given by the hierarchy in which the Tags were defined. In the above example, if we were to define the properties of the links within a table, it would be done as follows:
A tag A, child of tag TD is defined.
That is to say, every time a tag A is nested in 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, which will result in the page's free text taking that color.
A CSS may have different entries of selectors, and combinations of them. For more information, click here.
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 "exampleID1" as its ID name and it has a white CSS defined background</p>
<p id="ExampleID2">This paragraph has "exampleID2" as its ID name and it has had its text transformed to uppercase letters. </p>
IDs are generally not necessary, and are only used in advanced cases when users work with the HTML code generated by them. In those cases, the ID selectors can be maintained automatically in the CSS just like any other class selector used by GeneXus .
ID selectors are defined as follows:
In the Theme Editor, you can define an ID by right-clicking on the "HTMLNodes" node, or on a descendant of it, and selecting "New 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.
The following selectors are predefined HTML Nodes (most popular):
- Calendar
- CalendarCombo
- DIV
They are used to configure the web calendar settings. In javascript calendar.js (which is a third-party js used by the web calendar) there is a reference to CSS classes. You can setup the web calendar through the Theme. Each calendar and CalendarCombo contains different child elements that are referred to within the calendar js to configure appearance.
The CalendarCombo is the combo that is shown when the user presses the <, <<, >, >> buttons for a second. The combo displayed allows you to select months or years, depending on the button function.
To see the calendar preview you must go through the "Custom Views" (bottom right-hand panel in the Editor).
The DIV element is an all-purpose, generalized HTML Block Structure. Use this element when you want to define a block or section of Styled text, and SPAN when you wish to create a generalized in-line Character Formatting element.
DIV is a generic element and does not attach any semantic meaning.
The Theme Editor also has an element (div.suggestions) to configure the suggestions display.
Since this has to do with 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).