Unofficial Content
  • This documentation is valid for:

Warning: Since GeneXus 18 the standalone Theme Editor is discontinued and its setup is not distributed anymore. For DesignOps use the Design Import option. In addition, it is recommended to use Design System Objects instead of Themes.

 



 

Scope

 

Objects: Themes
Languages: .NET, C/SQL, Visual Basic, Java.
Interfaces: Web

Introduction

 

Web applications need a more sophisticated look & feel than Winform applications and us developers have neither the skills nor the time to achieve a design of those characteristics.
For that reason, we usually hire design services, which is why it is necessary to later integrate that design with the GeneXus application. This integration is achieved through "Themes".

For graphic design we count on the 'Themes Editor', a free distribution tool that can be executed separately from GeneXus .
Whereas in previous versions of the "html forms", (Web Panels and html forms of transactions) control properties had to be configured in the controls, today through "Themes" , it is possible to define "Classes" for the different types of controls and assign properties to these classes.

Later, the controls are associated with these classes, and they inherit the properties configured there, thus making it no longer necessary to establish the values of these properties for each control in the form. The properties of these controls are configured in only one place: the Theme Classes.

Any design change that might be needed, will be done in the Theme (with no need to generate/compile absolutely anything), this way the aesthetic uniformity of the site is achieved at a low maintenance cost (it is not required to change each object), and as a consequence higher productivity in the development of Web applications is gained.

Overview

 

The Themes Editor is a free distribution tool that can be executed separately from GeneXus . The reason for this is to make it possible that the tool be used by the Graphic Designer, and the development of the application become independent, and even parallel to its design.

The goal of the tool is to create and give easy maintanance to CSS (Cascading Style Sheets http://www.w3.org/Style/CSS/) to be used inside the web application generated by GeneXus .
 

 

Usability

 

Assignment of Themes to Objects

 

The objects to which Themes can be assigned are Web Panels and Web Transactions.
The Themes are associated with a GeneXus object in this way:
· Directly to the object, through "Object Properties -> Theme". "Theme Property".
· To the model, configuring the property: "Theme" (File -> Edit Model -> Properties).
· To the knowledge base (File -> Edit Model -> Properties -> Theme, in design)

Note:
· The Themes heritage is Object-Model-Kb.
The default value of the model Theme property is the value of the same KB property, and the default value of an object Theme property is the value of the model Theme property.

Assignment of Classes to a Control

 

Once an object is associated with a Theme (through the Theme property), the controls of that object will remain associated with the default class compatible with the control of the corresponding Theme.

It is possible to change such class for another, in both design and runtime (Class Property).

Note: If a control property is explicitly changed, these values have priority over the value of the same property configured at Theme level. I.e.: the values of properties configured at Theme level will not be taken, unless the value of the property in the control itself is default.

Changes to the theme

Once the programs have been generated, the only requirement to make changes in some of the themes is taking the .CSS file corresponding to the theme to production.

The Editor

 

Examples

 

Tips

 

Considerations

 

Appendix I Theme Editor FAQ

 

Appendix II Configuration

 

 

Subcribe to this category's changes
Sub CategoriesAdd a new subcategory in this category
PagesAdd a new page in this category
Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant