Change the theme logo

The following example shows the HTML markup for the logo in...

myTheme.war\themes\html\dynamicSpots\customActions.jsp

For example...

${WPS_HOME}/theme/wp.theme.themes/default85/installedApps/MyTheme.ear/MyTheme.war/themes/html/dynamicSpots/customActions.jsp

<span class="wpthemeBranding">
    <img 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 with a CSS style class so it can be modified or overridden by packaged styles on the customization shelf. It also updates as a new style is selected. We do not have to modify the theme template.

The style that defines the logo in the banner is...

fs-type1:themes\myTheme\css\default\default.css
fs-type1:themes\myThemes\css\default\default.css.uncompressed.css (debug)

.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;

Define a new path for the image

To change the logo, define a new path to the image for the background-image attribute and modify the height and width. We can also choose to create our own custom style to use with the custom theme defined in...

fs-type1:themes\myTheme\system\styles.json

We can override the styles in the custom style css file, such as...

fs-type1:themes\myTheme\css\Your_custom_style\myStyle.css

Change the header text

We can activate and display the header next to the navigation to add a logo there. If we apply the white style on the customization shelf, we see the logo in this area displayed.

The HTML markup for this branding is in fs-type1:themes\myTheme\nls\theme_locale.html.

<div class="wpthemeLogo wpthemeLeft">
  <span class="wpthemeAltText">IBM WebSphere Portal</span>
</div>

There is no HTML image element to display the logo. It is provided to the theme through a CSS style class just like the first area of branding. We do not have to modify the theme template.

Change the theme logo

We can change the logo in .wpthemeLogo in...

fs-type1:themes\myTheme\css\default\default.css
fs-type1:themes\myTheme\css\default\default.css.uncompressed.css

To enable this logo by default, 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. We can create our own custom style to use with the custom theme defined in...

fs-type1:themes\myTheme\system\styles.json

If we do that, we can override these styles in the custom style css file, such as...

fs-type1:themes\myTheme\css\Your_custom_style\myStyle.css

Change the logo action

Most websites go to the home page of the site when you click the logo. We can change the default click action of the logo. Modify the customAction.jsp file in...

myTheme.war\themes\html\dynamicSpots\customActions.jsp

We can modify it in three different ways. We can change the logo action to go to the first child page. The first example contains the default code.

<%-- Logo --%>
 <li>
  <span class="wpthemeBranding">
      <c:set var="node" value="${selectionPath[1]}"/>
      <c:set var="nodeID" value="${wp.identification[node]}"/>
      <a class="wpthemeBrandingLink" href="?uri=nm:oid:${nodeID}" >
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" theme.ibmLogo" bundle="nls.commonUI"/>">
           </a>
          <span class="wpthemeAltText"><portal-fmt:text key="theme.ibmLogo" bundle="nls.commonUI"/></span>
  </span>
 </li>

Replace that code with the following code snippet.

<%-- Logo --%>
 <li>
   <span class="wpthemeBranding">
   <portal-core:lazy-set var="showHiddenPages" elExpression=="wp.publicRenderParam['{http://www.ibm.com/xmlns/prod/websphere/portal/publicparams}hiddenPages']" />
   <portal-logic:if deviceClass="smartphone/tablet">
      <c:set var="isMobile" value="true"/>
  </portal-logic:if>
      <c:set var="homeNodeFound" value="false"/>
     <c:forEach var="node" items="${wp.navigationModel.children[selectionPath[1]]}" varStatus="childrenStatus">
        <c:set var="isHiddenPage" value="${node.metadata['com.ibm.portal.Hidden'] || (isMobile && node.metadata['com.ibm.portal.mobile.Hidden'])}" />
      <c:if test="${!homeNodeFound && (!isHiddenPage || showHiddenPages)}">
          <c:set var="nodeID" value="${wp.identification[node]}"/>
          <a class="wpthemeBrandingLink" href="?uri=nm:oid:${nodeID}" >
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" theme.ibmLogo" bundle="nls.commonUI"/>">
          </a>
          <span class="wpthemeAltText"><portal-fmt:text key="theme.ibmLogo" bundle="nls.commonUI"/></span>
          <c:set var="homeNodeFound" value="true"/>
      </c:if>
  </c:forEach>
 </span>
  </li>

We can change the logo action to go to any page by identifying its unique name. The first example contains the default code.

<a class="wpthemeBrandingLink" href="?uri=nm:oid:${nodeID}" >

Replace that code with the following code snippet where the value of the contentNode attribute is replaced with the unique name of the page.

<portal-navigation:urlGeneration contentNode="ibm.portal.Home.Welcome" >
             <a class="wpthemeBrandingLink" href="<% wpsURL.write(escapeXmlWriter); %>" >
    </portal-navigation:urlGeneration>

We can change the logo action to go to any page by identifying its vanity URL. The first example contains the default code. Set the following code snippet where host, port, and contextroot are substituted with the actual values and where Home is replaced with the vanity URL name of the page.

<a class="wpthemeBrandingLink" href="http://host:port/contextroot/vanityurl/Home" >

Parent Customize the theme

Related concepts:

Vanity URLs