Category Menu in CC3

[garywhitling]

Firstly I am new to this type of thing so, Hi.

I am currently setting up and modifying my site . The problem is that I want to display 8 brown boxes down the left hand side as each category with text within them. instead of the normal menu. Do you know if this is possible to do. I have been going round and round in circles trying to make it work without success. I enjoy the challenge but its NOW time for an experts advice please!

My site is www.canvasbydesign.co.uk/onlineshop

Thanking you in advance

Gary

[roban]

Hi Gary and welcome to CC.

What you want to do is possible and will take some coding and image making to accomplish. I suggest you get intouch with one of the modders on this site. I doubt this will be a free mod.

You can find some folks by going to the download section and see who has been writing mods.

[garywhitling]

Hi Roben,

Thanks for the speedy reply. I will have a look and try to find a (modder)

Once again Thanks

Gary

[Guest]

There are two basic ways to do what you want. Either tweak the skin/template and the coding and the database to store and say what you want for each category, or hard-code the text & links into your skin/template.

The first way is better if you plan on changing categories very often or want to changes skins down the road. It would require somebody skilled in PHP/MySQL and knowledgable about the inner workings of CubeCart3.

The 2nd way is quick, cheap and easy, but will restrict you from playing with other templates / designs as easily.

Your choice.

[Guest]

Well this seemed to work ok

rollover buttons for Legend Template

make a directory called buttons in the root of cube cart and upload 2 buttons named overbtn.jpg

and downbtn.jpg of your design to it.

make a copy of Legend Template and rename it to what ever and work on that.

locate the skins dir and the template you have renamed

Paste into the top of the style sheet the code below /* NAVIGATION BUTTONS */ and change height and width and txt position to suit buttons.

/* NAVIGATION BUTTONS */

.cssnav {

position: relative;

font-family: arial, helvetica, sans-serif;

background-image: url(../../../buttons/overbtn.jpg);

background-repeat: no-repeat;

white-space: nowrap;

display: block;

width: 145px;

height: 34px;

margin: 0;

padding: 0;

}

.cssnav a {

display: block;

color: #000000;

font-size: 12px;

width: 145px;

height: 34px;

display: block;

float: left;

color: #FFFFFF;

text-decoration: none;

}

.cssnav img {width: 145px; height: 34px; border: 0; }

* html a:hover {visibility:visible}

.cssnav a:hover img{visibility:hidden}

.cssnav span {

position: absolute;

left: 20px;

top: 10px;

margin: 0px;

padding: 0px;

cursor: pointer;

}

/* END OF NAVIGATION */

Locate Style Templates/Boxes and open categories.tpl

delete all that is there and copy and paste below changing the links <img src="../../shopping-cart/buttons/downbtn.jpg" to suit your store

you could use the full url

<!-- BEGIN: categories -->

<div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div>

<div class="boxContentLeft">

<ul>

<div class="cssnav"> <a href="index.php" title="{LANG_HOME}"> <img src="../../shopping-cart/buttons/downbtn.jpg" alt="{LANG_HOME}" /> <span> {LANG_HOME} </span> </a> </div></li>

<!-- BEGIN: li -->

<div class="cssnav"> <a href="index.php?act=viewCat&amp;catId={DATA.cat_id}" title="{DATA.cat_name}"> <img src="../../shopping-cart/buttons/downbtn.jpg" alt="{DATA.cat_name}" /> <span> {DATA.cat_name} </span> </a> </div></li>

<!-- END: li -->

<!-- BEGIN: sale -->

<li class="bullet"><a href="index.php?act=viewCat&amp;catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li>

<!-- END: sale -->

</ul>

</div>

<!-- END: categories -->

[garywhitling]

Thank you Gonep!

The site is coming on now with your code thank you. Anybody who want to see it visit www.canvasbydesign.co.uk/onlineshop please note this shop is still under construction so please dont try to buy. Gary

[Guest sunshine]

Gonep,

Nice work on the instructions.