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.
About this task
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
> 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 your 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 setting is the default environment setting.
- Test your changes by viewing
them in the Management Center, using this URL: https://hostname:8000/lobtools.
- Deploy
your changes to your production environment.