Rearranging the layout of the Management Center banner

The Management Center banner displays the Management Center Tools menu, the welcome text, the logout link, and the branding logo. You can customize this banner area to change the display sequence of these components.

Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
  2. Expand LOBTools > WebContent > WEB-INF > src > xml > commerce > shell.
  3. Open the ToolBannerArea.xml file for editing. This file defines the banner area in Management Center. The sequence of elements in this file determine where each banner component displays.
  4. Rearrange the elements within this file to match your preferred banner layout.
    For example, the branding logo is to the right of the link to log out of Management Center by default. If you prefer to display the logo in a different location, move the logo by changing the placement of the following line of code.
    <Component imageSet="/images/commerce/shell/resources/ibm-logo.png" name="headerLogo" y="12.5"/>
    The placement of this code in the following code snippet changes the banner layout to display the branding logo to the left of the Management Center Tools menu. The component "blank4" is also moved to add space between the relocated logo and the Management Center Tools menu.
    	
<FocusableComponent classDefinition="true" definitionName="cmc/shell/BannerArea" focusable="false" width="${this.immediateParent.width}">
  <dependency localName="SingletonRegistry" moduleName="cmc/foundation/SingletonRegistry"/>
  <Component imageSet="/images/commerce/shell/resources/ibm_logo.png" name="headerLogo" y="12.5"/>
   <Component name="blank4" width="20"/>
  <Component height="${this.parent.height}" name="applicationSelectionView" width="${SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="backgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <ApplicationMenu id="applicationMenu" package="cmc/shell" valign="top" x="17"/>
  </Component>
  <Component height="${this.parent.height}" name="bannerHeaderView" width="${this.parent.width - SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="headerBackgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <Component align="right" height="${this.parent.height}" name="bannerRightView">
      <WorkspaceIndicator id="workspaceIndicator" package="cmc/shell" y="10"/>
      <Component width="5"/>
      <WelcomeText fgcolor="${this.classroot.style.titletextcolor}" fontsize="13" name="welcomeText" package="cmc/shell" y="10"/>
      <Component name="blank1" width="10"/>
      <Component imageSet="/images/commerce/shell/restricted/resources/header_divider.png" name="headerDivider"/>
      <Component name="blank2" width="10"/>
      <LogoutLink name="logoutLink" package="cmc/shell" y="10"/>
      <Component name="blank3" width="50"/>
      <AxisLayout axis="x"/>
    </Component>
  </Component>  
  <AxisLayout axis="x" spacing="0"/>
</FocusableComponent>
    The placement of the line of code for the logo in the following code snippet changes the banner layout to display the logo to the left of the wecome text.
    	
<FocusableComponent classDefinition="true" definitionName="cmc/shell/BannerArea" focusable="false" width="${this.immediateParent.width}">
  <dependency localName="SingletonRegistry" moduleName="cmc/foundation/SingletonRegistry"/>
  <Component height="${this.parent.height}" name="applicationSelectionView" width="${SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="backgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <ApplicationMenu id="applicationMenu" package="cmc/shell" valign="top" x="17"/>
  </Component>
  <Component height="${this.parent.height}" name="bannerHeaderView" width="${this.parent.width - SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="headerBackgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <Component align="right" height="${this.parent.height}" name="bannerRightView">
      <WorkspaceIndicator id="workspaceIndicator" package="cmc/shell" y="10"/>
      <Component width="5"/>
      <Component imageSet="/images/commerce/shell/resources/ibm_logo.png" name="headerLogo" y="12.5"/>
      <WelcomeText fgcolor="${this.classroot.style.titletextcolor}" fontsize="13" name="welcomeText" package="cmc/shell" y="10"/>
      <Component name="blank1" width="10"/>
      <Component imageSet="/images/commerce/shell/restricted/resources/header_divider.png" name="headerDivider"/>
      <Component name="blank2" width="10"/>
      <LogoutLink name="logoutLink" package="cmc/shell" y="10"/>
      <Component name="blank3" width="50"/>    
      <Component name="blank4" width="20"/>   
      <AxisLayout axis="x"/>
    </Component>
  </Component>  
  <AxisLayout axis="x" spacing="0"/>
</FocusableComponent>
  5. Save and publish your changes.