Theme CustomizationWorldwide Business Partner Technical Enablement 2016Van Staub – North America Embedded Solution Partners

1

Agendareview in a practical format Digital Experience’s:• theme tooling• theme capabilities• experience converting WordPress themes• available lab• resources

Theme Overview• page artifacts

• navigation• search bar• user settings• footer

• branding• static resources

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

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

Customizing Themes: Tooling

Theme Manager• Theme Development portlets

(new in CF08)• convenient alternative to

XmlAccess• simpler, more intuitive

approach• self service capability for

DX-on-Cloud customers

Theme Manager

create a theme from a

template. copy, export, or delete a theme

edit theme properties

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

Web Developer DashboardClient machine: developer

workstation or integration/build server

Portal Server

HTTPScript apps: “sp push” / HTTP

Themes: DX Sync / WebDAV

WCM designs: Node.js / REST

HTTP

HTTP

Web Developer

Toolkit

Dashboard UIor

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 systemNode.js

Editors, build tools, compilers, source code management, etc.

Theme Editor• edit the static content

of a theme (HTML, CSS, JavaScript, etc) directly in a browser

• available as a downloadable tech preview

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.

Theme Analyzer• analysis and debugging tools available on Theme Development

page

Customizing Themes: Capabilities

Create New Theme• create

“bootswatch” theme from the Simple Theme template

• apply the theme to a page

update branding

add padding

add a few layout

templates

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

Styles• download the Cerulean Bootstrap style• create a styles.json file (because Simple doesn’t have one) using

the DX toolkit

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.bundles', localizationBundleName:'Shelf', identifier:'label', items: [{'label':'Cerulean','id':'cerulean.css','url':'css/cerulean/bootstrap.min.css','thumbnail':ibmCfg.themeConfig.themeRootURI+'/css/cerulean/thumbnail.png','help':''},{'label':'Cosmo','id':'cosmo.css','url':'css/cosmo/bootstrap.min.css’,’thumbnail':ibmCfg.themeConfig.themeRootURI+'/css/cosmo/thumbnail.png','help':''},{'label':'Slate','id':'slate.css','url':'css/slate/bootstrap.min.css','thumbnail':ibmCfg.themeConfig.themeRootURI+'/css/slate/thumbnail.png','help':'’}] }

this changed

this did not

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

static

dynamic

/opt/IBM/WebSphere/PortalServer/theme/wp.theme.themes/simple/installedApps/SimpleTheme.ear/SimpleTheme.war/themes/html/dynamicSpots

Theme Expression Logic• simple access to:

• Portal models, meta data, resource environment providers (REP), etc

• http://www-01.ibm.com/support/knowledgecenter/SSHRKX_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

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

Skins

just a bit more padding

manually adding the style to the skin html

Layouts

four new layouts

Layouts

{'url':ibmCfg.themeConfig.themeWebDAVBaseURI+'layout-templates/Bootstrap_1Column/','id':'Bootstrap_1Column','thumbnail':ibmCfg.themeConfig.themeRootURI+'/layout-templates/Bootstrap_1Column/icon.png','titles': [{'value':'Bootstrap: 1 column','lang':'en'}]},

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

Profiles• profiles aggregate modules –

everything needed to successfully use a page

ResourcesdigitalExperience

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=4E6461C014EDEAC785257F20002B035F&cm_mc_uid=64973263975314

642744284&cm_mc_sid_50200000=1464712288&LoginDeveloping 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/

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.

Thank You

37