"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

Who am I?

• Consultant at Applicable • IBM Champion • Working with WebSphere

based products for 10+ years

• Disney fan • Blogger, Tweeter and

general social networker

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

Agenda

What is customizable?

Tabs

Footer

Widgets Text and Link colours Getting started

Login

Header

and more ..

Pre-Reqs - what do we need to know

Customization directory

WebSphere Variables Wsadmin tool

Application files

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 ..

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

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>")

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

Application ear files

The default location for the web application directory for each application is: <WAS_home>/profiles/<profile_name>/installedApps/<cell_name>/<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

Tools of the Trade

Your favourite text editor

Your favourite css editor & firebug

Selection of browsers for testing

Connections instance with a HTTP server

Other useful tools

Customising the default theme

CSS style sheet

Logo, Header & Footer

Login.jsp

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

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 ..

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/templates) and place into the customization folder (CONNECTIONS_CUSTOMIZATION_DIR/common/nav/templates) Elements to Customize

logo additional menus

additional links customize existing menus

demo ..

Default theme - header.jsp - cont

logo additional menus

additional links

demo ..

header banner image customize existing menus

logo extended banner size &

additional wording

additional menus & external search box

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

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

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.

Default theme - The finished product

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

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.

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>

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.

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

Some Examples:

Some Examples:Profile progress, update

chain & additional reports

http://www.justnudge.com/

Some Examples: Extending Profile Twitter

Widget

http://www.justnudge.com/

Version 4 and beyond

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

Want to contact me?

@socialshazza sharonbellamy lotusgreenhouse – sharon bellamy IBM developerworks – dilftechnical www.socialshazza.com – blog www.applicable.com - applicable