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 http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Administering_applications_ic301
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("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 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
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 lc.profiles.app.warSearch search.warWikis qkr.share.wiki.war
Tools of the TradeYour favourite text editor Connections instance with a HTTP serverYour favourite css editor & firebugSelection of browsers for testing Other useful tools
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
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(<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 ..
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/<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
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 –http://www.ibm.com/developerworks/lotus/documentation/lc3customize/ - a lot is still relevant and is a great source of info.
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
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.
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("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 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.
Advanced Customization – there ismore?Changing the getting started pagesResource bundles and stringsDeploying widgetsExtending profiles
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 usershttps://greenhouse.lotus.com/communities/service/html/communityview?communityUuid=507e9688-69f3-4053-9416-4a54e5f57a64ICS Champions on Twitter - https://twitter.com/#!/IBMSocialBizUX/ibm-championsSync.ron.us – Connections product managers bloghttp://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