IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces > Customize banners > Customize banner elements and appearance

Example: Customizing the appearance of the banner in a Process Portal space

By default, a banner includes the title of the space and the icon associated with the space. If screen space is limited, you might want to remove this portion of the banner to save space. You can also change the color of the banner and the background image.

Remove the space title and the icon

To remove the banner title and icon, remove the following section from the banner.html file:

<div class="titleBannerRepeat">
<div class="titleBanner">
table id="bannerTable" class="bannerTable cellpadding=0 cellspacing=0>
<tr>
<td width="100%">
<div class="iw-iWidget iw-Standalone" id="spaceTitle">
<a class="iw-Definition" href="BusinessSpace/iWidget/widgets/system/spaceTitle/spaceTitle.xml" style="display:none;"></a>
</div>
<div id="bspacePerformanceMetrics" class="navigationPanel" style="float:right; padding-right:20px">
</div>
</td>
</tr>
</table>
</div>
</div>

Changing the color and the background image

The banner.html file retrieves certain style specifications by means of the class attribute.

For example, the following section calls a set of specifications for the banner appearance:

<div class="headerDivRepeat">

You can override these styles by adding rules to the banner.css file that the banner.html points to.

For example, you can override the <div> tag that controls banner action links, replacing the gradient image with a solid background color, by adding the following rule to the banner.css file.

.headerDivRepeat {

background: #215d98 !important;
}

To add a custom image to the banner, add the following rule to the banner.css file to override the <div> tag that controls the common actions. The image path includes a subfolder called /images that has been added to the noSpaceTitle directory and that contains a graphic called smallBanner.png.

.mashups .headerDiv {

background-image: url("/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/banner/noSpaceTitle/images/smallBanner.png.") !important;

background-position: right !important;

Customize banner elements and appearance in Process Portal spaces