WEX V8 PoT-Theme Customization

IBM Software An IBM Proof of Technology
IBM WebSphere Portal V8

Lab : Theme Customization
Authors:
Bryan Daniel (bryand@us.ibm.com)
Jon Lidaka (jjlidaka@us.ibm.com)

IBM Software
Contents
OVERVIEW............................................................................................................................................................4
INTRODUCTION..................................................................................................................................................................4
DURATION...........................................................................................................................................................................5
LAB 1 THEME CUSTOMIZATION....................................................................................................................................6
1.1 CREATE THEME DEVELOPMENT PAGE.........................................................................................................................6
1.2 CREATE CUSTOM THEME................................................................................................................................................9
1.3 INVESTIGATE DYNAMIC CONTENT SPOTS..................................................................................................................20
1.4 CHANGING THE PAGE LOGO.........................................................................................................................................24
1.5 CREATING CUSTOM STYLES.........................................................................................................................................29
1.6 THEME PROFILES............................................................................................................................................................42
1.7 THEME MODULES............................................................................................................................................................47
APPENDIX A NOTICES.............................................................................................................................................................52
APPENDIX B TRADEMARKS AND COPYRIGHTS..................................................................................................................54
Web Experience v8 PoT Page 2

IBM Software
Overview
In IBM WebSphere Portal, themes allows you to customize the overall look and feel of the page. In
addition to themes, skins allows you to customize the decoration around individual portlets on a page.
This lab will focus on themes, but the knowledge and concepts you learn will also apply to the
customization of skins.
Modern websites and browsers enable incredible new capabilities that can greatly enhance your user's
web experiences. However, these capabilities are not without cost in terms of large page sizes and more
process in the browser when each page is rendered. These capabilities are worth it when you need
them, but removing them for an entire site or including them only on pages that take advantage of these
capabilities provides for more flexibility.
The new WebSphere Portal modularized theme provides a flexible framework that:
Minimizes download size by giving you the control to specify just the capabilities
that are needed for a certain scenario or use case.
Minimizes the number of requests by combining necessary resources.
Previous themes required a monolithic design and that the same content was downloaded for every
page. Theme optimization allows the theme to be highly adaptive to the content you are displaying on
certain pages. For example, on pages where only simple content is displayed you can define a
lightweight profile. A lightweight profile causes the system to download few static resources such as
JavaScript and CSS files. However, on pages where more advanced scenarios are required you can
choose to switch to a more powerful profile that causes more resources to download than on the other
pages. This way you have only the capabilities you need on certain pages, but all other pages do not
pay the penalty. As a result the overall system performance increases significantly.
Theme optimization uses modules and profiles to achieve the flexibility that allows you to achieve better
performance. Modules are the components of the new theme that define capabilities. Examples are
Tagging&Rating, Dojo, or jQuery. Profiles define sets of modules which can be assigned per page. A
default profile is used if no page-specific profile is defined.
By applying these concepts it is possible to turn on and off an arbitrary number of features for certain
pages, develop modules independent of each other for greater development speed and flexibility, easily
add new capabilities later on into an existing theme and build an altogether new theme with the existing
one. This building block concept allows the new theme to work side by side through self contained
modules without risking the existing theme.
Introduction
In this lab you will learn how to customize the look-and-feel of the portal page. This will include the
following:
Creating a custom theme and changing the page logo

Creating customized page styles
Creating customized page layouts
Understanding the new theme optimization framework. This includes the creation of custom
profiles and modules.

IBM Software
Please note that the lab has been written for all persons to complete. However, in order to gain
full benefits, some web design knowledge would be beneficial. This includes an understanding
of HTML, Style Sheets (CSS), and JavaScript.
Duration
You should be able to complete this lab in approximately 60 minutes.
Page 4 Theme Customization

IBM Software
Lab 1 Theme Customization
1.1 Create Theme Development Page

As a best practice, theme design should be done on a test/development page. In this section, you will
create a page to be used for developing and testing theme customization.
__1. Using a web browser, go to http://portalww.demos.ibm.com:10039/wps/portal and login as

wpadmin (password is passw0rd).
__2. Click on the CTC Demo link located towards the top of the page:
The Content Template Catalog demo site will be used in

this Theme customization lab. However, the
concepts/steps can be applied to the out-of-box Portal
V8 theme as well.
__3. Click the Edit Mode link to switch from view mode to edit mode.
__4. Create a new page by clicking on More-->New Child Page.

IBM Software
__5. Enter ThemeDev as the page name and ThemeDev as the friendly URL name. Select
Standalone Topic as the page template to base this new page on, and click Create.
__6. Click the Save button (located in the top right corner of the page) to save the changes.
__7. Click the View Mode link to switch from edit mode to view mode.
__8. Complete the following steps to shorten the rich text content on the page. (This makes is easier
later when you want to move portlets around on the page for testing.)

IBM Software
__a. Move the mouse over the sample rich text content and click on the Edit icon.
__b. Scroll down to the Body section. Use the rich text editor to shorten the text to just a few
lines.
__c. Click on Save and then Save and Publish button. Click on the Close button.

IBM Software
__d. Verify your theme test/dev page appears as follows:
1.2 Create Custom Theme

