connections customization lite

Download Connections customization lite

Post on 29-Aug-2014




3 download

Embed Size (px)


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


  • "Customizing & Beautifying Connections - Whos 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
  • Who am I? Consultant at Applicable IBM Champion Working with WebSphere based products for 10+ years Disney fan Blogger, Tweeter and general social networker
  • 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
  • What is customizable? HeaderTabs Footer Getting started Widgets Text and Link colours Login and more ..
  • Pre-Reqs - what do we need to know WebSphere Variables Wsadmin toolCustomization directory Application files
  • 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 ..
  • 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
  • Wsadmin Tool - contWhen using the wsadmin tool you require a directory to check the files out in referred toas the and the name of the websphere cell referred to as theForce 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("","")Update the timestamp:LCConfigService.updateConfig("versionStamp","")Check the file back in:LCConfigService.checkInConfig("","")
  • Customization Directory The customization directory holds a folder for eachapplications 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
  • Application ear filesThe default location for the web application directory for eachapplication is:/profiles//installedApps///Activities oawebui.warBlogs blogs.warBookmarks dogear.webui.warCommunities comm.web.warFiles qkr.share.files.warForums forums.web.warHome page homepage.warProfiles search.warWikis
  • Tools of the TradeYour favourite text editor Connections instance with a HTTP serverYour favourite css editor & firebugSelection of browsers for testing Other useful tools
  • Customising the default theme CSS style sheet Logo, Header & Footer Login.jsp
  • 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//installedApps//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
  • 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 ..
  • 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(/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 ..
  • 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
  • Default theme - footer.jspThe footer is customized in the same way as the headerAdd your own footer links, remove or customize the existingonesFromToor
  • 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//installedApps//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 comment that out and add your own custom messageFor exampleWelcome to Applicable ConnectionsSave and refresh the browser - the result will look like this*NOTE : you can also customize the text with the use ofstrings Advanced Customization
  • 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.
  • Default theme - The finished product
  • Community Themes editing existingCopy the coloured theme to the customization folderDelete the theme.css as this causes issuesAdd logo and footer information to theTheme.css ie greenTheme.css
  • Community Themes create a new themeCreate a copy of the existing default community theme put it in/common/nav/common/styles/ and give it a namei.