![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:'com.ibm.bundl
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':'’
}] }](https://image.slidesharecdn.com/4-160613155502/85/IBM-Digital-Experience-Theme-Customization-22-320.jpg)
![Theme Expression Logic
• simple access to:
• Portal models, meta data, resource
environment providers (REP), etc
• http://www-
01.ibm.com/support/knowledgecenter/SSH
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
${wp.ac[node].hasPermission[someRole]} = access
permissions](https://image.slidesharecdn.com/4-160613155502/85/IBM-Digital-Experience-Theme-Customization-26-320.jpg)
![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'}]},](https://image.slidesharecdn.com/4-160613155502/85/IBM-Digital-Experience-Theme-Customization-32-320.jpg)
IBM Digital Experience Theme Customization
- 1. Theme Customization Worldwide Business Partner Technical Enablement 2016 Van Staub – North America Embedded Solution Partners 1
- 2. Agenda review in a practical format Digital Experience’s: • theme tooling • theme capabilities • experience converting WordPress themes • available lab • resources
- 3. Theme Overview • page artifacts • navigation • search bar • user settings • footer • branding • static resources
- 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
- 7. Portal 8.5 Theme • ships with one theme - called Portal 8.5 • same theme architecture since 7.0.0.2 • 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
- 9. Theme Manager • Theme Development portlets (new in CF08) • convenient alternative to XmlAccess • simpler, more intuitive approach • self service capability for DX-on- Cloud customers
- 10. Theme Manager create a theme from a template. copy, export, or delete a theme edit theme properties
- 11. 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
- 12. 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.
- 13. Theme Editor • edit the static content of a theme (HTML, CSS, JavaScript, etc) directly in a browser • available as a downloadable tech preview
- 14. 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.
- 15. Theme Analyzer • analysis and debugging tools available on Theme Development page
- 17. Create New Theme • create “bootswatch” theme from the Simple Theme template • apply the theme to a page
- 18. update branding add padding add a few layout templates
- 19. 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
- 20. Styles • download the Cerulean Bootstrap style • create a styles.json file (because Simple doesn’t have one) using the DX toolkit
- 22. 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:'com.ibm.bundl 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':'’ }] }
- 23. this changed this did not
- 24. 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
- 26. Theme Expression Logic • simple access to: • Portal models, meta data, resource environment providers (REP), etc • http://www- 01.ibm.com/support/knowledgecenter/SSH 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 ${wp.ac[node].hasPermission[someRole]} = access permissions
- 28. 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
- 29. Skins
- 30. just a bit more padding manually adding the style to the skin html
- 33. 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
- 34. Profiles • profiles aggregate modules – everything needed to successfully use a page
- 35. Resources digitalExperience Developer Downloads https://developer.ibm.com/digexp/downloads/ Web Toolkit for IBM Digital Experience https://github.com/OpenNTF/WebDevToolkitForDx IBM Theme Editor for IBM WebSphere Portal https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=4E6461C014E DEAC785257F20002B035F&cm_mc_uid=64973263975314642744284&cm_mc_sid_50200000=1464712288&Login Developing Themes for WebSphere Portal 8.5 https://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=Developing Themes for WebSphere Portal 8.5 Bootstrap http://getbootstrap.com/ Bootswatch https://bootswatch.com/
- 36. 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.
- 37. Thank You 37