In this section, you will learn how to use the WebDAV interface to connect to the WebSphere Portal
Server. Once connected to WebDAV, you will create a copy of an existing theme so you can safely
perform your own customizations.
__1. Complete the following steps to setup the AnyClient WebDAV client: Ignore update message for
newer version.
__a. Double-click on the AnyClient icon on the desktop.
__b. Select File-->Site Manager from the menu bar.
__c. Click the New button to define a new site.
__d. Click the Rename button and enter themelist as the new site name.
__e. Select WebDav as the protocol to use. Then enter the remaining values:
Host : http://portalww.demos.ibm.com:10039/wps/mycontenthandler/dav/themelist
Username : wpadmin
Password : passw0rd
Local Dir : /root/Desktop
__f. Verify your new site appears as follows and then click the Save button to save.

IBM Software
__g. Click the New button to define an additional site.
__h. Click the Rename button and enter fs-type1 as the new site name.
__i. Select WebDav as the protocol to use. Then enter the remaining values:
Host : http://portalww.demos.ibm.com:10039/wps/mycontenthandler/dav/fs-type1
Username : wpadmin
Password : passw0rd
Local Dir : /root/Desktop
__j. Verify your new site appears as follows and then click the Save button to save.

IBM Software
A WebDAV client is needed to connect to WebSphere

Portal (which is a WebDAV server). For this lab, you
will be using the AnyClient WebDAV client. This client
provides a FTP based type of IDE. There are many
other WebDAV client available as well, some of which
allows you to 'map' a drive to WebDAV.
__2. Select the themelist site and click the Connect button.
IMPORTANT
The wps/mycontenthandler/dav/themelist WebDAV

entry point should be used when you are creating a new
theme (typically by an administrator). Once the theme is
created, you should use the fs-type1 entry point (which
will be covered later in the lab).

IBM Software
__3. The AnyClient interface allows you to move files between the Local System and the Remote
System (which in this case is the Portal Server). Highlight the ctc.80 folder that is listed under
Remote System and click the green arrow to copy it to your local desktop.
__4. WAIT until you see a File Transfer Complete message. (The transfers progress bar may not
always be accurate.) This may take 1-2 minutes.
I M P O R T A N T !!
Some WebDAV Clients allow you to directly edit files

on the WebDAV drive (similar to working with a
network shared drive). Unfortunately, the AnyClient
WebDAV client does not provide this functionality.
As such, for this lab, it is important to understand
that you will be modifying theme files from your
local desktop and then copying them back to the
server.
__5. Go to your desktop. Rename the copied folder from ctc.80 to ctcCustom.

IBM Software
__6. Open the ctcCustom\metadata.properties file in a text editor. Update the

com.ibm.portal.layout.template.href value by replacing ctc.80 with ctcCustom (as shown in
the figure below). When done save and close this file.
The com.ibm.portal.layout.template.href value specifies

the default layout of newly created pages that use this
theme. You will be learning more about layouts in a later
section of the lab.
__7. Open the ctcCustom\metadata\localized_en.properties file in a text editor, and change the
title property value to CTC Custom Theme. Save and close the file.

IBM Software
__8. Open the ctcCustom\theme.html file in a text editor. Locate the <body> tag and insert the
following line immediately afterwards:
<div>ctcCustomTheme</div>
Save and close the file when complete.

IBM Software
IMPORTANT!
It is important to note that the CTC Theme is not using separate

localized theme files. Meaning, the theme.html file is used for every
language. Note that this just means the overall look and feel, and
placement of items/menus on the page will remain the same for all
languages. The actual content/text on the page will change languages
as that is managed by WCM (ie content items) and Portal (ie page titles
).
In the case of the out-of-box Portal V8 Theme, you will see lines similar
to the following in it's theme.html file:
<link rel="alternate" href="nls/theme_en.html" hreflang="en">
This indicates that when the browser is using the English language,
then the theme_en.html file located within the nls directory will be used.
This means, that if you want makes changes that affect all languages,
then you have multiple files to update.
__9. Navigate to AnyConnect Client. Complete the following steps to use the AnyConnect client to
copy the entire ctcCustom folder from your local desktop into the WebDAV Themelist directory:
__a. Click the refresh toolbar button to update the local system directory listing.

IBM Software
__b. Highlight the ctcCustom folder that is listed under Local System and click the green
arrow to copy it to the themelist directory on the Portal server.
NOTE: If you are prompted that a metadata.properties file already exists, choose the
option to copy and replace (you want to use the version of the file that was previously
updated and not the system generated version).
__c. WAIT until you see a File Transfer Complete message. (The transfers progress bar
may not always be accurate.) This may take 1-2 minutes.
__d. Verify that the ctcCustom folder now appears under the Remote System themelist
directory.

IBM Software
__10. From the web browser, navigate to Administration-->Themes and Skins page. (If needed,
open a browser window, go to http://portalww.demos.ibm.com:10039/wps/portal and login
as wpadmin/passw0rd). Observe your new theme appears in the list of installed themes:
__11. Complete the following steps to update your ThemeDev page to use this newly created theme:
__a. Navigate to the CTC Demo-->ThemeDev page.

IBM Software
__b. Click the Edit Mode link to switch from view mode to edit mode.
__c. Move your mouse into the Page Properties section and click the edit link (as shown in
the figure below):
__d. From the Page Properties dialog window, go to the Advanced tab. Select CTC Custom
Theme as the theme and click Save.

