Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Connections customization lite

5,967 views

Published on

turn your connections out of the box instance into your own look and feel - and more
Demo files here :
http://www.dilf.me.uk/demos/CustomizeConnectionsDemo.zip

Published in: Technology
  • My brother found Custom Writing Service ⇒ www.HelpWriting.net ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If we are speaking about saving time and money this site HelpWriting.net is going to be the best option!! I personally used lots of times and remain highly satisfied.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Administering_applications_ic301
  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("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. 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 lc.profiles.app.warSearch search.warWikis qkr.share.wiki.war
  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 –http://www.ibm.com/developerworks/lotus/documentation/lc3customize/ - 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("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. 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 reportshttp://www.justnudge.com/
  28. 28. Some Examples: Extending Profile TwitterWidgethttp://www.justnudge.com/
  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 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
  31. 31. Want to contact me? @socialshazza sharonbellamy lotusgreenhouse – sharon bellamy IBM developerworks – dilftechnical www.socialshazza.com – blog www.applicable.com - applicable

×