+

Search Tips   |   Advanced Search

Copy themes


Create custom themes from copies of Portal 80 theme

We create copies of the Portal 80 theme in order to develop our own custom themes. Steps involved...

  1. Copy theme static resources
  2. Copy theme dynamic resources
  3. Link static resources to dynamic resources
  4. Make custom skin the default

  1. Copy theme static resources

    1. Enable development mode

        cd /opt/IBM/Portal/WebSphere1/wp_profile/ConfigEngine
        ./ConfigEngine.bat enable-develop-mode-startup-performance -DWasPassword=password

    2. Install a WebDAV client, such as WebDrive or AnyClient.

    3. Connect client to...

        http://host:port/wps/mycontenthandler/dav/themelist/

    4. Copy ibm.portal.80Theme folder to local disk.

    5. Rename the folder to the name of the theme, such as MyCoTheme.

    6. In the metadata folder, edit localized_en.properties, or your default locale file, and change the value of the title key to the display name of the theme, such as MyCo Theme. Save the file and repeat any other locale files.

    7. Edit metadata.properties and change the Portal8.0 part of the value...

        com.ibm.portal.layout.template.href

      ...to MyCoTheme.

    8. Verify you have properties similar to...

        com.ibm.portal.layout.template.href=dav\:fs-type1/themes/MyCoTheme/layout-templates/2ColumnEqual/resourceaggregation.profile=profiles/profile_deferred.json
        com.ibm.portal.theme.aggregationmodes=ssa
        com.ibm.portal.theme.dnd.sources=ibmDndColumn:com.ibm.pb.dnd.layout.LayoutColumnSource:vertical, ibmDndRow:com.ibm.pb.dnd.layout.LayoutRowSource:horizontal

    9. Save the file.

    10. Delete the skins folder from the MyCoTheme to remove the extra copies of the skins that are shipped with IBM WebSphere Portal.

        MyCoTheme/skins

    11. Copy the entire MyCoTheme folder into the themelist folder.

    12. Compare each subfolder in MyCoTheme to the corresponding subfolder in ibm.portal.80Theme to verify the the correct number of files were copied.

    13. Double-check the contents of the metadata.properties file in the themelist.

    14. Verify the following files existing in the profiles folder...

        profile_admin.json
        profile_deferred.json
        profile_full.json
        profile_lightweight.json


  2. Copy skin static resources

    1. Connect the WebDAV client to...

        http://host:port/wps/mycontenthandler/dav/skinlist/

    2. Copy the ibm.portal.80Hidden folder to a local disk.

    3. Rename the folder to the name of the skin, such as mySkin.

    4. In the metadata folder, edit localized_en.properties, or your default locale file, and change the value of the title key to the display name of the skin, such as MyCo Skin. Save the file and repeat any other locale files.

    5. Copy the entire mySkin folder into the skinlist.

    6. Double-check the contents of the mySkin folder in the skinlist to ensure that everything copied correctly. Compare each subfolder in mySkin to the corresponding folder in ibm.portal.80Hidden to ensure that it looks like the correct number of files were copied. Recopy any files or subfolders that are missing.


  3. Copy theme dynamic resources

    1. Install Eclipse, IBM Rational Application Developer or RTC with the Java EE developer tools add-on.

    2. Switch to the Java EE perspective, and select...

        File | New | Dynamic Web Project

    3. If it is not already selected, select 2.4 for the Dynamic Web Module version.

    4. Select...

        Add project to an EAR

      ...and click Next to the Web Module page.

    5. On the Web Module page, change Context Root to MyCoTheme

    6. Expand the new MyCoTheme project and find and expand the WebContent folder.

    7. Find the folder...

        PORTAL_HOME/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear/DefaultTheme80.war/skins

      ...and drag it onto the WebContent folder.

    8. Find the folder...

        PORTAL_HOME/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear/DefaultTheme80.war/themes

      ...and drag it onto the WebContent folder.

    9. In the MyCoTheme project, find the WEB-INF folder inside the WebContent folder.

    10. Copy...

        PORTAL_HOME/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear/DefaultTheme80.war/WEB-INF/decorations.xml

      ...to the WEB-INF folder.

    11. Copy...

        PORTAL_HOME/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear/DefaultTheme80.war/WEB-INF/tld

      ...to the WEB-INF folder.

    12. The previous files and folders are the only ones that you need. Do not copy any others from the DefaultTheme80.war file.

        MyCoThemeEAR (right-click) | Export | EAR file | Browse

    13. Select a folder to export the EAR file to.

    14. Click Save and click Finish.

    15. Log on to the WAS admin console and go to...

        Applications | Application Types | WebSphere enterprise applications

    16. Click the Install toolbar button.

    17. Click Browse and select the EAR file that you exported and click Next.

    18. Select...

    19. Change any installation option values you want, or use the default values, and click Next.

    20. For Map Modules to Servers, select the MyCo Theme module in the table, select the entry...

        server=WebSphere_Portal

      ...in the list, click Apply, and click Next.

    21. Click Finish.

    22. When the EAR file is done installing, click Save directly to the master configuration.

    23. Check the MyCoTheme EAR in the table of enterprise applications and click the Start toolbar button.

    24. On the file system, expand the folder...

      The unique copy of the dynamic resources for the theme are located in the themes and skins folders. Change files to that location. Do not modify ThemeModules.war.


  4. Link static resources to dynamic resources

    1. Bind the theme to the context root of the web app
    2. Modify the dynamic resource references for the theme
    3. Modify the dynamic resource references for the skin


  5. Make custom skin the default

    Add the custom skin to the skins list to set it as the default skin for the theme. If it is the only custom skin it is automatically set as the default skin for the theme.

    1. Restart the portal server.

    2. Log on to the WAS admin console for the portal and set...

        Administration Themes and Skins | MyCo Theme Edit | MyCo Skin | Set as Default | OK

    3. To verify the theme is available for use on the portal, create a page, edit page properties, and assign the theme to the page.

      The custom theme uses ready-use modules, shared across themes, and not uncopied in the Theme Modules web application. These Theme Modules need to remain started in addition to the web application for the theme.

    4. Optional: Deploy the theme with cacheable resources


Manually update dynamic theme resources

  1. Export theme...

      cd C:/IBM/WebSphere/wp_profile/bin
      wsadmin.bat -user wpsadmin -password mypassword -c "$AdminApp export MyThemeEAR C:/tmp/MyAppThemeEAR.ear"
      cd c:\temp

  2. Expand theme...

      C:/IBM/WebSphere/wp_profile/bin/EARExpander.bat -ear MyThemeEAR.ear -operationDir /temp/MyAppThemeEAR -operation expand -expansionFlags all

  3. Make changes to theme

    • Rename theme

    • Change context root

  4. Repackage theme

      cd C:\temp
      C:\IBM\WebSphere\wp_profile\bin\EARExpander.bat -ear /temp/MyAppThemeEAR.ear -operationDir /temp/MyAppThemeEAR -operation collapse

  5. Deploy the updated MyAppThemeEAR.ear back to portal

  6. Stop Portal

  7. Clear contents of...

    • WP_PROFILE\temp
    • WP_PROFILE\wstemp
    • WP_PROFILE\tranlog