Change the webhelp transformer

Caution

Before changing any stylesheet please save a copy!

Create icons that will replace the navigational links. For an easy testing you'll find a set of icons in our examples.
Create a favicon icon or use the one from our examples. The favicon is the tiny icon that decorates the tab of the webhelp page in the browser.
In this setup we simply remove the logo from the header bar but you can choose to replace it with your own logo if you'd like. This is covered later on.

Store all the graphic elements in the 'images' sub-folder of your webhelp input location.

Modify the sources in the docbook xsl webhelp subfolder as explained below.

Modify the docbook template/common/css/positionning.css file. This file specifies a number of graphic properties at the global level.

Fonts

body { font: 12px Rockwell, Verdana, Geneva, sans-serif; } /*add Rockwell*/ 
p, ul, ol, li { font: 10pt Verdana, Geneva, sans-serif; }
h1 { font: bold 15pt Rockwell, Arial, Helvetica, geneva; }		
h2 { font: 14pt Rockwell, Arial, Helvetica, geneva; }		/*remove bold*/

Attributes of the header

#header {
/* Suppressed the hideous background image */
/* background: white url(../images/header-bg.gif) repeat-x; */
    background: grey;
    position: fixed;
    width: 100%;
    height: 65px; /* was 95 */
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    /* Change the color of the header bottom border */
    /*border-bottom: 2px solid #cccccc; light grey*/
    border-bottom: 10px solid green; 
    z-index: 2000;
}

Create a table for the navigational icons

#headertable{
width: 100%;
border: 1px solid green;
}

Change the vertical positionning of the icons and add a frame around them

#navheader {
	text-align: right;
    position: fixed;
    top: 20px;   /* was 45 */ 
    right:4px;
    img-style: 3px solid green; /* adds  frame around the icons */
}

Change the attributes of the Toc and Search tabs in the left pane

#leftnavigation {
/* background-color:#91e7b3; light green */
/*	changed top from 90 to 70 */
    overflow: auto;
    position: fixed;
    height: auto;
    top: 70px;
    bottom: 0;
    left: 0;
    width: 280px;
    z-index: 1500;
    /* Change the color and width of the vertical bar to the right 
    		of the search pane */
    /* border-right:2px solid #CCCCCC; */
    border-right: 3px solid green;
}

Change the attributes of the right pane

#content {
    position: relative;
    top: 90px; 		/* left: 240px;*/
    right: auto; 	/*  bottom: 20px;  */
    /* top=bottom=right=0 left=start at position 280 in screen*/
    /* same as width in #leftnavigation */
    margin: 0px 0px 0px 280px; 
    width: auto; 
    height: inherit;
    padding-left: 5px;
    padding-right: 30px;
    color: #000000;
    /*border-left: 2px solid #cccccc; overflow :scroll;*/
    z-index: 1000;

    max-width: 70em;
    min-width:800px;
}

Change the attributes of the header within the right pane

/* colors - #cc0000 = red; #c5d3c3 = light grey  
   changed h1 and h2 colors from cc0000 to black */
