1. Delete the skins folder as we have them already in original Page Builder theme
2. Delete plugin.xml from WEB-INF folder
1. Change the name of the folder under c:\temp\PageBuilder2.war\themes\html from PageBuilder2 to ‘name of your theme’ : say MyCustomTheme
2. Change the id and display-name of the theme in web.xml. It should look somewhat like this.
<?xml version="1.0" encoding="UTF-8"?>
<web-app id=" MyCustomTheme" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
Getting static content from WebDav
Several stylesheets, locale-based html files, icons, images, scripts, etc are considered as staic resources located in the Portal WebDav directory. We need to bundle them in our theme EAR in order to achieve portability. Later we need to change theme references from WebDav to local resources.
We can use a WebDav client, say AnyClient. You can get the static contents from http://www.jscape.com/products/file-transfer-clients/anyclient/" title="here">here
1. Go to File -> Site Manager -> New
2. Enter ‘WebDav Dir’ as site name
a. Connection type : WebDav
b. Host : http://[HOST]:[PORT]/wps/mycontenthandler/dav/fs-type1/
c. Username : wpsadmin
d. Password : wpsadmin
3. Click ‘Connect’
4. In the right column there will be a list of folders. Go inside themes\PageBuilder2 directory
5. Select some temporary folder in left column
6. Select all the files in right column and press << button to copy those files your temporary directory
7. Go to the above temporary directory and copy everything to c:\temp\PageBuilder2.war\themes\html\MyCustomTheme\
8. Merge and copy all the folders if you get any warning message
Updating theme to point the local static resources
We need to update the references which are pointing towards the resources of WebDav directory. Before that we need to know the static references and resource environment variables as configured in Websphere Application Server
1. Go to Websphere Portal Administrative console [https://localhost:10032/ibm/console/logon.jsp]
2. Go to Resources -> Resource Environment -> Resource Environment Providers
3. Click on WP DynamicContentSpotMappings -> Custom Properties
4.You will see this
5. Now we need to change the references to all the dynamic content spots in theme_[locale].html in c:\temp\PageBuilder2.war\themes\html\MyCustomTheme\nls\
6. Open theme_en.html and replace all
<link rel="dynamic-content" href="dyn-cs:id:tabNav@tl:oid:csa2.theme">
<link rel="dynamic-content" href="res:/MyCustomTheme/themes/html/ MyCustomTheme /tabNav.jsp">
7. So as you can see that the href of link tag is replaced by its corresponding value as given in resource environment provider in WAS. Similarly replace all such references except the layout reference. So do not replace this
<a rel="dynamic-content" href="dyn-cs:id:layout@tl:oid:csa2.theme"></a>
8. After replacing all references in theme_en.html we need to change in config.jsp too.
9. Open config.jsp in c:\temp\PageBuilder2.war\themes\html\MyCustomTheme\ and change
<r:dataSource uri="dyn-cs:id:configGlobal@tl:oid:csa2.theme" escape="none">
<r:dataSource uri="res:/ MyCustomTheme/themes/html/ MyCustomTheme/configGlobal.jsp?max-age=-1" escape="none">
<r:dataSource uri="dyn-cs:id:configDynamic@tl:oid:csa2.theme" escape="none"/>
<r:dataSource uri="res:/ MyCustomTheme/themes/html/ MyCustomTheme/configDynamic.jsp" escape="none"/>
Now you can start customizing your theme in order to change the look-and-feel of it. Here is a brief description of basic components of Page Builder theme.
1. Default.jsp : responsible for including the theme files through the "theme.html" page.
2. head.jsp : responsible for including the common styles and scripts, such as (Portal Theme and Skin Styles, Dojo Theme Styles, Widgets Styles, Dojo Script include)
3. bannerNav.jsp : responsible for the navigation banner menu such as (Home, Administration, ...)
4. search.jsp : responsible for the search form in the banner.
5. bannerCommonActions.jsp : responsible for the navigation banner common actions such as (Login, Logout and Help).
6. tabNav.jsp : responsible for displaying the navigation tabs under the banner navigation.
7. asa.jsp : responsible for generating "active sight analytics".
If you want to change the styling or background of any element you can simply open master.css in css folder and tweak it a little bit.
Package the theme as WAR and deployment in WAS
Now we need to wrap up everything in a WAR and deploy in Websphere Application Server. To do so :
1. Go to c:\temp\PageBuilder2.war\
2. Select all files, right-click and create a ZIP file
3. Rename the ZIP file as MyCustomTheme.war
Now Install the WAR file in WAS using following steps :
1. Open url https://localhost:10032/ibm/console/logon.jsp
2. Login using your credentials
3. Go to Applications -> New Application
4. Click New Enterprise Application
5. Browse to you WAR file and click Next
6. Choose Fast Path and click Next
7. In Select Installation Options screen, type MyCustomTheme_war as application name, leave everything as default and click Next
8. In Map modules to servers screen select Websphere_Portal as server, check the checkbox next to you WAR and click Next
9. In next screen type context root as /MyCustomTheme
10. In next screen just click Finish
11. After the process finishes check whether you application is ‘started’. If not then start it.
Getting the theme to Portal Server
Now the theme is successfully installed in WAS, we need to make it accessible to Portal using XMLAccess. So first we will export all the themes from Portal Server and edit the output script to include our theme in the theme list of Portal.
1. Create an xml file say themeExport.xml with following content
<?xml version="1.0" encoding="UTF-8"?>
Now run the following script in xmlaccess
xmlaccess.bat -user wpsadmin -password wpsadmin –url localhost:10039/wps/config -in [path to]\themeExport.xml -out c:\tmp\allThemes.xml
3. If you open c:\tmp\allThemes.xml, you will find a lot of code. To format it :
a. Remove all the elements except PageBuilder one
b. Change the ‘default’ attribute to ‘false’
c. Change the "context-root" attribute value to "/MyCustomTheme", "resourceroot" attribute value to "MyCustomTheme" and "uniquename" attribute value to “MyCustomTheme ".
d. For every locale there will be a title provided. Change the title of appropriate locale.
e. Change the reference value of theme template parameter resources to :
<parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[res: MyCustomTheme /themes/html/ MyCustomTheme /]]></parameter>
4. Now run the following script in command prompt to import theme through xmlaccess
xmlaccess.bat -user wasadmin -password wasadmin –url localhost:10039/wps/config -in c:\tmp\ allThemes.xml
5. Restart the Portal Server and you can see your theme in Portal Theme List.
1. Sample snapshot of changed theme look-and-feel
2. Banner navigation, action menu, tabbed navigation, etc. achieved through iWidgets.
3. Custom Banner navigation, Tab Navigation and Common action links
Page Builder theme do not support the following portal features:
1. The Tab Menu - Page Builder theme does not use side navigation. Therefore, if a user of a portal with the page builder theme hides the top navigation, for example by selecting SideNavOnly and turning the theme style into side navigation only, then the navigation will disappear.
2. The page builder skins support the directional Move options in their portlet context menus only if the current page is rendered with a layout template. If a legacy layout is in use, the Move options are not available in the portlet context menus.
3. The new page dialog launched from page builder can only customize the page title and its privacy mode and only supports creating normal portal pages with modeled layouts.
1. Page Builder theme provides enhanced tagging and rating, allowing users to easily organize and evaluate content without leaving the page they are viewing.
2. Easily Customizable, and simplified page creation allows any user to add content effectively.
3. Leverages vast functionalities of Portlets as well as iWidgets.