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.

IBM Digital Experience Theme Customization

This presentation is from IBM's New Way to Learn 2016 partner enablement. The topic is an introduction to theme customization in WebSphere Portal aka IBM Digital Experience.

  • Be the first to comment

IBM Digital Experience Theme Customization

  1. 1. Theme Customization Worldwide Business Partner Technical Enablement 2016 Van Staub – North America Embedded Solution Partners 1
  2. 2. Agenda review in a practical format Digital Experience’s: • theme tooling • theme capabilities • experience converting WordPress themes • available lab • resources
  3. 3. Theme Overview • page artifacts • navigation • search bar • user settings • footer • branding • static resources
  4. 4. Theme Overview • layout of the components on a page • skin artifacts • border “around” a portlet or content • flexible, granular settings • code or libraries needed for this page to function • multi-channel delivery
  5. 5. Portal 8.5 Theme • ships with one theme - called Portal 8.5 • same theme architecture since • dynamic and static files • toolbar isolation / authoring experience • theme optimization (modularization) • theme analyzing capabilities • Dojo 1.9.x in the box, allowing arbitrary frameworks, such as Angular • JQuery 1.10.x in the box
  6. 6. Customizing Themes: Tooling
  7. 7. Theme Manager • Theme Development portlets (new in CF08) • convenient alternative to XmlAccess • simpler, more intuitive approach • self service capability for DX-on- Cloud customers
  8. 8. Theme Manager create a theme from a template. copy, export, or delete a theme edit theme properties
  9. 9. Web Developer Dashboard • work with Script Portlet applications, Themes, and WCM design elements in a simple UI • click to push or watch/sync applications and designs to a local or remote Portal server • use a simple UI to add and edit your theme modules and profiles • run script applications locally on test server
  10. 10. Web Developer Dashboard Client machine: developer workstation or integration/build server Portal Server HTTP Script apps: “sp push” / HTTP Themes: DX Sync / WebDAV WCM designs: Node.js / REST HTTP HTTP Web Developer Toolkit Dashboard UI or Command line Scripts in WCM Themes in WebDAV WCM Designs in WCM Script files on local file system Theme files on local file system WCM design files on local file system Node.js Editors, build tools, compilers, source code management, etc.
  11. 11. Theme Editor • edit the static content of a theme (HTML, CSS, JavaScript, etc) directly in a browser • available as a downloadable tech preview
  12. 12. Simple Theme • minimal set of artifacts for an easy starting point and quick learning curve • responsive design supports all mobile devices • easily branded and customized using CSS/JS/HTML and editable via WebDAV • several of generic dynamic content spots are available • top navigation, mega menu, etc.
  13. 13. Theme Analyzer • analysis and debugging tools available on Theme Development page
  14. 14. Customizing Themes: Capabilities
  15. 15. Create New Theme • create “bootswatch” theme from the Simple Theme template • apply the theme to a page
  16. 16. update branding add padding add a few layout templates
  17. 17. Styles • styles define the aesthetics of the page – essentially a cascading style sheet • applied dynamically using page properties • let’s re-use bootswatch Bootstrap styles to provide options for users no other styles available in Simple Theme
  18. 18. Styles • download the Cerulean Bootstrap style • create a styles.json file (because Simple doesn’t have one) using the DX toolkit
  19. 19. Styles • /Dev/bootswatch/system/styles.json • /Dev/bootswatch/css • /cerulean • /bootstrap.min.css • /thumbnail.png • /cosmo • /bootstrap.min.css • /thumbnail.png • /slate • /bootstrap.min.css • /thumbnail.png { localizationPackageName:' es', localizationBundleName:'Shelf', identifier:'label', items: [ {'label':'Cerulean','id':'cerulean.css','url':'c ss/cerulean/bootstrap.min.css','thumbna il':ibmCfg.themeConfig.themeRootURI+'/c ss/cerulean/thumbnail.png','help':''}, {'label':'Cosmo','id':'cosmo.css','url':'css/co smo/bootstrap.min.css’,’thumbnail':ibmCfg .themeConfig.themeRootURI+'/css/cosmo/ thumbnail.png','help':''}, {'label':'Slate','id':'slate.css','url':'css/slate/b ootstrap.min.css','thumbnail':ibmCfg.them eConfig.themeRootURI+'/css/slate/thumbn ail.png','help':'’ }] }
  20. 20. this changed  this did not 
  21. 21. Theme Templates • a theme template (e.g. theme.html) defines the structure of the site • contains both static and dynamic markup • static reference example • war: used to load static resources from a WAR file • dynamic markup <a rel='dynamic-content' href='dyn-cs:id:…'/> • modules are able to contribute dynamic content spots with the contribution type dyn-cs from a plugin.xml • beware localized templates; edit the NLS template inside /<theme>/nls/theme_en.html
  22. 22. static dynamic /opt/IBM/WebSphere/PortalServer/theme/wp.theme.themes/simple/installedApps/SimpleTheme .ear/SimpleTheme.war/themes/html/dynamicSpots
  23. 23. Theme Expression Logic • simple access to: • Portal models, meta data, resource environment providers (REP), etc • http://www- RKX_8.5.0/mp/dev- theme/themeopt_el_bean.dita ${wp.selectionModel.selected} = selected node ${wp.metadata[wp.selectionModel.selected]['someKey']} = access page meta data ${wp.rep['WP GlobalThemeConfig']} = REP access ${wp.identification[node]} = retrieve node object id ${wp.themeList.current.metadata['someKey']} = access theme meta data ${[node].hasPermission[someRole]} = access permissions
  24. 24. Skins • skins are what is displayed around a portlet • helpful if you want to mark the boundaries of a portlet or show additional function in edit mode
  25. 25. Skins
  26. 26. just a bit more padding manually adding the style to the skin html
  27. 27. Layouts four new layouts
  28. 28. Layouts {'url':ibmCfg.themeConfig.themeWebDAVBaseURI+'layout- templates/Bootstrap_1Column/','id':'Bootstrap_1Column','thu mbnail':ibmCfg.themeConfig.themeRootURI+'/layout- templates/Bootstrap_1Column/icon.png','titles': [{'value':'Bootstrap: 1 column','lang':'en'}]},
  29. 29. Modules • modules add resources to page markup – like additional Javascript libraries or CSS • simple modules can be created using folder structure • more advanced modules can be created using plugin.xml or JSON • deferred modules can be loaded dynamically
  30. 30. Profiles • profiles aggregate modules – everything needed to successfully use a page
  31. 31. Resources digitalExperience Developer Downloads Web Toolkit for IBM Digital Experience IBM Theme Editor for IBM WebSphere Portal DEAC785257F20002B035F&cm_mc_uid=64973263975314642744284&cm_mc_sid_50200000=1464712288&Login Developing Themes for WebSphere Portal 8.5 Themes for WebSphere Portal 8.5 Bootstrap Bootswatch
  32. 32. Lab • WP8.5_Lab_Theme_Customization • Located in community • Creating a custom theme and changing the page logo • Creating customized page styles • Creating customized page layouts • Understanding the new theme optimization framework. This includes the creation of custom profiles and modules.
  33. 33. Thank You 37

    Be the first to comment

    Login to see the comments

  • NikolajHansen10

    Feb. 7, 2017
  • jmoralesa

    May. 18, 2017
  • BorisRadev2

    Mar. 14, 2019

This presentation is from IBM's New Way to Learn 2016 partner enablement. The topic is an introduction to theme customization in WebSphere Portal aka IBM Digital Experience.


Total views


On Slideshare


From embeds


Number of embeds