Creating New Theme in IBM WebSphere Portal 8.0 using WebDav

This post is for creating a new theme and skin for IBM WebSphere Portal 8. I followed this link provided by IBM which is very well written. I am only consolidate all the sublinks in one post and few of the issue I faced during the development/deployment.

Step 1 :Install a WebDav Client- AnyClient

WebSphere Portal provides a Web-based Distributed Authoring and Versioning (WebDAV) implementation that the Portal 8.0 theme framework uses to store static resources. WebDAV is a set of extensions to the HTTP protocol that allows you to collaboratively edit and manage files on remote Web servers. User interface is similar to that of a file system which facilitates the creation, deletion, and modification of resources.

The setup is pretty much basic. Use proxy if required.

Theme Administration: http://<server>:<port>/wps/mycontenthandler/dav/themelist/

Skin Administration: http://<server>:<port>/wps/mycontenthandler/dav/skinlist/

Theme file store: http://<server&gt;:<port>/wps/mycontenthandler/dav/fs-type1/

Note- I was using Windows 7 in office environment. While installing, on starting and connecting to themes  it had access related issue, if installed in C drive. Install in D drive.

Step 2 : Copy the static resources for your theme

Do not modify the Portal 8.0 theme directly, because this theme can be updated by service fix packs and override your changes.

  1. Connect your WebDAV client, such as WebDrive or AnyClient, to http://host:port/wps/mycontenthandler/dav/themelist/.
  2. Copy the ibm.portal.80Theme folder to a local disk.
  3. Rename the folder to the name of your theme, such as customTheme.
  4. In the metadata folder, edit the localized_en.properties file, or whichever file is your default locale, and change the value of the title key to the display name of your theme, such as Custom Theme. Save the file. Repeat this step for any of the other locale files for the languages that you plan to support.
  5. Edit the metadata.properties file and change the Portal8.0 part of the com.ibm.portal.layout.template.href value to customTheme. Make sure that you have two properties that look like the following example:
com.ibm.portal.layout.template.href=dav\:fs-type1/themes/Mattv8Theme/layout-templates/2ColumnEqual/
resourceaggregation.profile=profiles/profile_deferred.json
  1. Save the file.
  2. Delete the skins folder from your customTheme, which removes the extra copies of the skins that are shipped with IBM® WebSphere® Portal.

Your custom skin is created in a later step.

customTheme/skins
  1. Copy the entire customTheme folder into the themelist folder.
  2. Double-check the contents of the customTheme folder in the themelist to ensure that everything is copied correctly. Compare each subfolder in customTheme to the corresponding subfolder in ibm.portal.80Theme to ensure that it looks like the correct number of files were copied. Recopy any files or subfolders that are missing. In particular, be sure to:
    1. Double-check the contents of the metadata.properties file in the themelist.
    2. Double-check the contents of the profiles folder. You now have four files in that folder:
                 profile_admin.json
                 profile_deferred.json
                 profile_full.json
                 profile_lightweight.json

Step 3 : Copy the static resources for your skin

  1. Connect your 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 your skin, such as customSkin.
  4. In the metadata folder, edit the localized_en.properties file, or whichever file is your default locale, and change the value of the title key to the display name of your skin, such as Custom Skin. Save the file. Repeat this step for any of the other locale files for the languages that you support.
  5. Copy the entire customSkin folder into the skinlist.
  6. Double-check the contents of the customSkin folder in the skinlist to ensure that everything copied correctly. Compare each subfolder in customSkin 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.

Step 4 : Copy the dynamic resources for your theme

  1. Switch to the Java EE perspective, and select File -> New -> Dynamic Web Project.
  2. In the Project name field, enter the name of your theme, such as CustomTheme.
  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 customTheme, or whatever you want your context root to be, and click Finish.
  6. Expand your new CustomTheme project and find and expand the WebContent folder.
  7. Find the PortalServer_root\theme\wp.theme.themes\default80\installedApps\DefaultTheme80.ear\DefaultTheme80.war\skins folder on file system and drag it onto the WebContent folder. This step copies and imports the skins folder into your dynamic web project.
  8. Find the PortalServer_root\theme\wp.theme.themes\default80\installedApps\DefaultTheme80.ear\DefaultTheme80.war\themes folder on file system and drag it onto the WebContent folder. This step copies and imports the themes folder into your dynamic web project.
  9. In your CustomTheme project, find the WEB-INF folder inside the WebContent folder.
  10. Find the PortalServer_root\theme\wp.theme.themes\default80\installedApps\DefaultTheme80.ear\DefaultTheme80.war\WEB-INF\decorations.xml file on file system and drag it onto the WEB-INF folder. This step copies and imports the file into your dynamic web project.
  11. Find the PortalServer_root\theme\wp.theme.themes\default80\installedApps\DefaultTheme80.ear\DefaultTheme80.war\WEB-INF\tld folder on file system and drag it onto the WEB-INF folder. This step copies and imports the tld folder into your dynamic web project.
  12. The previous files and folders are the only ones that you need. Do not copy any others from the DefaultTheme80.war file. Find your CustomThemeEAR project, right-click it and select Export -> EAR file from the menu.
  13. Click Browse, select a folder to export your EAR file to.
  14. Click Save and click Finish.
  15. Log on to the WebSphere® Integrated Solutions Console and go to Applications -> Application Types -> WebSphere enterprise applications.
  16. Click the Install toolbar button.
  17. Click Browse…, find, and select the EAR file that you exported and click Next.
  18. Select Fast Path, expand Choose to generate default bindings and mappings, select Generate Default Bindings, and click Next.
  19. Change any installation option values that you want, or use the default values, and click Next.
  20. For Map Modules to Servers, select the Custom Theme module in the table, select the …,server=WebSphere_Portal entry 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 your CustomTheme EAR in the table of enterprise applications and click the Start toolbar button.
  24. On the file system, find and expand the wp_profile_root\installedApps\<cell>\CustomThemeEAR.ear\CustomTheme.war folder. The unique copy of the dynamic resources for your theme are located in the themes and skins folders. When customizing your theme, always change the files at that location and do not modify the ThemeModules.war file.

