X-Cart forums - Category tables ?

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Category tables ? (https://forum.x-cart.com/showthread.php?t=10746)

Category tables ?

Hi Guys,

With the menu items on the left side?

Is it possible to have different background for each menu item.

Like

Login = blue background

Category = red background

Help = yellow background

I don't really know what section to edit since the CSS file only has VertMenuBox and when you change that background it will change the whole thing.

Thanks again.

Since each menu uses the same style, we will need to create seperate styles for each menu. Let's use the Categories menu as an example:

1. In your skin1.css file, create a duplicate for each of the menu styles. Vertmenubox-categories for example. Set the background by adding this to the style:

Code:

background-image: url(images/yourimage.jpg);

2. Click on edit templates, and scroll down to where it says new file. Create a new file called menu-categories.tpl. Copy the contents of the menu.tpl file into this file. Change the style names to correspond to the new style names you just created.

3. In customer/categories.tpl, scroll down to the bottom of the screen and replace this:

Code:

{include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }

with this:

Code:

{include file="menu-categories.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }

You will need to repeat this process for each of the menus you want to change. Have fun!

thanks!

your the best :)

You can use Smarty "Cycle" function in menu.tpl, this makes it easy to alternate between two or more styles.
Just replace (menu.tpl):

Code:

<TD class="VertMenuTitle">

with this code:

Code:

<TD class="{cycle values="VertMenuTitle,VertMenuTitle2,VertMenuTitle3,VertMenuTitle4"}"

Then set up new styles definition in skin1.css:

Code:

.VertMenuTitle2 {

        BACKGROUND-COLOR: ##FF80C0; COLOR: #330000; FONT-WEIGHT: bold;

}

.VertMenuTitle3 {

        BACKGROUND-COLOR: #FFFF80; COLOR: #330000; FONT-WEIGHT: bold;

}

.VertMenuTitle4 {

        BACKGROUND-COLOR: #9FFFFF; COLOR: #330000; FONT-WEIGHT: bold;

}