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:
Code:
<TD class="VertMenuBox">
with this:
Code:
<TD class="HelpMenuBox">
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:
Code:
include file="menu.tpl"
with this:
Code:
include file="help-menu.tpl"
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!