X-Cart forums

[millsryno]

Hello,

How do I edit my category menus so that each product choice has its own box like in this link:

http://www.audilo.com/

As you can see, each product in the "Category" menu has a box surrounding it. I know how to get it to highlight, just don't know how to create the individual boxes or lines seperating the products.

Thanks,

Ryan

[balinor]

Just add a border to the bottom of each category by editing the CategoriesList class. You will also need to change the <font style="CategoriesList"> tag to <div class="CategoriesList"> in customer/categories.tpl.

[millsryno]

Great, that worked. Now what I need is to have everything within that border to change background color upon rollover. Currently, only the area directly behind the text changes color. I need it so that even the dead space to the left and right of the text also changes color.

[millsryno]

Regarding the category menu on www.audilo.com

For each category within the category menu, you will notice they are each within an individual box. Balinor was able to help me figure out how to do that (thanks Balinor!)

What I can't figure out is how he gets the entire box to change color upon rollover. I can get the background behind the text to change color, but can't figure out how to get the dead space to the left and right of the text to highlight like this site.

Thanks in advance for any help. I'm racking my brain trying to figure it out!

[balinor]

No need for a second thread on this topic. Add this to the link style you have for the menu items:

display: block;

That should color the whole box in.

[carpeperdiem]

You can also try this technique:

your table cell will start something like:

<td width="{$width}%" class="listing" onmouseover="this.className='listing2'" onmouseout="this.className='listing'">

and the corresponding css might look like:

.listing { border: 1px solid; padding: 7px; border-color: #E5E5E5; background: #FFF0F5; text-align: center; }
.listing2 { border: 1px dotted #845974; padding: 7px; background: #C3E9EB; text-align: center; }