Example: Customizing the appearance of the banner in a Heritage 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.
Removing 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">
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;