Creating new sidebox

[gjh42]

You are using a table with all its elements hard-coded in the HTML. That is a lot of code that is inappropriately used. What you have is a list of items, and you should use a <ul> list instead of a table for it.
Instead of

<TABLE width="214" border=0 cellPadding=0 cellSpacing=0 bgcolor="#333333">
<TBODY><TR>
<TD height=25 vAlign=center align=left><img src="http://prodigicontrols.com/images/2x12.gif" width="2" height="32"></TD></TR>
<TR><TD bgColor=#cecece height=1 vAlign=center align=left></TD></TR>
<TR><TD class=cell onmouseover="this.bgColor=\'#05A2C7\'"
onmouseout="this.bgColor=\'#333333\'" height=25 vAlign=center
align=left><A class=websitenav
href="http://www.prodigicontrols.com">Home</A> </TD></TR>
<TR><TD bgColor=#cecece height=1 vAlign=center align=left></TD></TR>
<TR><TD class=cell onmouseover="this.bgColor=\'#05A2C7\'"
onmouseout="this.bgColor=\'#333333\'" height=25 vAlign=center
align=left><A class=websitenav
href="http://www.prodigicontrols.com/aquabox.htm">AquaBox Specifications </A></TD></TR>
...

use

<div class="websitenav">
<img src="http://prodigicontrols.com/images/2x12.gif" width="2" height="32">
<ul>
  <li><A href="http://www.prodigicontrols.com">Home</A> </li>
  <li><A href="http://www.prodigicontrols.com/aquabox.htm">AquaBox Specifications </A></li>
...

and put in your stylesheet

.websitenav {
    width: 234px;
    background-color: #333333;
    }

.websitenav ul li {
    border-top: 1px solid #cecece;
    height: 25px;
    }

.websitenav ul li:hover {
    background-color: #05A2C7;
    }

.websitenav ul li a {
    color: #cccccc;
    }

.websitenav ul li a:hover {
    color: #cccccc;
    }

[JayR]

Thank you so much Glenn. I'm learning a lot from you and I appreciate the time you take to do this. I love your solution - it's elegant and simple.

I've applied it and I got close to what it should be (a look of the website), but not close enough to go with it. The list ul li creates the left side space (intend) with a dot in front of each line. It's not what the rest of website has and I really can't apply it. See the left side column on the site http://prodigicontrols.com (that's what it supposed to be like).

I have also experimented with <blockquote> in place of list, but it did not helped.

I also went back to html code with just a three row table. I fixed the class assigned to each link so it had everything in place. However, it still applied Zen-cart default colors for 'a' and hover. I even created a simple html plain text link and assigned to it my A class (websitenav) and still the colors are from Zen-cart default settings. However, the font, size, decoration are controlled by my 'websitenav.' I have left it on the server so maybe you can have a look at it: http://prodigicontrols.com/buy

Is there still a solution that may do the trick? If you wish I can put back on the server the list ul li solution for your viewing.

Again, I'm deeply gratful for what you do for me.

[gjh42]

The <ul> can be styled however you want. Getting rid of the bullet is done by adding list-style: none; to the rule:

.websitenav ul li {
    border-top: 1px solid #cecece;
    height: 25px;
    list-style: none;
    }

[gjh42]

Seeing your main site nav and your shop, I observe that there is a still easier way to get the nav sidebox you want: ez-pages. You can create ez-page external or internal links with the names you want, enable them in the ez-pages sidebox, and style the links with your stylesheet to look just like the main site. No PHP or HTML coding needed at all, just CSS.

[JayR]

Thank you for the ez-pages direction. How do I get the links show up in my blank_sidebox? In the ez-pages setup there is a choice of 'sidebox' and if I choose it then they show up in the right side column box called "Important Links." I have a feeling that maybe by playing with order I can get them into blank sidebox? I have tried different order numbers for sidebox, but didn't move out of "Important Links."

[gjh42]

The "sidebox" setting is for the ez-pages sidebox (titled "Important Links").

If you want to use them separately, you can turn off the ez-pages from sidebox (but keep the sort order), and use the zen_ez_pages_link(##) function (where ## is the ez-page id) in your blank sidebox. You need to ensure that it is used as PHP code and not HTML text markup.
Similar to this:
<?php echo zen_ez_pages_link(##) ?>
for each link.