IBM Software
__e. Click on View Mode to switch from edit mode to view mode.
__f. Observe the ThemeDev page is now using the new theme, as indicated by the small
message that was inserted at the top of the page:

IBM Software
You might be wondering why WebDAV? and where

are the theme files are stored? By using the WebDAV
interface, web designers can have easy access to the
theme folder of the Portal environment. In effect, they
are mapping a drive to Portal through a standards
base protocol.
Theme files are stored within the Portal database. The

database is shared among cluster members. As such,
theme customizations are easily made available to all
cluster nodes. Before WebDAV, theme developers
would work directly on the file system, and would have to
rely on coordination with administrators for changes to
be propagated to all cluster nodes.
1.3 Investigate Dynamic Content Spots

In this section, you will learn about dynamic content spots. The static template HTML theme files use
dynamic content spots to reference JSP files or other dynamic resources. The dynamic resources are
stored in a WAR file. The creation of dynamic content spots does require some development skill, and is
beyond the scope of this lab. However, it is important to understand how they are used within the theme
design, and as such, will be touched upon in this section.
__1. Open the ctcCustom\theme.html file in a text editor.
NOTE: Use the folder that you saved on your local desktop. Opening files directly on the
WebDAV drive is also supported, but its performance is dependent on the WebDAV client being
used.

IBM Software
__2. Observe that this is a static HTML file that contains the typical HTML elements and CSS class
attributes. Also observe that HTML tags are also used to specify dynamic content spots, where
dynamic content will be inserted during runtime (as shown in the figure below). When done
reviewing the HTML, close the ctcCustom\theme.html file.
Notice that the dynamic content spots circled in the

above picture use two types of formats:
The first references a dynamic content spot by a 'logical

name' (dyn-cs:id:80theme_topNav).
The second references the dynamic content spot by a

'direct name' (res:/ctc_theme/jsp/HomeLink.jsp).
In the next set of steps, you will learn how 'logical

names' are defined.
__3. From the web browser window, go to http://portalww.demos.ibm.com:10032/ibm/console. If

needed, login as wpadmin (password is passw0rd).

IBM Software
__4. Navigate to Resources-->Resource Environment-->Resource Environment Providers.
__5. Locate WP DynamicContentSpotMappings and click on it.
__6. Under the Additional Properties section, click on Custom Properties.
__7. Search for the 80theme_topNav property. (This is the name of the dynamic content spot
previously mentioned.) Observe that the property points to the navigation.jsp file (along with
some parameters that are passed in the URL).

IBM Software
__8. (Optional) As described in the WebSphere Portal InfoCenter, the out of box WebSphere Portal
dynamic resources for themes are located within the C:\IBM\WebSphere\PortalServer\theme\
wp.theme.themes\default80\installedApps\DefaultTheme80.ear\DefaultTheme80.war\themes
directory. As such, if you would like to see the contents of the navigation.jsp file, open the
following file in a text editor:
C:\IBM\WebSphere\PortalServer\theme\wp.theme.themes\default80\installedApps\Default
Theme80.ear\DefaultTheme80.war\themes\html\dynamicSpots\navigation.jsp
Close the file when you are finished reviewing. Do NOT make any changes to this file.
I M P O R T A N T!
If you are not a JAVA Developer, the contents of the

JSP files may appear completely foreign to you. This is
OK! The point here is that the web design (which
includes HTML and CSS) is separate from the dynamic
code (JSP files). The designer and the developer can
work in parallel. In addition, as you will see later in the
lab, most of the customization of the look and feel of a
theme is handled within the CSS Styles and not
necessarily within the JSP files.
__9. Click the Logout link in the upper right corner of the browser window to logout from the
WebSphere Application Server Integration Solutions Console.

IBM Software
__10. (Optional) As previously mentioned in the beginning of this section, the second way to
reference a dynamic content spot is by a 'direct name' (i.e. res:/ctc_theme/jsp/HomeLink.jsp). If
you would like to see the contents of the HomeLink.jsp file, open the following file in a text
editor:
C:\IBM\WebSphere\wp_profile\installedApps\portalCell\CTC.ear\ctc.war\jsp
Close the file when you are finished reviewing. Do NOT make any changes to this file.
At this point, you might be wondering which method to

use for referencing dynamic content spots.
With the 'logical name', the web designer only needs to

reference a specify a name/variable in the HTML file.
The mapping of the name/variable to the actual dynamic
code (JSP file) can be handled within the WebSphere
Admin Console. This loose-coupling allows you to easily
change the JSP file and keeps the web designer from
having to know exact details about the JSP file URL.
With the 'direct name', the web designer must work

more closely with the developer, and must know the
exact URL for the JSP files. While this does provide
tighter-coupling, it removes the need to manage or map
variable names to JSP files in the WebSphere Admin
Console.
Modifying the dynamic content spot JSP files provided

by WebSphere Portal (i.e. navigation.jsp) is not
recommended. Nor is saving your own custom JSPs into
the C:\IBM\WebSphere\PortalServer\theme\
wp.theme.themes\default80\installedApps\DefaultThem
e80.ear\DefaultTheme80.war directory.
The reason is is that your changes may be lost when a

