Replace the area called Category Tabs with Image

The subject probably says it all....

My client would like a custom image in the bar that holds the Category Tabs. I'm a child of HTML so I have tried to do this without success. What, in which file, will I edit to insert an image or image table to display instead of the cattabbs area.

You can do it with CSS.

Find your /includes/templates/templatefolder/css/stylesheet.css
Copy it and paste it one level up as your backup.

Search for the "#navCatTabs ul li a" class, no parenthesis.
It will be nested and look something like this.

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #ffffff;
    }

Cut #navCatTabs ul li a and paste it one line below the }

Now you want to add some CSS buttons to the mix. Do you have the button image made? I'm going to call it "button.jpg"

Add the following to your code and never use the tab button to move the cursor in place. Space bar will get you there.

#navCatTabs ul li a {
   background-image: button.jpg
   }

You may want to add a hover to that, which is the same image with a border, or a differant cover. A third version of the same image can be used if you want a visited link.

Just google css tutorials and you'll find more about it.

I think you were assuming that I wanted to leave the category lists and make them buttons. I just wanted to put an image in the place of the category tabs row.

Nevertheless, for some reason I figured out a fix. I edited the tpl_header.php and removed the <optional category tabs display> section and replaced it with:

 
<!--bof-image-replacement display-->
  <table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td> <img src="/zen-cart/images/top_ribbon_banner.jpg" width="750" height="66"></td>
  </tr>
</table>
<!--eof-image-replacement display-->

see here

Thanks for the reply

I'm comfortable with html