E-mail
WCM 6.1 comes bundled with a powerful web application in an unexpected location - the out-of-the-box Page Builder Theme. This theme gives users the ability to easily change portal and do many of the activities that previously required access to portal administration such as:
- Create new portal pages
- Change the layout
- Add portlets and widgets to the page
- Even create blogs and wikis with WCM
This functionality is more than meets the eye, and despite IBM best efforts, its still possible to build something useful from it 
For example, when you create a page, and deploy a blog, it creates a new library for the blog based on the "Blog Template" library.
Page Builder is available out-of-the-box in "Tab Menu - Page Builder" theme. You can also add it to your own custom portal theme, as the components are modular widgets that can be consumed directly.
It seems that IBM intends for the Page Builder theme to be thought of as an alternative for portal administration, rather than an end user theme since the introduction says:
"Once you have created portal pages and added portlets, feeds, widgets, and social elements for teamwork, such as activities, communities, social bookmarks, you can change the style of pages by applying a lightweight theme."
Customize the stylesheets
Note that IBM has provided some extensive documentation about how the stylesheets are put together and how to make changes. These are located in the same folder as the Pagebuilder css files: IBM\WebSphere\wp_profile\installedApps\node1\Enhanced_Theme.ear\wp.theme.enhancedtheme.war\themes\html\Enhanced\css
in LotusUI_Doc.zip
(attached).
You can add a stylesheet to the "customize tray".
To do this, proceed as follows:
- Create an alternate Cascading Style Sheet (.css) file for the theme. Use the styles provided out of box inwp_profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/cssas a guide.
- Add a folder towp_profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css .
- Save the CSS and resources for the new style there.
- Open the filewp_profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/system/styles.json.
- Register the style by adding an entry to the items array in the following format:
The display name will show in the Customize shelf. The path to the stylesheet is used as its ID. The path should be relative to the folder css and exclude the .css file extension. For example, the ID for the orange theme provided out of the box is orangeTheme/orangeTheme, as its stylesheet is located at wp_profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/orangeTheme/orangeTheme.css. The json object in the file styles.json contains two attributes that are used for globalizing the style display strings localizationPackageName andlocalizationBundleName. 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 style, 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 style to the default All category under Change Style in the Customize shelf. - To add a new category, editwp_profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/changeStyle.jsonand add another item to the categories array in the json object. Example:where the attribute url is the path to a json file that contains the style entries for the new category. Model this json file afterwp_profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/styles.json.
- Restart the Dojo WAR file in the WebSphere Application Server administrative console to pick up any new files.
- Verify that your custom style has been added to the Customize area.
Customizing the template
You can change template to create a very different type of blog or wiki by editing the template libraries. IN WCM, add these libraries to you authoring portlet by going to "edit shared settings" and adding access the following libraries: "Blog Template", "Blog Resources" and "Blog Solo Template".
Blog Template
This is the site structure and default content for what's called the "Blog Library" in the Page Builder customize tray.
Blog Solo Template
This is the site structure and default content for each blog.
Blog Resources
This is the design library with all the presentation templates and components.
My goal with this customization it to use modify this template into a respectable looking Wordpress style blog that a real person wouldn't mind actually using. It will be a mixture of static and dynamic content.
If your not already familiar with WCM site development your going to get lost in these steps but if I include everything I'll never get through it but I'll try to be as detailed as possible.
Define your structure and navigation
The page builder blog is not set up like a site out of the box, the first thing I was to do is set up some pages. Go into the Blog Template Library and create these site areas: Home, News (the blog), Services, and About Us.
Theme Policies
Note: Page builder and the Tab Menu - Page Builder theme do not support theme policies, hence the information in the following section does not apply to Page builder and the Tab Menu - Page Builder theme.
References:
IBM WebSphere Portal Version 6.1.5 Information Centerhttp://publib.boulder.ibm.com/infocenter/wpdoc/v6r1/index.jsp?topic=/com.ibm.wp.ent.doc_v615/welcome_main.html