GBC 4.01
Customization
How customization works
Planning for the customization Getting the customization to the user
Set up your GBC build environment Create a customization project Rebuild the GBC
Create a runtime package Deploy on GAS Deploy on JGAS Change the version customization suffix
Manage themes
Add a theme part Add a theme Modify a theme Delete a theme
Replace an image
Change the favicon Change background image for empty tabbed container
Use theme variables
Display or hide the sidebar Customize the chromebar Change checkbox icons Display the Genero context menu Change relog prompt
Use style sheets
Center progress indicator icon Center file loading icon
Use widgets
Add header image Add header image using style class Add header text Add footer text Change file loading icon Redirect application end Extend the MainContainerWidget
Internationalize your app
Add localized text Configure right-to-left languages Customize translation text Default encoding
Migrating customizations
Use theme variables

Settings for a theme are managed by theme variables that are set in the theme.scss.json file.

This procedure shows how to customize a generic theme variable. For instructions about customizing specific theme variables, see:

Before you begin

This procedure assumes you are comfortable updating theme parts and themes. For the basic principles behind themes and theme parts, see How customization works. For instructions about adding and modifying themes and theme parts, see Manage themes.

Update the theme variable

  1. Identify the theme part you plan to update. If you are creating a new theme part, prepare the directory.
  2. In the theme part, open the theme.scss.json file in a text editor.

    NOTE: Prior to GBC 1.00.53, you could also find a theme.scss.json file in the root folder of the customization directory. While it is still possible to put this file at the root of the customization directory, it is not recommended.

  3. Modify an existing style value or add a new style variable and value. For more information see theme.scss.json file.
  4. Save your changes.

Compile

After updating theme.scss.json with the theme variable and ensuring the theme part is assigned to one or more themes, you compile your customization.

$ gbc build --customization customization-project-dir

Test

Test your theme setting works as expected.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.

If your tests do not behave as expected, ensure you are using your newly-compiled custom GBC. Depending on your development environment, you may need to package and deploy a custom GBC client. For information on which customization and theme you are using, see Selecting customizations and themes.