A Guide to Replacing Your HIP Tab GIFs

INTRODUCTION

This is a quick guide to using the "HIP 3D GIF Generator" (http://library.hud.ac.uk:4128/hipgif/).

The aim is to replace the standard set of navigation bar GIFs:

...with a set like this:

This guide assumes that you use the same background colour for all of your tabs - e.g. like this:

The guide is written specifically for HIP 3.04.  It should still work for other releases of HIP 3, and may even work for HIP 2.

As soon as I can get hold of HIP 4, I'll let you know if it works with that too!

The usual caveats apply:

• back up your HIP server before making any changes
• try out the changes on a test HIP server first before trying it on your live server
• Dynix will not provide any technical support for these changes
• this guide works okay for me, but I can't guarantee it will work for you!

STEP 1

I'm going to assume that you have a test HIP server to play around on and that you'll be making the changes on there, rather than your live HIP server.

Firstly, make a backup of the following two HIP folders (and associated sub-folders) so that you can revert back to the original "look and feel":

1. <your HIP XSL directory>\xsl\*
2. <your HIP App Server directory>\jboss\server\default\deploy\hipres.war\images\*

In particular, you need to ensure that you have a backup of the toolbar2.xsl XSL file, and backups of the following GIFs from the \hipres.war\images\ directory:

• bg-E0-blue.gif
• bg-N0-blue.gif
• bg-W0-blue.gif
• NE0-blue.gif
• NW0-blue.gif
• tab_lb.gif
• tab_lm.gif
• tab_lt.gif
• tab_mt.gif
• tab_rb.gif
• tab_rm.gif
• tab_rt.gif

...the first 5 files are used for the inactive tabs, and the remaining 7 files are used for the active tab.

STEP 2

Next you need to find out the hexadecimal value of the colour of your navigation bar.  If you don't know this, then log into your HIP Admin interface (http://<your HIP server>:222/sa_tools/admin/) and follow these steps:

1. click on the "CUSTOMIZE" tab
2. select the "Interface" option
3. select the "Tabset" option
4. select the name of the tabset you use from the list of available "Tabsets"
5. click on one of the tabs

You should now see a screen like this:

In the above example, the hexadecimal value of the colour is "336699".

STEP 3

Once you know the correct hexadecimal value, go to library.hud.ac.uk:4128/hipgif/ and type the value into the page:

You can also alter the "shading gradient" value (the default is 32) - this alters the strength of the "3D effect".

The effect can be fairly subtle, but here are some examples:

• 5
  
   
• 15
  
   
• 25
  
   
• 35
  
   
• 45
  

Once you have clicked on the "create the GIFs" button, you should see a directory where you can preview the new GIFs:

If you click on the _sample.html file, you'll see a preview page which uses the GIFs you have just created.

To generate a new set of GIFs, simply use your web browser's back button.

Once you have generated a set of GIFs that you would like to use, you will need to save the files to your PC...

STEP 3

Right-click on each of the 8 GIF files and select "save as" or "save target as" to save each file to your PC.

Once you have saved all 8 GIF files, you can copy them to the "\hipres.war\images\" directory on your HIP server, overwriting the existing files (you did remember to make that backup, didn't you?).

If you load up your HIP site in a web browser, you should see something like this (if not, then try clearing your web browser's cache and press CTRL+F5):

The new "3D" GIFs have replaced the default GIFs for the active tab, but the inactive grey/gray tabs still have the standard GIFs.

To replace the inactive tab GIFs, download a replacement set from library.hud.ac.uk:4128/hipgif/3d_grey.zip.  Extract the GIFs from the ZIP file and copy them to the "\hipres.war\images\" directory on your HIP server, overwriting the existing files.

Reload your HIP site in the web browser, and you the inactive tabs should look something like this:

If you want, you can stop here.  However, if you'd like to complete the 3D effect and give the bottom of the navigation bar a more rounded feel, then proceed to the next step!

STEP 4

To complete the 3D effect, we need to make some changes to the toolbar2.xsl file so that the main part of the navigation bar has a more rounded feel:

1. Find the toolbar2.xsl file in the xsl directory and open it in a text editor (e.g. Notepad or Wordpad).

2. Find all the instances of the following text and replace the 2 with a 3:

   <xsl:attribute name="height">2</xsl:attribute>

3. Search for the following section of text (it appears around line 935 in the UK HIP 3.04 toolbar2.xsl file):

   </td>
   </tr>
   </tbody>
   </table>
   <xsl:apply-templates select="//active_menu"/>

4. Insert the following section of text between the </tr> and </tbody> tags:

   <tr>
   <td>
   <xsl:attribute name="valign">top</xsl:attribute>
   <xsl:attribute name="background"><xsl:value-of select="$images_path"/>bottomtab.gif</xsl:attribute>
   <xsl:attribute name="bgcolor">#FFFFFF</xsl:attribute>
   <xsl:attribute name="height">6</xsl:attribute>
   
   <img>
   <xsl:attribute name="src"><xsl:value-of select="$images_path"/>spacer.gif</xsl:attribute>
   <xsl:attribute name="border">0</xsl:attribute>
   <xsl:attribute name="height">4</xsl:attribute>
   <xsl:attribute name="width">4</xsl:attribute>
   <xsl:attribute name="alt"></xsl:attribute>
   </img>
   </td>
   </tr>

5. The whole section should now look like this (with the new part highlighted in red):

   </td>
   </tr>
   
   <tr>
   <td>
   <xsl:attribute name="valign">top</xsl:attribute>
   <xsl:attribute name="background"><xsl:value-of select="$images_path"/>bottomtab.gif</xsl:attribute>
   <xsl:attribute name="bgcolor">#FFFFFF</xsl:attribute>
   <xsl:attribute name="height">6</xsl:attribute>
   
   <img>
   <xsl:attribute name="src"><xsl:value-of select="$images_path"/>spacer.gif</xsl:attribute>
   <xsl:attribute name="border">0</xsl:attribute>
   <xsl:attribute name="height">4</xsl:attribute>
   <xsl:attribute name="width">4</xsl:attribute>
   <xsl:attribute name="alt"></xsl:attribute>
   </img>
   </td>
   </tr>
   
   </tbody>
   </table>
   <xsl:apply-templates select="//active_menu"/>

Save the toolbar2.xsl file and wait for the HIP XSL Processor to reload the file and apply the changes.

Reload your HIP site in the web browser and you should see something like this:

Give yourself a pat on the back! :-)

NOTES

If you do use different coloured tabs, then it is possible to achieve the same effect.  However, it involves quite a bit of further editing of the toolbar2.xsl file and isn't for the faint hearted!

I've used the following two HIPs to generate screenshots for this guide - I'm hoping the respective HIP administrators won't mind!

• North Harris Montgomery Consortium Libraries (librarycatalog.nhmccd.edu)
• University of Bradford (ipac.brad.ac.uk)

This guide is really aimed at those of you who like to tinker, and who don't mind running the risk of breaking their HIP!

If you have any questions, or if you spot any inaccuracies in this guide, then please email me (d.c.pattern@hud.ac.uk)

The replacement GIFs are generated "on the fly" using the Perl GD module.