Customizing your application using style sheets

Style sheets allow you to customize the layout and appearance of your page. For example, you can edit the style sheet to specify the background image or to change the icon that displays when a file is loading.

Important:

Some interface changes can also be made using Genero presentation styles. It is recommended you:

Use GBC customizations for UI design at a global level. This provides a consistent look-and-feel across all your applications.
Use Genero presentation styles for screen-specific changes at a local level. For example, use styles to display important values in a different color.

For information about Genero presentation styles, see the Genero Business Development Language User Guide.

The style sheets are found in the gbc-project-dir/customization/customization-project-dir/sass directory. The default style sheet is customization.scss.

To edit styles, do one of the following:

Edit the style directly in the customization.scss file.
Create a new style sheet, and add a reference to that style sheet in the customization.scss file.
For example, if you create a file called MyStyles.scss, add the following in the customization.scss file:
```
@import "MyStyles";
```

Generated selectors

A widget with a style in the form has a dedicated selector. For example, in the form source (shown here using the .per file syntax), you have:

EDIT f01 = formonly.edt, STYLE="mystyle1 mystyle2 …";

A selector is generated in the HTML structure, in the format gbc_style_stylename:

class= "… gbc_style_mystyle1 gbc_style_mystyle2 …"

These selectors may be used to do advanced styling using CSS.