IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize themes

Elements in the theme for Process Portal

Before you begin to customize the theme, you need to understand what each element is responsible for and whether you can modify it.

The Process Portal theme contains the following elements:

<head> element

This element contains JavaScript code that performs various functions for Process Portal.

Do not modify the existing JavaScript code. However, you can add your own JavaScript code to add functionality to Process Portal.

<body> element

This element contains the markup that controls the layout of Process Portal.

<a rel="dynamic-content" href="dyn-cs:id:processPortalBannerHtml@tl:oid:csa2.theme"></a>

This link is replaced with the banner markup from the index.jsp file.

<div> element with the ID processPortalContent

This element contains elements that display different content depending on whether the Work or Dashboards banner tab is selected. You cannot modify these elements, however you can add markup above or below the processPortalContent element to add additional content to Process Portal.


Example: Adding a footer

To add a footer to the bottom of the Process Portal window, you can add a <div> element for the footer after the processPortalContent <div> element, and then add CSS rules to the theme.css file to style it. 

<body class="processPortal">
<!--  BEGIN -- handle back/forward browser event (4/4), must put this part at very begining of body -->
	<script type="text/javascript">
		dojo.back.init();
	</script>
<!--  END ---- handle back/forward browser event (4/4) -->

	<a rel="dynamic-content" href="dyn-cs:id:processPortalBannerHtml@tl:oid:csa2.theme"></a>
	<div id="processPortalContent" onclick="hideDashboardDropdown(event); return checkForJavascriptVoid(event);"  href="javascript:void(0);" role="main">
		<div id="workPageDiv" class="processPortalPage processPortalSelectedPage" data-loaded="false">
			<div id="workPage" dojoAttachPoint="workPage" dojoType="dijit.layout.ContentPane" style="width:100%; height:100%; float:left;" preload="true"></div>
		</div>
		<div id="processPageDiv" class="processPortalPage processPortalNonSelectedPage" data-loaded="false">
			<div id="processPage" dojoAttachPoint="processPage" dojoType="dijit.layout.ContentPane" style="width:100%; height:100%; float:left;" preload="true"></div>
		</div>
		<div id="dashboardPageDiv" class="processPortalPage processPortalNonSelectedPage" data-loaded="false">
			<div div id="dashboardPage" dojoAttachPoint="dashboardPage" dojoType="dijit.layout.ContentPane" style="width:100%; float:left;" preload="true"></div>
		</div>
	</div>
	<div class="customFooter"></div>
</body>

Customize themes in Process Portal


Related information:
Customize banners in Process Portal