Connections customization lite


Published on

turn your connections out of the box instance into your own look and feel - and more
Demo files here :

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Connections customization lite

  1. 1. "Customizing & Beautifying Connections - Who’s the fairest of them all?" An introduction to theming IBM ConnectionsAll images and references to IBM and Lotus software are ™ and © IBM - Disney images are ™ and © Walt Disney CompanyAll other images, logos are ™ and © the respective companies
  2. 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. 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. 4. What is customizable? HeaderTabs Footer Getting started Widgets Text and Link colours Login and more ..
  5. 5. Pre-Reqs - what do we need to know WebSphere Variables Wsadmin toolCustomization directory Application files
  6. 6. WebSphere VariablesCONNECTIONS_CUSTOMIZATION_DEBUGvariable must be created for testing and developmentLog on to the Deployment manager ISC(WebSphere Admin Console)under Environment > WebSphere Variables create anew cell level variableNote: the debug must not be set to true on a production server as this can impact performanceCONNECTIONS_CUSTOMIZATION_PATHunder Environment > WebSphere VariablesTake a note of the CONNECTIONS_CUSTOMIZATION_PATH as this holds the path to the shared customisation directories demo ..
  7. 7. Wsadmin ToolFrom the IBM Connections wiki - The wsadmin client is a scripting environment that gets installed withIBM® WebSphere® Application Server. You can use Jython language scripts, that are installed with LotusConnections, to access and change properties that govern the Lotus Connections configuration. You canconfigure common properties that apply across all applications, and you can configure properties thatapply 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
  8. 8. Wsadmin Tool - contWhen using the wsadmin tool you require a directory to check the files out in referred toas 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 byrunning the command that updates the product version stamp.execfile("")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. 9. Customization Directory The customization directory holds a folder for eachapplication’s customization. A common directory which holdscustomizations applied across ALL applications and anadditional directory for strings. Any files placed in these directories must have the samedirectory path as the originalfiles, and they will overwritethe application files.In this presentation we will becovering global customizations
  10. 10. Application ear filesThe default location for the web application directory for eachapplication is:<WAS_home>/profiles/<profile_name>/installedApps/<cell_name>/<application_name.ear>/<application_name.war>Activities oawebui.warBlogs blogs.warBookmarks dogear.webui.warCommunities comm.web.warFiles qkr.share.files.warForums forums.web.warHome page homepage.warProfiles search.warWikis
  11. 11. Tools of the TradeYour favourite text editor Connections instance with a HTTP serverYour favourite css editor & firebugSelection of browsers for testing Other useful tools
  12. 12. Customising the default theme CSS style sheet Logo, Header & Footer Login.jsp
  13. 13. Default theme - custom.cssThe first step in customising the default theme is to override the styleCopy the 4 style files and the theme images directory from the defaultTheme from anyapplication(i.e/WebSphere/AppServer/profiles/<profile>/installedApps/<cell>/Homepage.ear/homepage.war/nav/common/styles/defaultTheme/ )custom.csscustomRTL.css*defaultTheme.cssdefaultThemeRTL.css*themeImages directory - this holds the custom background image if you have one.Create the same directory path in theCONNECTIONS_CUSTOMIZATION_DIR/common/nav/common/styles/defaultTheme/ andplace the files in there.*Note: If your users view the product in Arabic, Hebrew, or another right-to-left language you will need customise theRTL files
  14. 14. Default theme - custom.css - contWhere possible use the custom.css to override all changes, IBM only recommend that youedit the defaultTheme.css for extensive editing, as this is overwritten when fix packs areapplied.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. 15. Default theme - header.jspChanges to the main site navigation and login and logout links are made in the header.jspand additional links and menus can be added very quickly.The header.jsp file is the same for each applicationcopy 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 customize existing menus additional links demo ..
  16. 16. Default theme - header.jsp - cont additional menuslogo additional links header banner imagecustomize existing menus additional menus & external search box extended banner size & demo .. logo additional wording
  17. 17. Default theme - footer.jspThe footer is customized in the same way as the headerAdd your own footer links, remove or customize the existingonesFromToor
  18. 18. Default theme - login.jspChanges to the login page is made to the login.jsp - as well as the login form there is a section toallow 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/templatesEdit the welcome messageOpen the login.jsp and find the section <h1><fmt:message key="login.title" /></h1>comment that out and add your own custom messageFor 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 ofstrings – Advanced Customization
  19. 19. Default theme - login.jsp & error.jspLeft hand log in box – can also be customized or removedAlso the error.jsp – for adding additional errors, etc.Good examples are in the customization white paper – - a lot is still relevant and is a great source of info.
  20. 20. Default theme - The finished product
  21. 21. Community Themes – editing existingCopy the ‘coloured’ theme to the customization folderDelete the theme.css – as this causes issuesAdd logo and footer information to the<themename>Theme.css – ie greenTheme.css
  22. 22. Community Themes – create a new themeCreate a copy of the existing default community theme put it in<customization_dir>/common/nav/common/styles/ and give it a namei.e applicableThemeRename the defaultTheme.css & defaultThemeRTL.css toapplicableTheme.css & applicableThemeRTL.css – edit these filesfor theme changes and add theadditional headerand footer styles.
  23. 23. Community Themes – create a new themeTo 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 fileCheck it out (using the wsadmin tool)execfile("")CommunitiesConfigService.checkOutConfig("<working_directory>", "<cell_name>")Edit the communities-config.xml<comm:theme> <comm:themeUuid>applicable</comm:themeUuid> <comm:displayNameKey></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. 24. Community Themes – create a newthemeComment the default theme out, save the communities-config.xmlfile and check it back in.CommunitiesConfigService.checkOutConfig("<working_directory>", "<cell_name>")Restart the communities applicationNew theme will be available to select by default.
  25. 25. Advanced Customization – there ismore?Changing the getting started pagesResource bundles and stringsDeploying widgetsExtending profiles
  26. 26. Some Examples:
  27. 27. Some Examples:Profile progress, updatechain & additional reports
  28. 28. Some Examples: Extending Profile TwitterWidget
  29. 29. Version 4 and beyond
  30. 30. Need more information – The ICSCommunitySocial Connections – the Connections Use Group – http://socialconnections.infoConnections101 – Step by step guide by Gab Davis and Paul Mooney - http://www.connections101.netIBM Connections Blog – news and views on IBM Connectionshttp://ibmconnectionsblog.comLotusGreenhouse Connections Users – run by users for users Champions on Twitter -!/IBMSocialBizUX/ – Connections product managers blog
  31. 31. Want to contact me? @socialshazza sharonbellamy lotusgreenhouse – sharon bellamy IBM developerworks – dilftechnical – blog - applicable