fixpack is later applied. You should package your
customized JSP files within your own web application
(as was done for the HomeLink.jsp file used by the CTC
Demo site). Details on how to do this is described within
the WebSphere Portal InfoCenter.
1.4 Changing the Page Logo

In this section, you will make a simple change to the theme file. More specifically, you will learn how to
change the logo that is displayed on the page.
__1. Using the FireFox web browser, go to http://portalww.demos.ibm.com:10039/wps/portal and

login as wpadmin (password is passw0rd).
__2. Navigate to the CTC Demo-->ThemeDev page.

IBM Software
__3. Right-Click on the CTC Logo image and select Inspect Element from the popup menu. Use
Firebug.
The Firebug plugin provides this Inspect Element

capability, and is an invaluable web design tool when
working with a Portal theme.
__4. Observe that the CTC logo image is referenced as images/logo.png.

IBM Software
__5. Open the ctcCustom\theme.html file in a text editor.
WebDAV drive is also supported, but its performance is dependent on the WebDAV client being
used.
__6. Locate the following line:
and change it to:
Save and close the theme.html file.
__7. Copy the customlogo.png file (located in your lab files directory under Themes Folder) into the
ctcCustom\images directory on your local desktop.
__8. Complete the following steps to copy the updated files into the ctcCustom WebDAV directory on
the Portal server:
__a. From AnyClient select File-->Site Manager from the menu bar.

IBM Software
__b. Select the fs-type1 site and click the Connect button.
IMPORTANT
The wps/mycontenthandler/dav/fs-type1 WebDAV

entry point should be used when modifying an existing
theme (typically by a web designer). Using this entry
point also hides some of the administrative properties
files (which you worked with in the previous section
when creating the new theme).
__c. Navigate to the /root/Desktop/ctcCustom directory on the local system and the /fs-
type1/themes/ctcCustom directory on the remote system. Select the theme.html file
on the local system and click the green arrow to copy it to the portal server (as shown in
the figure below).
NOTE: If prompted to overwrite the existing theme.html, choose Yes.

IBM Software
__d. Navigate to the /root/Desktop/ctcCustom/images directory on the local system and the
/fs-type1/themes/ctcCustom/images directory on the remote system. Select the
customlogo.png file on the local system and click the green arrow to copy it to the
portal server (as shown in the figure below).
__9. Clear the web browser cache and reload the browser page. Observe that the new logo
appears:

IBM Software
1.5 Creating Custom Styles

Themes in WebSphere Portal follow modern web design practices in that CSS is heavily used for styling
and positioning of elements on a page. Within the static html template (theme.html), you may have
noticed the absence of the HTML Table tags, which were once used in older theme designs. The use of
CSS allows for more optimization and flexibility, and has become a valuable tool in the web designer's
toolbox. A single theme may take on different appearances based on the CSS Style that is applied to it.
In this section, you will learn how to create your own custom style.
__1. If not already there, navigate to the CTC Demo-->ThemeDev page.
__3. From the edit shelf/palette, go to the Style tab. If you do not see the colors, make sure you
check the folders under AnyConnect Client. Files under Local and Remote System should
match.
Local System - /root/desktop/ctcCustom/system
Remote System - /fs-type1/themes/ctcCustom/system
Folder files should match. Check for json files (styles.json)and if you see any files missing under
Remote System, copy from Local system to Remote System.
__4. Select the Red style. The Red CSS Stylesheet is automatically applied. Observe there is a slight
change in the appearance of the page (i.e. red banner):

IBM Software
__5. Next select the Black style. The Black CSS Stylesheet is automatically applied. Observe there
is a slightly more obvious change in the appearance of the page (i.e. black banner and page
margins):
__6. Select the Default style to go back to the original setting. Click Save and then click the View
Mode link to switch from edit mode to back to view mode.

IBM Software
At this point you have seen the effect different styles can
have on the theme. In the next set of steps, you will
learn how to create your own customized style.
__7. Complete the following steps to create a new directory structure for a new custom style:
__a. Navigate to the ctcCustom\css directory.
WebDAV drive is also supported, but its performance is dependent on the WebDAV
client being used.
__b. Within the css directory, create a new folder named ctcCustom.
__c. Within the ctcCustom directory, create a new file named ctcCustom.css. Leave the file
blank for now.
__d. Copy the icon.gif file from your lab files directory (under Themes Styles folder) into
the ctcCustom directory.
__e. Verify that your directory structure now appears as follows:
Please Note Once you open AnyClient, it is recommended you Disconnect and Connect again.
This is to avoid any issues with connectivity. Please ensure you follow this step every time when
you work with AnyClient and for all of the sections outlined below before you transfer files from
Local System to a Remote System.
__f. From AnyClient, navigate to the /root/Desktop/ctcCustom/css directory on the local

system and the /fs-type1/themes/ctcCustom/css directory on the remote system.
Select the ctcCustom folder on the local system and click the green arrow to copy it to
the portal server (as shown in the figure below).

IBM Software
__8. Complete the following steps to add the new style to the edit shelf/palette:
__a. Navigate to the ctcCustom\system directory.
client being used.
__b. Open the styles.json file in a text editor.
__c. Add the following line to the styles.json. Refer to the screenshot below to help you
ensure its inserted in the correct location. Don't forget to add a comma to separate
this newly added line from the previous one.
{'label':'CTC Custom Style','id':'ctcCustom.css','url':'css/ctcCustom/ctcCustom.css',

'thumbnail':ibmCfg.themeConfig.themeRootURI+'/css/ctcCustom/icon.gif','help':''}
NOTE: This should be entered in a single line. In the screenshot below, word-wrap was
turned on to make viewing easier. In addition, instead of manually typing this in, you
can copy/paste from the styles.txt helper file (located in the lab files directory under
Themes Styles folder)).
__d. Save and close the styles.json file.