#content h1, #content h2 { color: black; }
.navfooter { bottom: 2%; }
.highlight { background-color: #c5d3c3; }
.highlightButton{ font-size: 0; }

Change the Show,Hide left pane button

/*  Show Hide TOC tree */
/*  Note, the original image contains the two '<>' buttons */
/*	Replace the ugly <> icon by the magnifying glass + green frame and margin */
.pointLeft {
    /*background: url("../images/showHideTreeIcons.png") 0 0 no-repeat;*/
    background: url("../images/Magnifying glass_48.png") 0 0 no-repeat;
    height: 28px;
    width: 28px;
    display: block;
    font-size: 0;
    cursor: pointer;
    margin: 3px 3px 3px 3px;
	border: 2px solid green;
}
.pointRight {
    /* background: url("../images/showHideTreeIcons.png") -15px 0 no-repeat; */
    background: url("../images/Magnifying glass_48.png") 0 0 no-repeat;
    height: 28px;
    width: 28px;
    display: block;
    font-size: 0;
    cursor: pointer;
    margin: 3px 3px 3px 3px;
	border: 2px solid green;
}

Change the Search results styling

/* Search results Styling
	Colors: #0050A0 is middle blue 
			#EBEFF8 is light grey
			#BFCEE9 is light blue -> #B8DB4D light green
	For consistency match with colors in main.js, function syncToc()
	*/
.searchExpression {
    color: #0050A0;
    background-color: #EBEFF8;
    font-size: 12pt;
}
.searchresult li a {
    text-decoration: none;
    color: #0050A0;
    
}
.searchresult li {
    color: #0050A0;
}
.shortdesclink {
    color: gray;
    font-size: 9pt;
}
.searchText {
    /*border: #BFCEE9 solid 1pt;*/
    border: #B8DB4D solid 1pt; 
    width: 11em
}
.searchButton {
	margin-left: 3px; 
    background: #EBEFF8;
    color: #0050A0;
    /* border: #BFCEE9 solid 1pt; */
    border: #B8DB4D solid 1pt;
    font-weight: bold;
    font-size: 10pt
}

Change the font properties for the title of the pages and the Toc.

.title, div.toc>p{
	font-weight: normal; /* was bold */ 
	font-size: 18pt		 /* was 10 */
	}

Create a navicon group for the navigational icons

.navicon {
	margin: 3px 3px 3px 3px;
	border: 2px solid green;
}

Change the syntoc() function in the webhelp/template/common/main.js file

function syncToc(){
    var a = document.getElementById("webhelp-currentid");
    if (a != undefined) {
        var b = a.getElementsByTagName("a")[0];

        if (b != undefined) {
            //Setting the background for selected node.
            var style = a.getAttribute("style");
            
            /* Change attributes to suppress the blue background
            	 and turn the text in red instead of white 
            if (style != null 
            	&& !style.match(/background-color: Background;/)) {
                a.setAttribute("style", 
                	"background-color: #6495ed;  " + style);
                b.setAttribute("style", 
                	"color: white;");
            } else if (style != null) {
                a.setAttribute("style", 
                	"background-color: #6495ed;  " + style);
                b.setAttribute("style", 
                	"color: white;");
            } else {
                a.setAttribute("style", 
                	"background-color: #6495ed;  ");
                b.setAttribute("style", 
                	"color: white;");
            }
            */
            
            if (style != null 
            	&& !style.match(/background-color: Background;/)) {
                a.setAttribute("style", 
                	"background-color: white;  " + style);
                b.setAttribute("style", "color: #0050A0;");
            } else if (style != null) {
                a.setAttribute("style", 
                	"background-color: white;  " + style);
                b.setAttribute("style", "color: #0050A0;");
            } else {
                a.setAttribute("style", 
                	"background-color: white;  ");
                b.setAttribute("style", "color: #0050A0;");
            }
        }
... etc

Change the webhelp/template/common/jquery/theme-redmond/jquery-ui-1-8.2.custom.css file. In section Component containers remove the blue background behind the contents, seach tabs

/* Removed the gloss-wave background over blue color #5c9ccc 
	and set the color to green #B8DB4D*/	
/* .ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc 
		url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; 
		color: #ffffff; font-weight: bold; } */
		
/* replacement: */  	
	.ui-widget-header { border: 1px solid #4297d7; background: #B8DB4D ; 
	color: #ffffff; font-weight: bold; }

Replace the favicon or add yours in the webhelp/template folder

Modify the webhelp/xsl/webhelp.xsl stylesheet

If needed change the name of the favicon image in the "shortcut icon" link.

<link rel="shortcut icon" href="../PCB inc. favicon.ico" type="image/x-icon"/>

Locate the <xsl:template name="chunk-element-content">. In the div id="content" comment the footer implementation.

<!-- Comment the footer implementation  
     <xsl:call-template name="footer.navigation">
          <xsl:with-param name="prev" select="$prev"/>
          <xsl:with-param name="next" select="$next"/>
          <xsl:with-param name="nav.context" select="$nav.context"/>
      </xsl:call-template>
-->

Locate the <xsl:template name="webhelpheader"> in the div id="header" comment the implementation of the Company Logo or adjust to display your own.

 <!-- Remove the company logo 
      <img style='margin-right: 2px; height: 59px; padding-right: 25px; 
      			padding-top: 8px' align="right"
           src='../common/images/logo.png' alt="Company Logo"/>
 -->

Also in the webhelpheader section remodel how the name of the chapter is concatenated to the name of the book in the header. Look for align="center".

<!-- Display the page title and the main heading(parent) of it -->
<h1 align="center">
    <!-- Comment this apply-templates and the BR that follows,
   		Copy the apply-templates ahead of the h1 end tag.  
    <xsl:apply-templates select="." mode="object.title.markup"/>
    <br/>	 Put the Book title and chapter on two lines  
     -->             
 
    <xsl:choose>
       <xsl:when
            test="count($up) &gt; 0 and generate-id($up) != generate-id($home)">
            <xsl:apply-templates select="$up" mode="object.title.markup"/>
       </xsl:when>
       <xsl:otherwise>&#160;</xsl:otherwise>
       </xsl:choose>
       <!-- This apply-templates initially started the h1 paragraph -->                
       <xsl:apply-templates select="." mode="object.title.markup"/>
</h1>

Still in the webhelpheader section, locate the id="showhidebutton" and remove the implementation of the 'H' icon.

<tr>
    <td style="height: 28px; width: 16px;">
        <a id="showHideButton" onclick="showHideToc();"
           class="pointLeft" title="Hide TOC tree">.
         </a>
     </td>
     
     <!-- Remove the 'H' icon  
      <td>
       <img src="../common/images/highlight-blue.gif" alt="H" height="25px"
            onclick="toggleHighlight()" id="showHideHighlight" 
            style="cursor:pointer">
		<xsl:attribute name="title">
		<xsl:call-template name="gentext">
		<xsl:with-param name="key" select="'HighlightButton'"/>
		</xsl:call-template>				  
		</xsl:attribute>
	   </img>
       </td>
       -->

A few lines below implement the Home icon in the if test="count($prev)>0".

 <xsl:if test="count($prev)>0">
 
    <!-- Add the Home icon and link/ -->
   	<a accesskey="h">
        <xsl:attribute name="href">
        <xsl:call-template name="href.target">
             <xsl:with-param name="object" select="$home"/>
        </xsl:call-template>
        </xsl:attribute>
        <img class="navicon" 
        src="../common/images/Home_green.png" alt="Home" 
        	height="28" width="28"/>
     </a>                                
     <a accesskey="p">
        <xsl:attribute name="href">
        <xsl:call-template name="href.target">
              <xsl:with-param name="object" select="$prev"/>
         </xsl:call-template>
         </xsl:attribute>
         
    <!-- Remove the 'Prev' text generation
         <xsl:call-template name="navig.content">
              <xsl:with-param name="direction" select="'prev'"/>
          </xsl:call-template>
     -->
     
     <!-- Add the back icon -->
     <img class="navicon" 
     src="../common/images/Media-Playback_green.png" alt="Prev" 
     	height="28" width="28"/>                                    
     </a>
 </xsl:if>

Locate the  comment and change as suggested below.

 <xsl:when test="count($up)&gt;0
      and generate-id($up) != generate-id($home)">
      <!-- Removed the vertical separator between the text links (now icons)
       |
       -->

 <a accesskey="u">
    <xsl:attribute name="href">
    <xsl:call-template name="href.target">
         <xsl:with-param name="object" select="$up"/>
    </xsl:call-template>
    </xsl:attribute>
    
    <!-- Remove the 'Up' text generation
    <xsl:call-template name="navig.content">
          <xsl:with-param name="direction" select="'up'"/>
    </xsl:call-template>
    -->
    
    <!-- Add the Up icon -->
    <img class="navicon" src="../common/images/Up_green.png" alt="Up" 
    				height="28" width="28"/>  
 </a>

Do the same in the section about the "next" link

<!-- Remove the vertical separator
     |
 -->
 <a accesskey="n">
    <xsl:attribute name="href">
         <xsl:call-template name="href.target">
         <xsl:with-param name="object" select="$next"/>
    </xsl:call-template>
    </xsl:attribute>
    
    <!-- Remove the 'Next' text generation
    <xsl:call-template name="navig.content">
         <xsl:with-param name="direction" select="'next'"/>
    </xsl:call-template>
    -->
    <!-- Add the Next icon -->
    <img class="navicon" src="../common/images/Media-Play_green.png" alt="Up" 
    		height="28" width="28"/>
</a>

Go now to the name="write.chunk" template and change the favicon name.

<html>
     <head>
     <!-- Change the favicon file name in the href parameter -->
     <link rel="shortcut icon" href="PCB inc. favicon.ico"/>
     <meta http-equiv="Refresh" content="1; URL=content/{$default.topic}"/>
     <title><xsl:value-of select="//title[1]"/>&#160;
     </title>
     </head>

Chapter 5. Customize your environment Change the webhelp transformer

Change the webhelp transformer

Caution