Using Images for Navigation Block Titles

[Jamie]

Overview

Navigation blocks by default have titles displayed via text:
example1.png

For some designs, you may wish to use images representing those titles so you can make the text stand out.
example2.png

The easiest way I've found to do this involves adding custom code to one template, just one time. It allows you to then upload images to your custom theme with a name corresponding to the text you've entered for the title of the nav block. If the image file name matches the nav block title, that image is used instead of plain text. Here's a tutorial explaining how to implement this.



Instructions

First, you need to know how to modify template files properly and need to have a custom theme created and enabled.

1. You need to modify the nav_block.tpl.php template file. If you don't have a copy of that template in your custom theme, copy the default version of that file from squirrelcart/themes/squirrelcart into squirrelcart/themes/YOUR_CUSTOM_THEME
   
   
2. Paste this code at line #3 of that file:
   

   <?php 
   // custom code to grab image corresponding to header text
   $Old_Header = $Header;
   $nav_txt = trim(strtolower($Header));
   $nav_txt = str_replace(' ','-',$nav_txt);
   $nav_txt = preg_replace('/[^0-9a-z-]/','',$nav_txt);
   $Header = sc_img("nav-$nav_txt",'tag','',$Header);
   $Header = !empty($Header) ? $Header : $Old_Header;
   ?>

3. Save the file
4. Put an image file representing the title for each navigation block inside the images folder in your custom theme folder.
   
   If you have a navigation block named "My Links!", name the file nav-my-links.gif (or nav-my-links.png, or nav-my-links.jpg). To determine the exact format for the name:
   
   a. Drop the title to lowercase: my links!
   b. Replaces spaces with hyphens: my-links!
   c. Remove any non alpha-numeric characters: my-links
   e. Prefix the name with "nav-": nav-my-links
   d. Add the image file extension corresponding to the format you are using for that image: nav-my-links.png
   
5. Load your storefront page. If you named your image files correctly, you should now see images in place of the normal text. To add additional images in the future, just name them in the same fashion as above, put them in squirrelcart/themes/YOUR_CUSTOM_THEME/images, and they will automatically appear.

How This Works

The normal text for the nav block is stored in the $Header variable. For example, if you have a title of "Your Account" for the Account Options navigation block, $Header is going to be equal to the text "Your Account". The custom code takes that string, changes it using the above rules, and then looks for a corresponding theme image of that name. If found, it changes $Header to an <img /> tag. If not found, it leaves $Header unchanged.

[designwerks]

Going to try this later this evening...

I could see it being a lot of fun thinking of gradients to match the colours of a particular shopping cart etc.

Once completed - I'll post some pics for others.

John