Note- Make sure your theme/skins are in WebContent and tld/decorations in WEB-INF. Also, decoration.xml should be empty.

Step 5 : Link the static resources to the dynamic resources for your theme

  • Bind your theme to the context root of the web app

1. In PortalServer_root\bin, create the file input.xml with the following contents:
TIP: A sample input file can be found in PortalServer_root/doc/xml-samples/ExportThemesAndSkins.xml

<?xml version=”1.0″ encoding=”UTF-8″?>

<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd"
type="export"
create-oids="true">
<portal action="locate">
<skin action="export" objectid="*" />
<theme action="export" objectid="*" />
</portal>
</request>

2. From a command line, change to the PortalServer_root\bin directory and issue the following xmlaccess command to export all skin and theme definitions to a file called output.xml:

xmlaccess -user <admin userid> -password <admin password> -url <hostname>:10039/wps/config -in input.xml -out output.xml

3. Edit the output.xml file. Search for the title of your theme, such as Custom Theme. Scroll up to the line with the surrounding <theme> tag; it is likely the last <theme> tag in the file. Modify it from:

<theme action="update" active="true" context-root="/wps/themeModules" default="false" domain="rel"
objectid="ZJ_MLSU3F54089F00IP6G7P3F10S5" resourceroot="dynamicSpots">

to:

<theme action=”update” active=”true” context-root=”/customTheme” default=”false” domain=”rel”

objectid="ZJ_MLSU3F54089F00IP6G7P3F10S5" resourceroot="dynamicSpots" uniquename="customTheme">

setting the correct context-root and uniquename for your theme.

4. Search for the title of your skin. Scroll up to the line with the surrounding <skin> tag; it is likely the last <skin> tag in the file. Modify it from:

<skin action="update" active="true" context-root="/wps/themeModules" default="false" domain="rel"
objectid="ZK_73OKBB1A088IE0I5O7IP2J0G77" resourceroot="Hidden" type="default">

to:

<skin action="update" active="true" context-root="/customTheme" default="false" domain="rel"
objectid="ZK_73OKBB1A088IE0I5O7IP2J0G77" resourceroot="customSkin" type="default" uniquename="customSkin">

setting the correct context-rootresourceroot, and uniquename for your skin.

5. Find the <theme> tag for the Portal 8.0 theme, it is likely the first <theme> tag in the file. Find and copy one of the <allowed-skin> tag lines, such as:

<allowed-skin skin="ZK_CGAH47L00GJJ40IDC03MS13OS2" update="set"/>

Find the <theme> tag for your customTheme theme, it is likely the last <theme> tag in the file. Paste the <allowed-skin> tag line in just before the <parameter> tags. Modify the skin parameter value identifier to be the identifier of your customSkin skin, which can be found in the objectid parameter of the <skin> tag of your customSkin skin, likely the last <skin> tag in the file, such as:

<allowed-skin skin="ZK_N0IEGGC0I08PF0IDQ60O6310N4" update="set"/>

6. Find the com.ibm.portal.layout.template.href parameter for your customTheme theme. Modify it from:

<parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/themes/Portal8.0/layout-templates/2ColumnEqual/]]></parameter>

to:

<parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/themes/customTheme/layout-templates/2ColumnEqual/]]></parameter>

7. From the command line, issue the following xmlaccess command to update the skin and theme definitions according to your change:

xmlaccess -user <admin userid> -password <admin password> -url <hostname>:10039/wps/config -in output.xml -out output2.xml

8. View the output2.xml file to verify that the result is ok, and then delete the input.xmloutput.xml, and output2.xml files.

Note:- This is where I got stuck. Make sure your xml is correct. In first time, it gave error that the xml is invalid, error in line 1 column 1. Make sure that nothing precedes <?xm…>. Check your xml with some online validator.

