Transparent Nice Menus Tutorial

Last updated October 11, 2011. Created by artatac on April 15, 2008.
Edited by Shane Grant, ressa, elgwiedo. Log in to edit this page.

This tutorial will show how to add semi transparency to http://drupal.org/project/nice_menus nice menus backgrounds and then to adapt Garland theme to add a background image to the right sidebar.

For the attachments go to [Page no longer there]
- the page in [Page no longer there]

As always remember to backup your site before experimenting.

Firstly download and install http://drupal.org/project/nice_menus 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 [Page no longer there].

[Page no longer there]

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.
[Page no longer there]