Add a custom layout

You can also add your own custom layouts.

To do this...

1. Create a JSP. Use the predefined layouts in the folder profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/layouts as a guide.

2. Add the JSP that created to the folder profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/layouts .

3. Open the file profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/layouts.json .

4. Register the new layout by adding an entry to the items array in the following format:

   {'label':'layout_display_name','id':'layout_filename',
        'thumbnail':'path_to_the_thumbnail_for_the layout',
   

   The display name will show in the Customize shelf.

   The file name of the layout without the file extension is used as an ID for the layout.

   For example, when the JSP is named 4columnlayout.jsp, the ID used for the layout is 4columnlayout. The json object in the file layouts.json contains two attributes that are used for globalizing the style display strings localizationPackageName and localizationBundleName .

   These are used by dojo.i18n to provide localized strings by creating bundles with dojo.i18n.getLocalization("localizationPackageName","localizationBundleName") .

   If you choose to globalize the display name of your new layout, add a new key to the bundle and replace the label value in the json with the key name. The customize shelf will automatically look up the display name in the bundle using the key.

   This adds the new layout to the default All category under Change Layout in the Customize shelf.

5. To add a new category, edit the file profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/changeLayout.json and add another item to the categories array in the json object. Example:

   "My new section":
   {
       "My new category":
       {
           "datastore":"com.ibm.data.JsonStore",
           "url":"path_to_your_styles_json_file"
       }
   }
   

   where the attribute url is the path to a json file that contains the layout entries for the new category. Model this json file after profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/layouts.json .

6. Restart the wp.theme.enhancedtheme.war file in the administrative console to pick up any new files.

7. Verify that custom layout has been added successfully to the Customize area.

Parent topic:

Changing page layout

Related tasks

Deploy the theme

---