This document provides an introduction to customizing and theming IBM Connections. It discusses the basics of what can be customized, such as the header, footer, tabs, and login page. It also covers tools used for customization like WebSphere variables, the wsadmin tool, and the customization directory. More advanced topics covered include creating community themes, customizing getting started pages, using resource bundles and strings, and additional customization options. The document concludes with a brief discussion of customization in future versions of Connections like V4.

1. "Customizing & Beautifying
Connections - Who’s the
fairest of them all?"
An introduction to theming
IBM Connections
All images and references to IBM and Lotus software are ™ and © IBM - Disney images are ™ and © Walt Disney Company
All other images, logos are ™ and © the respective companies

2. Who am I?
• Consultant at Applicable
• IBM Champion
• Working with WebSphere
based products for 10+
years
• Disney fan
• Blogger, Tweeter and
general social networker

3. Agenda
The Basics
• What is customizable
• Pre Requisites
• Tools of the trade
• Customizing the default theme – the basics
More Advanced Customization
• Community Themes
• Getting Started pages
• Resource bundles and strings
• Additional Customization
Going forward – V4 and beyond

4. What is customizable?
Header
Tabs
Footer
Getting started Widgets Text and Link colours
Login
and more ..

5. Pre-Reqs - what do we need to know
WebSphere Variables Wsadmin tool
Customization directory Application files

6. WebSphere Variables
CONNECTIONS_CUSTOMIZATION_DEBUG
variable must be created for testing and development
Log on to the Deployment manager ISC
(WebSphere Admin Console)
under Environment > WebSphere Variables create a
new cell level variable
Note: the debug must not be set to true on a production server as this can impact performance
CONNECTIONS_CUSTOMIZATION_PATH
under Environment > WebSphere Variables
Take a note of the CONNECTIONS_CUSTOMIZATION_PATH as this holds the path to the shared customisation directories
demo ..

7. Wsadmin Tool
From the IBM Connections wiki - The wsadmin client is a scripting environment that gets installed with
IBM® WebSphere® Application Server. You can use Jython language scripts, that are installed with Lotus
Connections, to access and change properties that govern the Lotus Connections configuration. You can
configure common properties that apply across all applications, and you can configure properties that
apply only to an individual application.
So what does that mean then?
Connections comes with some handy little scripts to assist with
some of the tricky admin and config.
For the purpose of theming - the scripts allow you to check files for editing out
and validate the xml when you check it back in.
When using with IBM Connections, wsadmin commands are run from the deployment manger bin
directory.
Full list of Connections related wsadmin commands can be found in the Connections wiki
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Administering_applications_ic301

8. Wsadmin Tool - cont
When using the wsadmin tool you require a directory to check the files out in referred to
as the <working_directory> and the name of the websphere cell referred to as the
<cell_name>
Force all user web browsers to refresh all cached content and display your changes by
running the command that updates the product version stamp.
execfile("connectionsConfig.py")
Check out the connections config file:
LCConfigService.checkOutConfig("<working_directory>","<cell_name>")
Update the timestamp:
LCConfigService.updateConfig("versionStamp","")
Check the file back in:
LCConfigService.checkInConfig("<working_directory>","<cell_name>")

9. Customization Directory
The customization directory holds a folder for each
application’s customization. A common directory which holds
customizations applied across ALL applications and an
additional directory for strings.
Any files placed in these directories must have the same
directory path as the original
files, and they will overwrite
the application files.
In this presentation we will be
covering global customizations

10. Application ear files
The default location for the web application directory for each
application is:
<WAS_home>/profiles/<profile_name>/installedApps/<cell_na
me>/<application_name.ear>/<application_name.war>
Activities oawebui.war
Blogs blogs.war
Bookmarks dogear.webui.war
Communities comm.web.war
Files qkr.share.files.war
Forums forums.web.war
Home page homepage.war
Profiles lc.profiles.app.war
Search search.war
Wikis qkr.share.wiki.war

11. Tools of the Trade
Your favourite text editor Connections instance
with a HTTP server
Your favourite css editor & firebug
Selection of browsers for testing Other useful tools

12. Customising the default theme
CSS style sheet
Logo, Header & Footer
Login.jsp

13. Default theme - custom.css
The first step in customising the default theme is to override the style
Copy the 4 style files and the theme images directory from the defaultTheme from any
application
(i.e
/WebSphere/AppServer/profiles/<profile>/installedApps/<cell>/Homepage.ear/homepage.wa
r/nav/common/styles/defaultTheme/ )
custom.css
customRTL.css*
defaultTheme.css
defaultThemeRTL.css*
themeImages directory - this holds the custom background image if you have one.
Create the same directory path in the
CONNECTIONS_CUSTOMIZATION_DIR/common/nav/common/styles/defaultTheme/ and
place the files in there.
*Note: If your users view the product in Arabic, Hebrew, or another right-to-left language you will need customise the
RTL files

14. Default theme - custom.css - cont
Where possible use the custom.css to override all changes, IBM only recommend that you
edit the defaultTheme.css for extensive editing, as this is overwritten when fix packs are
applied.
The main sections changed in the style sheet include:
• background colour
• company logo
• link colours
• header colour and size
• navigation tab colours
• search box colour
• widget / portlet colours
demo ..

