Transparent Nice Menus Tutorial

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

ul.nice-menu li {
border: 1px solid #ccc;
border-top: 0;
float: left;
background-color: #eee;

TO

ul.nice-menu li {
border: 1px solid #ccc;
border-top: 0;
float: left;
background-color: #eee; background: transparent url(grey50pc.png) 
repeat 0% -0px;

In Vertical/left section change

ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent {
background: #eee url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li.over,
ul.nice-menu-left li li.menuparent:hover,
ul.nice-menu-left li li.over {
background: #ccc url(arrow-left.png) left center no-repeat;

TO

ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent {
background: transparent url(grey50pcarrow.png) left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li.over,
ul.nice-menu-left li li.menuparent:hover,
ul.nice-menu-left li li.over {
background: transparent url(dkgrey50pc.png) left center no-repeat;

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

/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
margin: 60px 0 5em;
width: 210px;
float: left;
z-index: 2;
position: relative;
background: transparent url(images/badmin.png) repeat-x 0% -0px;
}

Your web page should now look like this.
[Page no longer there]