IBM Software
Please Note Once you open AnyClient, it is recommended you Disconnect and Connect again.
This is to avoid any issues with connectivity. Please ensure you follow this step every time when
you work with AnyClient and for all of the sections outlined below before you transfer files from
Local System to a Remote System.
__e. From AnyClient, navigate to the /root/Desktop/ctcCustom/system directory on the

local system and the /fs-type1/themes/ctcCustom/system directory on the remote
system. Select the styles.json file on the local system and click the green arrow to copy
it to the portal server (as shown in the figure below).
__9. Clear the web browser cache and reload the browser page.
__11. From the edit shelf/palette, go to the Style tab. You should see your newly defined CTC
Custom Style in the list:
__12. Select the CTC Custom Style and click the Save button.
NOTE: You will NOT see any changes to the page as no custom styles have been added to the
style sheet yet.
__13. Click the View Mode link to switch from edit mode to back to view mode.

IBM Software
Now that you have your own style sheet defined, you
can start to add your own custom styling. For the
purposes of this lab, you will use FireBug for inspecting
CSS styling elements.
__14. Right-Click on the top navigation bar, left of the Home link at the top of the page, and select
Inspect Element from the popup menu.
__15. Observe that the top navigation bar is generated by the following HTML:
<div class=wpthemeHeader>
Also observe that the wpthemeHeader style contains a background-color value of #424142.
__16. Within the Firebug Style window, adjust the value of the background-color property to blue.
Observe Firebug instantly updates the browser window.

IBM Software
Firebug only updates the current view in the browser

window. The manual style change is only temporary and
will be lost on a browser reload/refresh. Once you are
happy with the change, the style sheet on the server
needs to be updated to make the style persistant.
__17. Complete the following steps to make the change in the background color persistant:
__a. Navigate to the ctcCustom\css\ctcCustom directory.
client being used.
__b. Open the ctcCustom.css file in a text editor.
__c. Add the following lines to the css file:
.wpthemeHeader {
background-color: blue;
}
__d. Save and close the ctcCustom.css file.
__18. Follow the same advice as before. Disconnect and Connect to AnyClient. From AnyClient,
navigate to the /root/Desktop/ctcCustom/css directory on the local system and the /fs-
type1/themes/ctcCustom/css directory on the remote system. Select the ctcCustom.css file
on the local system and click the green arrow to copy it to the portal server (as shown in the
figure below).

IBM Software
__19. Clear the web browser cache and reload the browser page. Navigate to ThemeDev page under
CTC Demo. Observe that the top navigation banner remains blue. Please note If you do not
see a blue banner, check if you have done all the steps correctly with AnyClient and that there
are no mistakes with ctcCustom.css file. Also observe that the ctcCustom.css style sheet
override the default background-color property value (hence the term 'cascading' style sheets).
CSS can be used to change more than just colors. CSS

is also used to adjust placement of elements on a page.
The next set of steps will demonstrate this by relocating
the search bar.

IBM Software
__20. Right-click to the left of the search box and select Inspect Element (firebug) from the popup
menu.
__21. Using Firebug, you are able to quickly locate the HTML that is associated to that area of the
page:

IBM Software
__22. In the Firebug window, highlight the <div class=search role=search> line. Observe there
is a style of float: left; currently applied. Click to the left of the style property to disable it, as
show in the figure below:
__23. Disabling the float property did have an 'visible' effect yet. In the Firebug window, highlight the
<div class=actions> line (as shown in the figure below). Observe there is a style of width:
45%; currently applied. Click to the left of the style property to disable it, as show in the figure
below.
Observe that this causes the search box to move below the actions links.

IBM Software
__24. The repositioning of the search box is not yet perfect. It still needs to be 'nudged' over to the left
sightly so it is more inline with the above actions links. In the Firebug Style window, click slightly
below the disabled float property. A textbox will appear. Add a new style property named
padding-right and assign a value of 20px (as shown in the figure below).
Observe that the search box has been repositioned. Now all that remains is to make the
changes persistent by updating the ctcCustomized.css style sheet.
__25. Complete the following steps to make the change in the search bar position persistant:
__a. Navigate to the ctcCustom\css\ctcCustom directory.
client being used.
__b. Open the ctcCustom.css file in a text editor.
__c. Add the following lines to the css file:

IBM Software
.contentBanner .search {
float: none !important;
padding-right: 20px;
}
.contentBanner .right {
float: right;
width: auto !important;
}
The !important that is added forces the browser to

honor this styling and stops any other styles sheets from
overriding this value.
__d. Save and close the ctcCustom.css file.
__e. From AnyClient, navigate to the /root/Desktop/ctcCustom/css directory on the local

system and the /fs-type1/themes/ctcCustom/css directory on the remote system.
Select the ctcCustom.css file on the local system and click the green arrow to copy it to
the portal server (as shown in the figure below).
__26. Clear the web browser cache and reload the browser page. Observe that the search bar has
been repositioned. Also observe that the ctcCustom.css style sheet override the default property
values.

