Develop > Presentation layer > Management Center framework > Customize the Management Center user interface > Customizing the Management Center shell > Customizing the branding logo
Changing the location of the image within the Management Center banner
By default, the branding logo image is to the right of the Management Center logout link. You can move the logo image to anywhere within the Management Center banner.
To change the logo location within the Management Center banner:
Procedure
- Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
- In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > commerce > shell.
- Open the ToolBannerArea.lzx file. This file defines the look and feel of the banner area of the Management Center.
- Within the ToolBannerArea.lzx file, remove the pad view that follows the default logo and the logo itself by removing these entries:
<view name="headerLogo" y="5" resource="resources/ibm_logo.png" /> <view name="blank3" width="5" />
- By default, the logo image is to the right of the tooling logout link. You can move it to any location within the banner by moving the <view name="headerLogo" y="5" resource="resources/ibm_logo.png" /> line to the appropriate place within the file. Here are a few examples:
- To move the logo image from the right of the log out link to the left of the Management Center application menu, include <view name="headerLogo" valign="middle" resource="resources/ibm_logo.png" /> immediately before the <view name="applicationSelectionView"> element.
Your code should look similar to this:
<class name="wcfBannerArea" extends="basecomponent" width="100%" focusable="false"> <view name="headerLogo" y="5" resource="resources/ibm_logo.png" /> <view name="blank3" width="5" /> <view name="applicationSelectionView" width="${applicationMenu.width}" height="${parent.height}"> <view name="backgroundView" width="${parent.width}" resource="bannerBackground" stretches="width" options="ignorelayout" /> <wcfApplicationMenu id="applicationMenu" valign="top" /> </view> <view name="bannerHeaderView" width="${parent.width - this.x}" height="${parent.height}"> <view name="headerBackgroundView" width="${parent.width}" resource="bannerBackground" stretches="width" options="ignorelayout" /> <view name="bannerRightView" height="${parent.height}" align="right"> <wcfWorkspaceIndicator id="workspaceIndicator" y="5" /> <view name="blank1" width="15" /> <text name="welcomeText" y="4" fontsize="11" text="${shellResourceBundle.welcomeText.string + ' ' + canvas.logonIdContext.value}" fgcolor="${classroot.style.titletextcolor}" /> <view name="divider1" resource="iconDivider" y="5" /> <wcfLogoutLink name="logoutLink" /> <view name="blank2" width="5" /> <simplelayout axis="x" spacing="5" /> </view> </view> <simplelayout axis="x" spacing="0" /> </class>
- To move the logo image from the right of the log out link to the left of the welcome text, include <view valign="middle" resource="resources/ibm_logo.png" /> immediately before the <text name="welcomeText"> element. In this case, you may also want to add the horizontal divider after the logo, to separate it from the welcome text.
Your code should look similar to this:
<class name="wcfBannerArea" extends="basecomponent" width="100%" focusable="false"> <view name="applicationSelectionView" width="${applicationMenu.width}" height="${parent.height}"> <view name="backgroundView" width="${parent.width}" resource="bannerBackground" stretches="width" options="ignorelayout" /> <wcfApplicationMenu id="applicationMenu" valign="top" /> </view> <view name="bannerHeaderView" width="${parent.width - applicationMenu.width}" height="${parent.height}"> <view name="headerBackgroundView" width="${parent.width}" resource="bannerBackground" stretches="width" options="ignorelayout" /> <view name="bannerRightView" height="${parent.height}" align="right"> <wcfWorkspaceIndicator id="workspaceIndicator" y="5" /> <view name="blank1" width="15" /> <view name="headerLogo" y="5" resource="resources/ibm_logo.png" /> <view name="blank3" width="5" /> <text name="welcomeText" y="4" fontsize="11" text="${shellResourceBundle.welcomeText.string + ' ' + canvas.logonIdContext.value}" fgcolor="${classroot.style.titletextcolor}" /> <view name="divider1" resource="iconDivider" y="5" /> <wcfLogoutLink name="logoutLink" /> <view name="blank2" width="5" /> <simplelayout axis="x" spacing="5" /> </view> </view> <simplelayout axis="x" spacing="0" /> </class>
What to do next
After you complete the customization:
- Right-click LOBTools Project; then click Build OpenLaszlo Project to produce an updated ManagementCenter.swf file under the workspace_dir\LOBTools\WebContent directory. This is the default environment setting.
- Test the changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
- Deploy your changes to the production environment.
Related concepts
Management Center user interface
Related tasks
Customize the Management Center shell