The output.xml generated first time, gave error when I again imported it. I took all the measures mentioned above but no luck. Solution to this problem is to make a new file, copy the edited output.xml to this new file and then import this new one.

  • Modify the dynamic resource references for your theme

  1. Log on to the WebSphere® Integrated Solutions Console and go to Resources -> Resource Environment -> Resource Environment Providers.
  2. Find and click the WP DynamicContentSpotMappings resource environment provider (REP) in the table.
  3. Click Custom properties.
  4. Notice the properties that start with 80theme. These properties are the ones that are referenced by the dynamic content spots in the theme template theme*.html files in your theme. Also notice that the values of some of those properties use the /wps/defaultTheme80 context root, meaning that they point to the dynamic resources in the web app of the IBM® WebSphere Portal 8.0 theme. You must create similar properties that use your /customTheme context root to point to the dynamic resources in the web app of your custom theme.
  5. Click the New toolbar button to add each of the following new properties:
Name Value
customTheme_asa res:/wps/themeModules/modules/asa/jsp/asa.jsp, wp_analytics
customTheme_asaHead res:/wps/themeModules/modules/asa/jsp/head.jsp, wp_analytics
customTheme_asaPortlet res:/wps/themeModules/modules/asa/jsp/asaPortlet.jsp, wp_analytics
customTheme_commonActions res:/customTheme/themes/html/dynamicSpots/commonActions.jsp
customTheme_crumbTrail res:/customTheme/themes/html/dynamicSpots/crumbTrail.jsp?rootClass=wpthemeCrumbTrail&startLevel=2
customTheme_footer res:/customTheme/themes/html/dynamicSpots/footer.jsp
customTheme_head res:/customTheme/themes/html/dynamicSpots/head.jsp
customTheme_layout lm:template
customTheme_mobileSearch mvc:smartphone/tablet@res:/wps/themeModules/themes/html/dynamicSpots/modules/search/search.jsp
customTheme_mobileNav mvc:smartphone/tablet@res:/customTheme/themes/html/dynamicSpots/mobileNavigation.jsp
customTheme_pageModeToggle res:/customTheme/themes/html/dynamicSpots/pageModeToggle.jsp, wp_toolbar
customTheme_preview res:/wps/themeModules/modules/pagebuilder/jsp/preview.jsp,wp_preview
customTheme_primaryNav res:/customTheme/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemePrimaryNav%20wpthemeLeft&startLevel=1
customTheme_projectMenu res:/wps/themeModules/modules/pagebuilder/jsp/projectMenu.jsp,wp_project_menu
customTheme_search res:/wps/themeModules/themes/html/dynamicSpots/modules/search/search.jsp
customTheme_secondaryNav res:/customTheme/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeSecondaryNav&startLevel=2&levelsDisplayed=2
customTheme_sideNav res:/customTheme/themes/html/dynamicSpots/sideNavigation.jsp?startLevel=2
customTheme_status res:/customTheme/themes/html/dynamicSpots/status.jsp, wp_status_bar
customTheme_toolbar res:/wps/themeModules/modules/pagebuilder/jsp/toolbar.jsp,wp_toolbar
customTheme_topNav res:/customTheme/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeHeaderNav&startLevel=0&primeRoot=true

6. Click OK to create each property. Click Save to update the master configuration.

7 . Connect your WebDAV client to http://host:port/wps/mycontenthandler/dav/fs-type1/.

8. From the themes\customTheme\nls folder, copy the theme_en.html file, or whichever file is your default locale, to the local drive. Repeat for any of the other locale files for the languages that you support.

9. Edit the theme*.html files, and find and replace all occurrences of 80theme with customTheme. For example, dyn-cs:id:80theme_head becomes dyn-cs:id:customTheme_head.

10. Save the files.

11. Copy the files into the fs-type1 folder.

  • Modify the dynamic resource references for your skin

  1. Connect your WebDAV client to http://host:port/wps/mycontenthandler/dav/fs-type1/
  2. From the customSkin\nls folder, copy the skin_en.html file, or whichever file is your default locale, to the local drive. Repeat for any of the other locale files for the languages that you support.
  3. Edit the skin_lang.html files, and find and replace all occurrences of 80theme with customTheme.
  4. Save the files.
  5. Copy the files into the skinlist folder.

RESTART SERVER

Step 6 :Make your custom skin the default skin

  1. Log on to the WebSphere® Integrated Solutions Console for your portal.
  2. Click Administration.
  3. Click Themes and Skins.
  4. Select Custom Theme in the themes list and click Edit theme.
  5. Select Custom Skin in Skins for this theme list and click Set as Default.
  6. Click OK.

Step 7 : TEST

Change the theme logo – IBM Link

Basically you have connect through AnyClient in this path:

fs-type1:themes\<customtheme>\css\default\default.css

Copy the default.css file into you local disk. Edit this css image attribute.

.wpthemeBanner .wpthemeBranding img {
		background-image: url("../images/master.png"); //your logo path
		background-position:0 -654px;
		width:36px;
		height:16px;
		border: 0 none;
		line-height: 0;
		vertical-align: middle;
		display: block;
		}

The css in this file is very packed. For a better view use CodeBeautifier.

Update the css file on to the server.

Make a test page and apply this theme. TEST!!!
Advertisements

1 Comment (+add yours?)

  1. Kareem Mahmoud
    Aug 17, 2016 @ 13:30:05

    Nice !!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: