Transparent Nice Menus Tutorial

This tutorial will show how to add semi transparency to nice menus backgrounds and then to adapt Garland theme to add a background image to the right sidebar.

As always remember to backup your site before experimenting.

Firstly download and install nice menus onto your site. For ease choose a left style menu and place in the right sidebar. you should now have something that looks like this.

Now we need to alter nice_menus_default.css...

In global section change

TO

In Vertical/left section change

TO

and save. Next you need to create the semi transparent background images, I have attached the ones I used at the bottom of the page but a Photoshop tutorial is available here http://www.my-photoshop.com/imvu/semi-transparent/semi-transparent.html.

Now put grey50pc.png, dkgrey50pc.png and grey50pcarrow.png (the latter png has an extra solid layer with a small arrow on it, as we dont want that to be semi transparent) in the modules/nice_menus folder. Refresh your website and it should look something like this. As the right sidebar (in Garland) is basically
a single colour it is difficult to see that we have achieved any transparency.
So finally we are going to mod Garland and insert a background image.
Create an image 210 x 446 pixels and save it in themes/garland/images as badmin.png and alter the style.css

Your web page should now look like this.