IBM Software
IMPORTANT!
CSS is a very powerful in that almost every aspect of the

page can be controlled from a customized style sheet.
This includes colors, element positions, and even
background images.
In this section of the lab, Firebug was used to

demonstrate how styles can be adjusted in the Portal
Theme. Alternatively, a web designer may use a Web
Designer IDE to create a set of styles, which can then be
added to the Portal as a customized style.

IBM Software
1.6 Theme Profiles

Theme profiles are assigned to a page, and has a direct effect on how a theme renders and which
features are available. The features are listed as 'modules' within a profile. In this section, you will learn
about theme profiles and create your own custom profile.
S P E C I A L N O T E:
Usually, the profiles and module contributions are determined once, when
the portal server is started and then they are used unchanged. Updates to
the system are not included until a server restart occurs, for performance
reasons.
Fortunately, a development mode can be enabled so changes can be

seen immediately. To enable development mode, the
resourceaggregation.development.mode property should be set to true
within the WP ConfigService resource environment provider (REP). The
WP ConfigService REP can be found within the WAS console under:
Resources > Resource Environment > Resource Environment Providers.
This has already been done for you on the lab image.
__1. Navigate to the ctcCustom\profiles directory on your desktop. Make a copy of the
profiles_full.json file and name it profiles_ctc.json.
The lightweight profile includes the minimal modules required to

render a portlet on a page.
The full profile includes all modules rendered at page

initialization, essentially the same amount of functionality that
was seen in previous themes.
The deferred profile will load the same modules as the

lightweight profile in view mode, but when entering edit mode or
opening the actions menu will load the deferred modules as
well.

IBM Software
__2. Open the profile_ctc.json file in a text editor. Locate the section which defines the title for the
en language title, and change the value from Full to CTC Full (as shown in the figure below
).
__3. Save and close the profile_ctc.json file.
__4. From AnyClient, navigate to the /root/Desktop/ctcCustom/profiles directory on the local

system and the /fs-type1/themes/ctcCustom/profiles directory on the remote system. Select
the profile_ctc.json file on the local system and click the green arrow to copy it to the portal
server (as shown in the figure below).
__5. From the previous section, you should still have a web browser open and on the ThemeDev
page. (If not, login to the portal as wpadmin and navigate back to the CTC Demo-->ThemeDev
page.) Clear the web browser cache and reload the ThemeDev page.
__6. From the ThemeDev page, click the Edit Mode link to switch from view mode to edit mode.

IBM Software
__7. Move your mouse into the Page Properties section and click the edit link (as shown in the figure
below):
__8. From the Page Properties dialog window, go to the Advanced tab. Select CTC Full as the
profile and click Save.
NOTE: If you do not see CTC Full listed in the profile list, please clear your browser cache.

IBM Software
The selected profile is saved as a page parameter. You can

also use the Administrator Manage Pages portlet to access the
page properties and then modify the page parameters. This is
useful to know when using a profile that causes the View
Mode and Edit Mode links to be hidden.
__9. Click the More button. Observe that the drop down menu currently contains an option for
assigning page permissions.
__10. Click on View Mode to switch from edit mode to view mode.
__11. Complete the following steps to remove the Assign Page Permissions feature:
__a. Open the profile_ctc.json file in a text editor. Locate the line which list the
mm_page_sharing_permission module and remove it.

IBM Software
__b. Save and close the profile_ctc.json file.
__c. From AnyClient, navigate to the /root/Desktop/ctcCustom/profiles directory on the

local system and the /fs-type1/themes/ctcCustom/profiles directory on the remote
system. Select the profile_ctc.json file on the local system and click the green arrow to
copy it to the portal server (as shown in the figure below).
__12. Clear the browser cache and reload the ThemeDev page.
__14. Click the More button. Observe that the option for assigning page permissions no longer
appears (as the module that provided this capability has been removed from the profile).

IBM Software
__15. Click on View Mode to switch from edit mode to view mode.
1.7 Theme Modules

Please Note - This part of the lab section was written with requirement for Internet Connectivity.
You might not see the end result without Internet Connectivity. However it is recommended that
students go through this part of the lab as it might be required for customer POC's.
A module represents an individual part of an overall theme, and can be a Style Sheet, JavaScript code,
HTML Markup. Profiles define which groups of modules will be used. In addition, profiles can define
which modules are loaded when the page is initially loaded, and which modules are loaded at a later
time (also known as deferred loading). Modules can also specify dependencies on other modules. So, if
a module is requested, it will automatically load any other modules it depends on. This 'modularization'
allows you to more easily add/remove features to a theme and allow for optimization. In this section, you
will learn about theme modules by creating your own custom module and adding it to the custom profile
created in the previous section.
__1. From your desktop, go into ctcCustom\contributions folder. Create a new file named
ctcModules.json.

IBM Software
__2. Open the newly created ctcModules.json file in a text editor and add the following text. When
done, save and close the file.
NOTE: You can copy the text from the helper file named ctcModules.json.txt, which is
located in your lab files directory.
All files within the contributions folder must have a .json

