Add a theme part

This procedure explains how to add a new theme part to a customization project.

1. Determine whether you are creating a local or global theme part. The decision will identify which directory you are working in:
   • gbc-project-dir/theme for global theme parts.
   • gbc-project-dir/customization/customization-project-dir/theme for local theme parts.

   Tip:

   To ease migration, it is recommended that you use local theme parts. The migration process has you copy only the gbc-project-dir/customization directory when migrating to a new gbc-project-dir.

2. Create the root folder for the theme part.

   The content that you put in the root folder will depend on what you need to customize.

   For example, let us set up for a local theme part that we will call "foo". We would navigate to customization-project-dir/theme/ and create the directory foo. Within this folder, we could add directories and files as listed in Table 1.

   Table 1. Directories and files for theme parts

   Directory or file	Description
   foo	A theme part folder named "foo".
   foo/resources	A folder for theme part resources, such as images and fonts. Any and all theme part resources can be stored here, to include html and JavaScript files (if necessary).
   foo/resources/img	A folder for theme part images.
   foo/sass	A folder for Cascading Style Sheet files to influence how widgets display. You can change colors, font, how text is laid out, and so on.
   foo/sass/theme.scss	A file that modifies the stylesheet. While you can add css details directly into this file, a preferred method is to use the @import statement to import other stylesheets contained in the theme part's sass folder. For example, if you had a file named myHeader.scss in the theme part's sass folder, you would add @import "myHeader" at the top of the theme.scss file.
   foo/theme.config.json	A file that details conditions and identifies custom widgets for the theme part. For more information, see theme.config.json file.
   foo/theme.scss.json	A file that defines theme variables for the theme part. For more information, see theme.scss.json file.

   It is not necessary to add all the folders and files for every theme part created. If you examine the theme parts that come with the default installation, you will see that they contain only those files and folders needed.