15. Default theme - header.jsp
Changes to the main site navigation and login and logout links are made in the header.jsp
and additional links and menus can be added very quickly.
The header.jsp file is the same for each application
copy from homepage app
(<WAS_ROOT/profiles/AppSrv01/installedApps/<CELL>/Homepage.ear/homepage.war/na/t
emplates) and place into the customization folder
(CONNECTIONS_CUSTOMIZATION_DIR/common/nav/templates)
Elements to Customize
logo additional menus
customize existing menus additional links
demo ..

16. Default theme - header.jsp - cont
additional menus
logo
additional links
header banner image
customize existing menus
additional menus & external search box
extended banner size & demo ..
logo additional wording

17. Default theme - footer.jsp
The footer is customized in the same way as the header
Add your own footer links, remove or customize the existing
ones
From
To
or

18. Default theme - login.jsp
Changes to the login page is made to the login.jsp - as well as the login form there is a section to
allow for a message box, links or even user agreement text.
Take a copy of the login.jsp from any application
(i.e /WebSphere/AppServer/profiles/<profile>/installedApps/<cell>/Homepage.ear/homepage.war/nav/
templates/)
and place in CONNECTIONS_CUSTOMIZATION_DIR/common/nav/templates
Edit the welcome message
Open the login.jsp and find the section <h1><fmt:message key="login.title" /></h1>
comment that out and add your own custom message
For example
<%-- <h1><fmt:message key="login.title" /></h1> --%>
<h1>Welcome to Applicable Connections</h1>
Save and refresh the browser - the result will look like this
*NOTE : you can also customize the text with the use of
strings – Advanced Customization

19. Default theme - login.jsp & error.jsp
Left hand log in box – can also
be customized or removed
Also the error.jsp – for adding additional errors, etc.
Good examples are in the customization white paper –
http://www.ibm.com/developerworks/lotus/documentation/lc3custom
ize/ - a lot is still relevant and is a great source of info.

20. Default theme - The finished product

21. Community Themes – editing existing
Copy the ‘coloured’ theme to the customization folder
Delete the theme.css – as this causes issues
Add logo and footer information to the
<themename>Theme.css – ie greenTheme.css

22. Community Themes – create a new
theme
Create a copy of the existing default community theme put it in
<customization_dir>/common/nav/common/styles/ and give it a name
i.e applicableTheme
Rename the defaultTheme.css & defaultThemeRTL.css to
applicableTheme.css & applicableThemeRTL.css
– edit these files
for theme changes
and add the
additional header
and footer styles.

23. Community Themes – create a new
theme
To associate a thumbnail image with your custom theme, upload a
<theme>.jpg file to the following directory:
<install_dir>/<customization_dir>/communities/images/
To add the new theme to the communities configuration file
Check it out (using the wsadmin tool)
execfile("communitiesAdmin.py")
CommunitiesConfigService.checkOutConfig("<working_directory>", "<cell_name>")
Edit the communities-config.xml
<comm:theme>
<comm:themeUuid>applicable</comm:themeUuid>
<comm:displayNameKey>label.theme.name.default</comm:displayNameKey>
<comm:isScriptKey>false</comm:isScriptKey>
<comm:cssUrl>/nav/common/styles/applicableTheme/applicableTheme.css</comm:cssUrl>
<comm:cssRtlUrl>/nav/common/styles/applicableTheme/applicableThemeRTL.css</comm:cssRtlUrl>
<comm:thumbnailUrl>/images/applicableTheme.png</comm:thumbnailUrl>
</comm:theme>

24. Community Themes – create a new
theme
Comment the default theme out, save the communities-config.xml
file and check it back in.
CommunitiesConfigService.checkOutConfig("<working_directory>", "<cell_name>")
Restart the communities application
New theme will be available to select by default.

25. Advanced Customization – there is
more?
Changing the getting started pages
Resource bundles and strings
Deploying widgets
Extending profiles

26. Some Examples:

27. Some Examples:Profile progress, update
chain & additional reports
http://www.justnudge.com/

28. Some Examples: Extending Profile Twitter
Widget
http://www.justnudge.com/

29. Version 4 and beyond

30. Need more information – The ICS
Community
Social Connections – the Connections Use Group – http://socialconnections.info
Connections101 – Step by step guide by Gab Davis and Paul Mooney - http://www.connections101.net
IBM Connections Blog – news and views on IBM Connections
http://ibmconnectionsblog.com
LotusGreenhouse Connections Users – run by users for users
https://greenhouse.lotus.com/communities/service/html/communityview?communityUuid=507e9688-69f3-
4053-9416-4a54e5f57a64
ICS Champions on Twitter - https://twitter.com/#!/IBMSocialBizUX/ibm-champions
Sync.ron.us – Connections product managers blog
http://synch.rono.us/social/blog.nsf

31. Want to contact me?
@socialshazza
sharonbellamy
lotusgreenhouse – sharon bellamy
IBM developerworks – dilftechnical
www.socialshazza.com – blog
www.applicable.com - applicable