extension. Each file contains one of more module definitions. In
this case, only one module (with an id of 'geotrack') is being
defined. The geotrack module can contribute to the 'config'
section of the page, which is a section of the page located
within the body tag. The type of contribution is of type HTML
Markup, and the exact location of the module is /js/geotrack.js.
This module is self-contained, so no other modules are listed as
dependencies.
For details on other possible values for these parameters,

please refer to the Global theme modules section of the
WebSphere Portal InfoCenter.
__3. The implementation of this module has been defined to be within /js/geotrack.js. This file has
been provided for you. Copy the geotrack.js file from your lab files directory into ctcCustom/js
directory on your desktop.
The geotrack.js file uses HTML5 geolocation, which is

supported by the FireFox browser. The module insert a hidden
tag within the DOM, which can be consumed by web analytics.

IBM Software
__4. At this point, you've created a contributions files that defines one module. Complete the
following steps to add this module to the custom profile you created in the previous section.
__a. Open the ctcCustom\profile_ctc.json file in a text editor.
__b. Add geotrack to the list of modules, as shown in the figure below.
__c. Save and close the profile_ctc.json file.
__5. Complete the following steps to copy the updated files from the local desktop to the portal
server:
__a. From AnyClient, navigate to the /root/Desktop/ctcCustom/contributions directory on

the local system and the /fs-type1/themes/ctcCustom/contributions directory on the
remote system. Select the ctcModules.json file on the local system and click the green
arrow to copy it to the portal server (as shown in the figure below).

IBM Software
__b. From AnyClient, navigate to the /root/Desktop/ctcCustom/js directory on the local

system and the /fs-type1/themes/ctcCustom/js directory on the remote system. Select
the geotrack.js file on the local system and click the green arrow to copy it to the portal
server (as shown in the figure below).
__c. From AnyClient, navigate to the /root/Desktop/ctcCustom/profiles directory on the

local system and the /fs-type1/themes/ctcCustom/profiles directory on the remote
system. Select the profile_ctc.json file on the local system and click the green arrow to
copy it to the portal server (as shown in the figure below).
__6. Clear the browser cache and reload the ThemeDev page.
__7. The FireFox will prompt you if you want to share your location. Click the Share button.

IBM Software
__8. This module does NOT add any 'visual' component to the page. Instead, a hidden tag
containing geolocation information is added to the HTML page DOM. To see the tag, right-click
anywhere on the page and select Inspect Element to open the Firebug window. Scroll down to
the bottom of the Firebug HTML window and look for the asa.geo.location data that was
inserted by the new module:
IMPORTANT!
Due to network conditions and browser support, you may not

always see a result. Error checking has been included so you
may see values such as Timeout. This is OK and still
indicates that the module is executing.
__9. Logout and close the web browser. This completes the lab.

IBM Software
Appendix A Notices
This information was developed for products and services offered in the U.S.A.
IBM may not offer the products, services, or features discussed in this document in other countries.
Consult your local IBM representative for information on the products and services currently available in
your area. Any reference to an IBM product, program, or service is not intended to state or imply that
only that IBM product, program, or service may be used. Any functionally equivalent product, program,
or service that does not infringe any IBM intellectual property right may be used instead. However, it is
the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or
service.
IBM may have patents or pending patent applications covering subject matter described in this
document. The furnishing of this document does not grant you any license to these patents. You can
send license inquiries, in writing, to:
IBM Director of Licensing

IBM Corporation
North Castle Drive
Armonk, NY 10504-1785
U.S.A.
For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property
Department in your country or send inquiries, in writing, to:
IBM World Trade Asia Corporation

Licensing
2-31 Roppongi 3-chome, Minato-ku
Tokyo 106-0032, Japan
The following paragraph does not apply to the United Kingdom or any other country where such
provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION
PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-
INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states
do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement
may not apply to you.
This information could include technical inaccuracies or typographical errors. Changes are periodically
made to the information herein; these changes will be incorporated in new editions of the publication.
IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this
publication at any time without notice.
Any references in this information to non-IBM Web sites are provided for convenience only and do not in
any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part
of the materials for this IBM product and use of those Web sites is at your own risk.
IBM may use or distribute any of the information you supply in any way it believes appropriate without
incurring any obligation to you.
Appendix Page 51
IBM Software
Any performance data contained herein was determined in a controlled environment. Therefore, the
results obtained in other operating environments may vary significantly. Some measurements may have
been made on development-level systems and there is no guarantee that these measurements will be
the same on generally available systems. Furthermore, some measurements may have been estimated
through extrapolation. Actual results may vary. Users of this document should verify the applicable data
for their specific environment.
Information concerning non-IBM products was obtained from the suppliers of those products, their
published announcements or other publicly available sources. IBM has not tested those products and
cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM
products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of
those products.
All statements regarding IBM's future direction and intent are subject to change or withdrawal without
notice, and represent goals and objectives only.
This information contains examples of data and reports used in daily business operations. To illustrate
them as completely as possible, the examples include the names of individuals, companies, brands, and
products. All of these names are fictitious and any similarity to the names and addresses used by an
actual business enterprise is entirely coincidental. All references to fictitious companies or individuals are
used for illustration purposes only.
COPYRIGHT LICENSE:
This information contains sample application programs in source language, which illustrate programming
techniques on various operating platforms. You may copy, modify, and distribute these sample programs
in any form without payment to IBM, for the purposes of developing, using, marketing or distributing
application programs conforming to the application programming interface for the operating platform for
which the sample programs are written. These examples have not been thoroughly tested under all
conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these
programs.
Page 52 WCM V8 Manage Pages

