Use of custom classes and HTML Nodes - Theme Editor

This example combines the use of custom classes and HTML tags.
By definining a custom class, it is possible to give a hovering effect over the links (and even setup different hovering colours within the screen)

A hierarchy of Custom Classes and HTML tags may be done. Suppose you want to set the hovering color and visited color of links, and those links are textblocks in GeneXus .

So, the textblocks are associated to the "ColorLinks" class (which you should have already defined under the Textblock class)



Now, you need to:

1. Define a custom class named "ColorLinks" under the HTMLNodes node of the Editor.

Right click in the "HTML Nodes" and press "New Class" (in order to add a new (custom) class




2. Name the class just created as "ColorLinks".



Note that we have defined a custom class with the same name as a derived GeneXus class "ColorLinks".
This is because the textblock will be associated to this class (the ColorLinks class derived from textblock). If it weren´t defined under the Classes Node, it couldn´t be assigned to any GeneXus control.
When a custom class is defined with the same name as a class derived from the predefined GeneXus classes, a warning is fired, which says that the properties of the custom class will be not be shown. This is because of the precedence given by CSS, nevertheless, the tags derived from this classes can be edited, and this is the basis of this example.

Continuing with the example, in this case, you have to specify a pseudo-element for the HTML tag defined, which is active, hover, etc.








The resulting CSS will be like the following:

.ColorLinks {color: #FFC0FF;}

.ColorLinks a:active {color: #FFC080;}

.ColorLinks a:hover {color: #FFFF80;}

.ColorLinks a:visited {color: Green;
font-family: "Arial Black";
font-style: italic;
font-weight: bold;
text-decoration: overline;}

The result, is that every time a textblock appears in the HTML associated to the "ColorLinks" class, and it is generated as a link, it takes those settings.