Theme Editor - FAQ

In this article, you can find some frequently asked questions (FAQ) about Theme Editor.

1. What is a Style Sheet?

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

http://www.w3.org/Style/CSS/
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2/

2. How is a Style Sheet composed?

Basically, a Cascading Style Sheet includes a group of rules that specify a document's presentation. Each rule is made up of 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.

3. 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 Free Style Grid class:

.FreeStyleGrid
{
border-width: 0px;
border-style: none;
}

This is the HTML generated, so that the Free Style Grid will take the Free Style Grid 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 Free Style Grid control in GeneXus. In the Free Style Grid properties associate the corresponding class to the Class property:

You can also add derived classes from the predefined ones.

4. 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 to 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. </p>

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

5. 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 on the "HTMLNodes" node or on a descendant of it, and selecting "New Tag."

6. 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 on 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.