You can modify features and styles of a Genero Browser Client (GBC) front-end within a customization project directory.
customization-project-dir, these are the directory structures and files that you must understand and manage.
|Directory or file||Description|
||The project's translation texts for localization.|
||Project resources, to include images in an img subdirectory.|
||Cascading Style Sheet files for instructing the browser how to display specific widgets. You can change colors, fonts, layout, how text is layed out, and so on.|
||Entries here modify the stylesheet. While you can add css details directly into this file, a preferred method is to use the
||Customization-specific theme parts, with each theme part in its own directory.|
||When using a theme that contains this theme part, change the default GBC color and theme settings for your windows, widgets, messages, buttons, tables, and so on.|
||Customization specific configuration file. This one will override information of custom.json file (see Configure your compilation).|
||Change the default GBC color and theme settings for your windows, widgets, messages, buttons, tables, and so on. [DEPRECATED] Changes using scss should now be completed within a theme part, in a file of the same name.|
Creating a customization project
To create a customization project, create a directory under
/customization. This directory becomes your new
customization-project-dir, and you can start adding your customized files.
You can have many customization projects. Each must have a unique name.
A customization project must be compiled to be usable. See Set up your GBC build environment.
Finding the right UI component
Customization initially consists of working with the GBC client to identify which component in the interface to customize. Each element of the UI is a widget/component.
Each widget has a defined class name in the format "
gbc_xxxWidget", where "xxx" is the widget name. The widget name is often the name used in the AUI tree.
TIP: Use your browser's developer tools to select the UI element you want to change.
Finding the widget files
Once you have identified the widget, locate the corresponding widget files in the
js subdirectories contain the
xxxWidget.tpl.html files. The
sass subdirectories contain the
For more information on widgets, see Widgets.
IMPORTANT: We recommend that you leave the core sources untouched.
For the widgets you want to customize, create
Myxxx.scss file in your customization project sass directory. Import your .scss in the
Follow the recommended naming convention to define new widgets with the same name in the format "
MyxxxWidget", where "xxx" is the parent widget name. For example;
Compiling and testing as you go
As you add or update your project files, run the gbc command to compile your project. Open an application to test the customization.