Update to Atahualpa "Howto" with Nextgen Gallery

Since I posted on how to put the page menu on the header space, use a NextGen Gallery slideshow in the header, and use Atahualpa to manage a .png transparent background image, I’ve found an additional plug-in called “Dynamic Header” that is also really cool.

With “Dynamic Header” I can select what headers go where.

I also like the NextGen Gallery slideshow header and was wondering if the two could be combined. With a little logic, they can!

The default setting for “Dynamic Header” is to not assign a header image to any particular page, but use the default site wide image. To have “Dynamic Header” manage your headers, add the following code to your header.php file: <!–p {show_media_header();}–>

“Dynamic Header” also allows you to check what header is being used. The variable is: get_media_header_url()

In Atahualpa’s header.php where I added the NextGen Gallery code: <!–p if (function_exists(“nggSlideshowWidget”)) { nggSlideshowWidget(27,950,200); }–>

I want to check for the header condition of “None”, if “None” use the NextGen Gallery code, if other than “None” use the “Dynamic Header” settings. The code looks like: <!–p if (function_exists(“nggSlideshowWidget”)) if (get_media_header_url()==”None”) { nggSlideshowWidget(27,950,200); } else {show_media_header();}–>

Combining both the NextGen Gallery and “Dynamic Header” codes, using them when a condition is met.

With “Dynamic Header” installed, I can choose between my NextGen Gallery slideshow, or assign a static header image to specific pages!

I’ve also tweaked the CSS to break out the page and category menus
#menu1 is the page menu
#menu2 is the category menu
ul.rMenu = page menu attributes
ul#rmenu = category menu attributes

The CSS:
#menu1 {
Position: absolute;
margin-top: 158px;
padding: 8px;
width: auto;
z-index: 4;
}
ul.rMenu {
background: transparent;
}
ul.rMenu li {
background-color: transparent;
margin-right: 8px;
}
ul.rMenu li ul li {
margin-right: 0;
}
#menu2 {
Position: absolute;
filter: alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
margin-left: 528px;
padding: 8px;
width: auto;
z-index: 4;
}
ul#rmenu {
background: transparent;
}

As you notice on my header menu, I’m using opacity on the category menu, makes for a cool effect.

Mentioned in my prior howto, I also use the CSS insert to allow me to also use a transparent .png image for text or overlay on my header. Easy drop shadow for my title text!

Full CSS insert to have the NextGen Gallery or “Dynamic Header” and menus:
#sbsl27_1 {
width: 950px;
}
#menu1 {
Position: absolute;
margin-top: 158px;
padding: 8px;
width: auto;
z-index: 4;
}
ul.rMenu {
background: transparent;
}
ul.rMenu li {
background-color: transparent;
margin-right: 8px;
}
ul.rMenu li ul li {
margin-right: 0;
}
#menu2 {
Position: absolute;
filter: alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
margin-left: 528px;
padding: 8px;
width: auto;
z-index: 4;
}
ul#rmenu {
background: transparent;
}
#imagecontainer {
position: absolute;
width:950px;
z-index:3;
}

Enjoy “Dynamic Header” and NextGen Gallery!