X-Cart forums

[vg]

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.

[balinor]

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:

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:

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

with this:

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

[vg]

thanks!

your the best

[Zaja]

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

<TD class="VertMenuTitle">

with this code:

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

Then set up new styles definition in skin1.css:

.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;
}