Step 1: Customize with Cascading Style Sheets

The simplest way to customize an application is to change the application style using CSS.

The Genero Application Server has a dedicated file for application customization, $FGLASDIR/tpl/SetHtml5/css_customization.css. By default, this is an empty file.

For this tutorial, we are creating a cascading style sheet to be used only for the Card application. To add a style for a specific application, create an empty file named css_customization.css and place it in the directory $(application.path)/../web. Reference this file in the application's PICTURE element.

<PICTURE>
  <PATH Id="SetHtml5" Type="APPSERVER"
   ExtensionFilter="$(res.web.extensions);.less;.svg"
   DVMFallbackAllowed="FALSE">$(application.path)/../web;
   $(application.path)/../res/photo;$(res.path.pic);
   $(res.path.tpl.html5);$(res.path.tpl.common)</PATH>
</PICTURE>

In this example, css_customization.css is located in $(application.path)/../web.

$FGLASDIR/tpl/setHtml5/css_theme.css contains the list of styles you can override. The selectors are suffixed by “-style”. Enter your style modifications as shown in these examples.

To set the form background color

.document-style  {
    background-color: #f0f0f0;
}

To set the header colors

.header-style {
    background-color: #4c4545;
    color: #87ceeb;
}

To set the topmenu and toolbar colors

.navigation-style {
    background-color: #4c4545;
    color: #aacc22;
}

To set the color on active topmenu command when rolling over

h4.navigation-element-style:hover {
    background-color: #87ceeb;
    color: #4c4545;
}

To set the color on the active toolbar command when rolling over

.toolbaritem-style:hover:not([disabled])  {
    background-color: #87ceeb;
    color: #4c4545;
}

Solutions for this step of the tutorial can be found in the project HTML5ClientTutorialStep1.4pw.