Different colors for different VertMenu boxes
 

How would I go about making the different verticle menu boxes and title areas different colors? As in.... categories box is blue, but help box is green, just as an example.
Thanks.
Tina

Hi Tina. There are a couple ways to do this that I know of.

The first method would be to write an {if} statement that calls a different style for each different menu. This requires some knowledge of how Smarty tags work, but would be less code in the long run.

The second method would be to create a different copy of menu.tpl and different styles for each different menu style you want (more code, less complicated).

I can walk you through the second method, but the first method will require some help from one of the Smarty gurus around here :)

Also, if you could put your X-Cart version number in your signature, it will help us help you better. Thanks!

That would be great. I'd appreciate any help.

Added my version to my signature. :)
Tina

Or, I thought I had added it....

Ok, here we go. By default, each of the side menus is using the same template: menu.tpl and the same set of styles: VertMenuBox, VertMenuBorder, etc.

The first step is to create all the different styles you want - I tend to name them so that I can keep track of them - HelpMenuBox for example. Set all of those up in your Skin1.css file.

Next, you will need to create a duplicate of menu.tpl for each different style you want to use. Let's use the help menu as an example. Go to edit templates and scroll down to where it says 'Create New File'. Type help-menu.tpl in the box and hit the create button.

Now open the menu.tpl file and copy the contents. Cancel out without saving and then open the file you just created (help-menu.tpl) and paste the contents in the empty box.

Change the styles to the styles you want. For example, if you want to change the background of the menu box itself, you would replace this:


with this:


Repeat this for whichever styles you want to change, and then hit Save.

Now you need to make sure the help menu actually uses your new template. Go to Edit templates and click on help.tpl. Scroll down towards the bottom. Replace this:


with this:


Click Save. You are done! The help menu should now take on the style you defined for it in the skin1.css file.

Repeat this for each of the boxes you want to appear differently. The .tpl files for each of the boxes are:

News - news.tpl
Authentication box - auth.tpl & authbox.tpl
Help - help.tpl
Categories - customer/categories.tpl
Special - customer/special.tpl
Users Online - /modules/Users_online/menu_users_online.tpl
Your Cart - /customer/menu_cart.tpl

As I said, the Smarty tag method would be a lot less code, but this really isn't that bad once you get the hang of it. Good luck!

Thank you!! That worked great. I really appreciate your help. :D
Tina