My first Theme for Smart Devices

Official Content
This documentation is valid for:

To create a theme, use the New Object creation window as you would do for any other object. From this window, select the Theme for Smart Devices object and assign it the desired name. To move on with this topic, we will create a theme called SDClassicBlue.
New Theme SD GeneXus 15

Customizing a theme-class

Next, the Themes editor is opened. In this example, we need to apply the blue color to the background of all Attributes, and the font size to 25 and the font forecolor is white. So, we change the following properties of class Attribute:

Background Color property Blue
Forecolor property White
Font Size property 25

SDThemeApplybg- GeneXus 15

Applying the Theme

Now you can access the Smart Devices pattern instance. To do so, open the Preferences tab, and under Patterns, open Work With for Smart Devices.

Select the "Any platform" icon and in the Theme property (and Default Theme property) select the SDClassicBlue theme, as shown in the image below.
SD Apply Theme Any Platform GeneXus 15

In this way, all the platforms included in the list shown in the image will take the selected theme. However, each one of these platforms has its own Theme property.

Applying the Class Attribute in Layout

Now let see how to apply the designed class to the attributes. Open the layout of the Work With Devices, select List node, select the attribute(s) that want to apply the class, and set the Class property with Attribute value (the theme-class customized). By default, for attributes use the Attribute Class, but if you design another Attribute-class, since this property is where you can use it.
SD Apply Theme Class Attribute GeneXus 15

Runtime result

Then just execute and see the changes.
image_201813134912_1_png image_201813134957_1_png

See also


Start Video Design Systems
Start Video Images and Theme Object