IBM Software
Appendix B Trademarks and copyrights

The following terms are trademarks of International Business Machines Corporation in the United States,
other countries, or both:
IBM AIX CICS ClearCase ClearQuest Cloudscape

Cube Views DB2 developerWorks DRDA IMS IMS/ESA
Informix Lotus Lotus Workflow MQSeries OmniFind
Rational Redbooks Red Brick RequisitePro System i
System z Tivoli WebSphere Workplace System p
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications

Agency which is now part of the Office of Government Commerce.
Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel
SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its
subsidiaries in the United States and other countries.
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.
Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the
United States, other countries, or both.
ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet
Office, and is registered in the U.S. Patent and Trademark Office.
UNIX is a registered trademark of The Open Group in the United States and other countries.
Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle
and/or its affiliates.
Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other
countries, or both and is used under license therefrom.
Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp.
and Quantum in the U.S. and other countries.
Appendix Page 53
NOTES
NOTES
Copyright IBM Corporation 2012
The information contained in these materials is provided for

informational purposes only, and is provided AS IS without warranty
of any kind, express or implied. IBM shall not be responsible for any
damages arising out of the use of, or otherwise related to, these
materials. Nothing contained in these materials is intended to, nor
shall have the effect of, creating any warranties or representations
from IBM or its suppliers or licensors, or altering the terms and
conditions of the applicable license agreement governing the use of
IBM software. References in these materials to IBM products,
programs, or services do not imply that they will be available in all
countries in which IBM operates. This information is based on
current IBM product plans and strategy, which are subject to change
by IBM without notice. Product release dates and/or capabilities
referenced in these materials may change at any time at IBMs sole
discretion based on market opportunities or other factors, and are not
intended to be a commitment to future product or feature availability
in any way.
IBM, the IBM logo, and ibm.com are trademarks of International

Business Machines Corp., registered in many jurisdictions
worldwide. Other product and service names might be trademarks of
IBM or other companies. A current list of IBM trademarks is
available on the Web at Copyright and trademark information at
www.ibm.com/legal/copytrade.shtml.

WEX V8 PoT-Theme Customization

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WEX V8 PoT-Theme Customization

Uploaded by

Copyright:

Available Formats

IBM Software An IBM Proof of Technology

IBM WebSphere Portal V8

Bryan Daniel (bryand@us.ibm.com)

Jon Lidaka (jjlidaka@us.ibm.com)

Web Experience v8 PoT Page 2

Creating a custom theme and changing the page logo

Web Experience v8 PoT Page 3

Page 4 Theme Customization

Lab 1 Theme Customization

1.1 Create Theme Development Page

__1. Using a web browser, go to http://portalww.demos.ibm.com:10039/wps/portal and login as

The Content Template Catalog demo site will be used in

__4. Create a new page by clicking on More-->New Child Page.

Web Experience v8 PoT Page 5

Page 6 Theme Customization

Web Experience v8 PoT Page 7

__d. Verify your theme test/dev page appears as follows:

1.2 Create Custom Theme

__a. Double-click on the AnyClient icon on the desktop.

__b. Select File-->Site Manager from the menu bar.

__c. Click the New button to define a new site.

Page 8 Theme Customization

__g. Click the New button to define an additional site.

Web Experience v8 PoT Page 9

A WebDAV client is needed to connect to WebSphere

The wps/mycontenthandler/dav/themelist WebDAV

Page 10 Theme Customization

Some WebDAV Clients allow you to directly edit files

Web Experience v8 PoT Page 11

__6. Open the ctcCustom\metadata.properties file in a text editor. Update the

The com.ibm.portal.layout.template.href value specifies

Page 12 Theme Customization

Save and close the file when complete.

Web Experience v8 PoT Page 13

It is important to note that the CTC Theme is not using separate

<link rel="alternate" href="nls/theme_en.html" hreflang="en">

Page 14 Theme Customization

Web Experience v8 PoT Page 15

__a. Navigate to the CTC Demo-->ThemeDev page.

Page 16 Theme Customization

Web Experience v8 PoT Page 17

Page 18 Theme Customization

You might be wondering why WebDAV? and where

Theme files are stored within the Portal database. The

1.3 Investigate Dynamic Content Spots

__1. Open the ctcCustom\theme.html file in a text editor.

Web Experience v8 PoT Page 19

Notice that the dynamic content spots circled in the

The first references a dynamic content spot by a 'logical

The second references the dynamic content spot by a

In the next set of steps, you will learn how 'logical

__3. From the web browser window, go to http://portalww.demos.ibm.com:10032/ibm/console. If

Page 20 Theme Customization

__4. Navigate to Resources-->Resource Environment-->Resource Environment Providers.

__5. Locate WP DynamicContentSpotMappings and click on it.

__6. Under the Additional Properties section, click on Custom Properties.

Web Experience v8 PoT Page 21

If you are not a JAVA Developer, the contents of the

Page 22 Theme Customization

At this point, you might be wondering which method to

With the 'logical name', the web designer only needs to

With the 'direct name', the web designer must work

Modifying the dynamic content spot JSP files provided

The reason is is that your changes may be lost when a