One of the desired items to change when starting theme customization is the logo. This is the first step to re-branding the Portal to meet your business requirements.
There are two locations in the theme that include branding such as a logo. The first location is in the common actions on the banner and the second location is on the theme header next to the top navigation.
Let's first take a look at the branding on the theme banner, which is visible by default in the theme. The HTML markup for the logo looks like this:
<span class="wpthemeBranding">
<img alt="IBM Logo" src="/wps/themeModules/themes/html/dynamicSpots/icons/blank.gif">
<span class="wpthemeAltText">IBM Logo</span>
</span>
The image element for this block of code displays a blank image, it is just a placeholder. The logo is provided to the theme via a CSS style class. The reason the logo is provided by this CSS class is so it can modified or overridden by packaged styles on the customization shelf and will update as a new style is selected. There is no modification to the theme template required.
The style that defines the logo in the banner is ".wpthemeBanner .wpthemeBranding img":
.wpthemeBanner .wpthemeBranding img {
background-image: url("../images/master.png");
background-position:0 -654px;
width:36px;
height:16px;
border: 0 none;
line-height: 0;
vertical-align: middle;
display: block;
}
To change the logo define a new path to your image for the "background-image" attribute and modify the height and width.
The second area of the theme that is setup to display branding is in the header next to the top navigation. By default this branding is not displayed, however, if you apply the "white" style on the customization shelf, you will see the logo in this area displayed. The HTML markup for this branding looks like this:
<div class="wpthemeLogo wpthemeLeft">
<span class="wpthemeAltText">IBM WebSphere Portal</span>
</div>
As you can see there is not a HTML image element to display the logo and it is provided to the theme via a CSS style class just like the first area of branding. There is no modification to the theme template required.
The style that defines the logo is ".wpthemeLogo ":
.wpthemeLogo {
display: none;
background-image: url("../images/master.png");
background-position:0 -758px;
width:95px;
height:18px;
margin-top: 5px;
}
To enable this logo by default, you should remove the "display" attribute from the style class. To change the logo define a new path to your image for the "background-image" attribute and modify the height and width.
A useful tool to preview CSS changes dynamically inline is Firebug. Firebug is primarily used as an add-on to the Firefox browser, but there are features available to other browser via their Firebug Lite package. You can download Firebug here:
http://getfirebug.com/
Once you install the add-on, the tool that is most helpful for modifying the CSS is the Firebug inspector. More info can be found here:
http://getfirebug.com/html