One thing I enjoy about blogging with WordPress and using various themes is that there is a community of people willing to help out if you are unable to solve a particular problem you may be having with WordPress, plugins, or themes. In this spirit, I am posting how I was able to use NextGen Gallery fade my header images.
Doing a Google serch, you can find many ways to do what I did for other themes, but for the theme I am using, Atahualpa, a big thanks goes to juggledad and flynn for providing the solution that works for me.
I also wanted to have the page menu bar reside on the header image, not on the top margin, nor below on the bottom margin of the header (if that makes sense).
The following is what I did to get my NextGen Gallery flash menu working, gleaned from various posts on the Atahualpa support forum and put here into one location:
You will need:
WordPress 2.71
NextGen Gallery plugin
Atahualpa Theme
To add NextGen Gallery to the header:
Step 1) Define a NextGen Gallery
My header gallery is 27, width is 950 and height is 200
The PHP code to call the NextGen Gallery:
<?php if (function_exists(“nggSlideshowWidget”)) { nggSlideshowWidget(gallery #,width,height); } ?>
For my site the code looks like:
<?php if (function_exists(“nggSlideshowWidget”)) { nggSlideshowWidget(27,950,200); } ?>
Edit the header.php file and look for the line:
<!– Header –>
<td id=”header” colspan=”<?php echo $bfa_ata['cols']; ?>”>
<?php bfa_header_config($bfa_ata['configure_header']); ?>
</td>
<!– / Header –>
I found that order matters, so you’ll need to put the NextGen Gallery code after the bfa_header_config in the header.php file so the modified section looks like:
<!– Header –>
<td id=”header” colspan=”<?php echo $bfa_ata['cols']; ?>”>
<?php bfa_header_config($bfa_ata['configure_header']); ?>
<?php if (function_exists(“nggSlideshowWidget”)) { nggSlideshowWidget(27,950,200); } ?>
</td>
<!– / Header –>
Step 2) Once the header.php has been modified and saved, need to define the css insert
Atahualpa will not display the gallery full width until you tell it with an insert
The DIV for the NextGen Gallery is defined as “sbsl(gallery#)_1″, for my site, my header gallery is 27, so the div looks like: sbsl27_1
The CSS insert for my site is:
#sbsl27_1 {
width: 100%;
}
I also use a .png file with a transparent background and found that I can use Atahualpa Header Image to display it (how cool is that!) You don’t have to use an image, you can use header text instead.
To set that up, need modify the DIV position via a CSS Insert, the DIV for the header image is “imagecontainer”, the CSS insert I use is:
#imagecontainer {
position:absolute;
width:100%;
z-index:3;
}
NOTE: You will need to remove all default Atahualpa header images from the wp-content\themes\atahualpa\images\header folder, otherwise, the default images will cover the effect.
To use Atahualpa header images, it must have a transparent background in order for the NextGen Gallery to show through.
I also put the page menu bar on top of my header, the css insert used is:
ul.rMenu {
background: transparent;
margin-top: 160px;
padding: 8px;
position: absolute;
width:auto;
z-index:4;
}
ul.rMenu li {
background-color: transparent;
}
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active
{
font-weight: bold;
}
All put together, my CSS insert looks like this:
#sbsl27_1 {
width: 100%;
}
ul.rMenu {
background: transparent;
margin-top: 160px;
padding: 8px;
position: absolute;
width:auto;
z-index:4;
}
ul.rMenu li {
background-color: transparent;
}
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active
{
font-weight: bold;
}
#imagecontainer {
position:absolute;
width:100%;
z-index:3;
}
Step 3) Tell Atahualpa what to display in the header
Again, order is important, in ATO, Header, Configure Header Area, I put %image %pages
If all is working properly, you should have a flash header with header text and a page menu on your header image.
Hi, Its not working for me. I did exactly how you said here..
I assume gallery no. means gallery ID (when we create a gallery in nextgen)
It displays following warning on my website header
- sort() expects parameter 1 to be array, string given in
bla/bla/bla/ atahualpa353/functions/bfa_rotating_header_images.php on line 37
- Invalid argument supplied for foreach() in bla/bla/bla/ atahualpa353/functions/bfa_rotating_header_images.php on line 39
- array_rand() expects parameter 1 to be array, null given in
bla/bla/bla/ atahualpa353/functions/bfa_rotating_header_images.php on line 320
Oops.. had to type all these as there is no option for attaching the image. [am half dead now]
Please help me.
Thanks in advance, take care,
Diya
Thoughts and questions:
1) I gather you are using Atahualpa 3.5.3
2) The header.php in the root folder of the Atahualpa theme is the header.php that should be edited (make a copy first)
3) Look for “Header” around line 61 of the header.php file (this is the area of most importance)
4) Around line 64 should be “
< ?php bfa_header_config($bfa_ata['configure_header']); ?>”5) Insert the line “
< ?php if (function_exists("nggSlideshowWidget")) {nggSlideshowWidget(27,950,200);} ?>” (insert a new line after the bfa_header_config, this would be line 65, shifting the text file down one line, the NextGen Gallery widget code)Input for the NextGen Gallery widget: nggSlideshowWidget(gallery #, width, height)
You will also have to make changes in the Atahualpa Theme Options
Please help,
Diya
Would it be possible to show me your header.php file?
Need to know the NextGen Gallery # you setup for your headers.
A basic question: Do you have NextGen Gallery slide show working on your site?
The menu placement is accomplished by adding CSS in the Atahualpa Theme Options, Various Content Items, Add CSS/HTML Inserts.
This area is also where you manipulate the placement of the rotating header.
My CSS:
#sbsl27_1 {
width: 950px;
z-index: 4;
}
#menu1 {
Position: absolute;
margin-top: 158px;
padding: 8px;
width: auto;
z-index: 4;
}
ul.rMenu {
background: transparent !important;
}
ul.rMenu li {
background: transparent !important;
margin-right: 8px;
}
ul.rMenu li ul li {
margin-right: 0;
}
#menu2 {
Position: absolute;
margin-left: 528px;
padding: 8px;
width: auto;
z-index: 4;
}
#imagecontainer {
position: absolute;
width:950px;
z-index: 3;
}
I used following code in header.php
<td id="header" colspan="”>
and Css,
#sbsl1_1 {
width: 100%;
z-index: 4;
}
ul.rMenu {
background: transparent;
}
ul.rMenu li {
background-color: transparent;
}
div#menu1 {
background: transparent;
margin-top: 2px;
margin-left: -150px;
position: absolute;
width:auto;
z-index:4;
}
div#menu2 {
background: transparent;
margin-top: -27px;
margin-left: -250px;
position: absolute;
width:auto;
z-index:4;
}
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active
{
font-weight: bold;
}
/* Need this to get rid of fade border around the menu item */
div#menu1 {
border: dotted 0px #fffffe;
}
div#menu2 {
border: dotted 0px #fffffe;
}
/* Need this to get rid of fade border around the menu item */
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight: bold;
padding:6px 10px;
}
div#menu2 ul.rMenu li a:link,
div#menu2 ul.rMenu li a:hover,
div#menu2 ul.rMenu li a:visited,
div#menu2 ul.rMenu li a:active {
font-weight: bold;
padding:6px 10px;
}
I don’t have any other galleries . I just installed it to use it on header image. I assume gallery# means gallery-ID that’s created when you create a gallery in the nextgen gallery.
correct me if I’m wrong.
——————
Thanks a lot for the css code above, my menu is now embedded inside the header image with a bit of code tweaking.
Can you also suggest me how to embed search and subscribe buttons form logo to header image??? [Sorry..too many questions.. hope you dont mind.. I did check in atahualpa forum but its in gold member thread. I don't earn so couldn't get in there. ]
To reinterate, the header.php in the root folder of the Atahualpa theme folder is the header.php that should be edited (make a copy first)
Using a text editor, look for “Header” around line 61 of the header.php file (this is the area of most importance)
Around line 64 should be “
” after this line insert the code: “”You also shoud have a working slide show before setting it up in your header. If is working outside of the header, the it’s just coding that needs to be figured out.
Input for the NextGen Gallery widget: nggSlideshowWidget(gallery #, width, height)
You will also have to make changes in the Atahualpa Theme Options giving the order of the header layout, and inserting the CSS to manipulate the menu placement.
Just note, I’m note a coder, and only through playing around with CSS and looking at others sites was I able to get my header setup.