Unofficial Content

Theme Editor FAQ

What is a Style Sheet?

A style sheet is a document that contains the specifications that define the Web pages look and that allows separating an HTML document content from its aesthetic presentation.
The HTML makes reference to the styles sheets that contain the page's aesthetic details, which are transferred to the client and even stored in his cache, to speed up the browsing.
For further information on the style sheets, please refer to the following links:

How is a Style Sheet composed?

Basically, a Cascading Style Sheet includes a group of rules that specify a documents presentation. Each rule is made up by a "selector" and a "style" that applies to the selector as follows:
selector { property: value }

Selectors may be HTML elements (such as BODY, P, EM, etc), Classes, or combinations of both.

What are class selectors and how do I configure a class in GeneXus?

Class Selectors allow associating different styles to the same HTML element by means of the CLASS HTML attribute, as follows:

This is the FreeStyleGrid class:
border-width: 0px;
border-style: none;


This is the HTML generated, so as the freestyle grid will take the FreeStyleGrid class settings.
<table id="GRID1" cellspacing="0" border="1" class="FreeStyleGrid">

To configure it in GeneXus , just modify the FreeStylegrid properties in the Theme Editor.

Afterwards, associate this class to the FreeStyleGrid control in GeneXus . In the FreeStyleGrid properties associate the corresponding class to the Class property:

You can also add derived classes from the predefined ones, for more information, see:

What is an ID Selector and how can I configure it using GeneXus?

The W3C defines class ID 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>

How can I configure it in the Theme Editor?
By rigth clicking in the "HTMLNodes" node or in a descendant of it, and selecting "New Id".

What are HTML elements as selectors and how do I configure them in GeneXus?

This is achieved in GeneXus by defining HTML tags.
By rigth clicking in the "HTMLNodes" node or in a descendant of it, and selecting "New Tag".

What are pseudo elements and how do I configure them in GeneXus?

Pseudo-elements are used in CSS to add different effects to some selectors, or to a part of some selectors.

The syntax of pseudo-elements:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element {property: value}

How do I use pseudo elements in GeneXus?
By rigth clicking in the HTML nodes, selecting New Tag, the following dialog appears:

Then, you can select the pseudo element associated to that Tag.
Note that you can make a combination with classes, and Ids, besides the pseudo elements, for any tag.

What was the scope of Theme Editor until 8.0 GeneXus version?

In GeneXus 8.0 (version 1.0 of Theme Editor) you can:

· Define derived classes from the predefined ones. This classes can be associated to GeneXus controls. For example, create a new class under the "FreeStyleGrid" class. You can do it by the contextual menu of the FreeStyleGrid class.

· Define HTML tags, and make a hierarchy of TAGS. This is called "Contextual Selectors". For example, if we wanted only 'EM' elements within 'H1' to turn red you do it by adding an H1 HTML tag, and an EM HTML tag as its child, and then configure its properties:

So, the CSS you obtain is the following:

color: #FF0000;
font-family: "Arial Narrow";
font-size: 4pt;
font: italic small-caps bold 4pt "Arial Narrow";
font-style: italic;
font-variant: small-caps;
font-weight: bold;


What is it introduced in Theme Editor version 2.0? What can we do now that we couldn´t with the previous version?

Look at this example, in this case, you want only H1 elements which have pastoral class associated, to take the color settings.

In the .CSS
   H1.pastoral { color: #00FF00 }

In the .HTML
 <H1 CLASS=pastoral>Way too green</H1>

With the Theme Editor version 2.0 you can achieve it!

In the previous version, only HTML Tags could be added to the Editor. Now, by adding Custom Classes, we can combine Custom classes and HTML Tags. In this way, we can combine contextual selectors, with class selectors, establishing a hierarchy in which you want the browser to apply the settings. For example, you can make an entry in the CSS as the following:

    CustomClass1.CustomClass2 HTMLTag {}

This hierarchy specifies the HTMLTag node, where one of its ancestors has the class='CustomClass2' attribute defined, which at the same time has an ancestor with class='CustomClass1'.

In the .CSS:

.CustomClass1 .CustomClass2 A
   color: #ff0000;

In the .HTML:

  <table class="CustomClass1">
     <tr class="CustomClass2"><td><a href=''>Sitio GeneXus</a></td>...</tr>

II. Basically, you can make distinctions like the following:

Suppose you have in the CSS the follwoing entry:

>>. TABLE.ActiveRow {property: value}

and the follwing:

>>. TABLE .ActiveRow {property: value}

Those expressions are different. In the first, the properties apply to a TABLE with class="ActiveRow"
In the second one, the properties apply to any element with the class="ActiveRow" assigned, and which is defined within a TABLE tag.

III. CSS elements containing pseudo elements can also be defined.