Jump to content

Category Menu in CC3


garywhitling

Recommended Posts

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

I am currently setting up and modifying my site :D . 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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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 -->

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...