WordPress fixes part 2 – Page elements appearing in front of pop-up images in the NextGen Gallery / lightbox plugins

This one’s actually a bit impromptu as I only just figured it out and wanted to share it with the community in case anyone else comes across the same problem.

Since installing the new themes here and on my other blog, I found that all my image galleries that were put together using the NextGen Gallery plugin (which also uses the lightbox plugin) had all the elements from the navigation bar appearing above the pop-up image. I posted up a question on the WordPress support forums to see if anyone could help, and didn’t get a solution (though someone else posted up that they had the same problem, so I felt happy that it wasn’t just me which was a relief!)… but because I’m prone to lightbulb moments, I thought of something that may be causing the error, and thanks to some poking around with Firebug I found a solution, and it’s all to do with the z-index properties in the CSS files loaded into both of my blogs.

First up, some code:

Previous code:

#nav-menu, #nav-menu ul {
 margin: 0px;
 padding: 5px 35px 10px 35px;
 list-style-type: none;
 list-style-position: outside;
 position: relative;
 z-index: 300;
 width: 100%;
 height: 100%;
 background: none;
 text-align: left;
 font: 18pt/24pt Tahoma,Arial,sans-serif;
 font-weight: bold;
 color: #ffffff
}

This is the CSS that governs how my navigation bar behaves itself – it seems a little convoluted, but it’s setup like this (and uses the rules that follow) to get the nice jQuery-driven drop-downs that can cascade out to multiple levels (there’ll be more on some PHP tricks I’ve used to customise my nav bar in the concluding post on WP fixes I’ll be posting up later). The property that is causing all the grief is actually the z-index property, which is currently set to 300 as per the tute I used as a reference to put the menu together. If we click on one of the images and wand our cursor over the pop-up version via Firebug to get the properties of the containing divs though, we reveal another z-index property that’s clashing. The #stimuli_overlay div that acts as the parent div for the goodies that follow has a z-index of 90, as referenced via the lightbox.css that is installed as part of the default Lightbox plugin:

lightbox.css

#stimuli_overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}

The solution to this is now simple – either change the lightbox.css file or change your style.css attached to your theme. I chose the latter since I didn’t want to touch the plugin defaults, as it would cause issues later on if the plugin were ever upgraded.

New code:

#nav-menu, #nav-menu ul {
 margin: 0px;
 padding: 5px 35px 10px 35px;
 list-style-type: none;
 list-style-position: outside;
 position: relative;
 z-index: 50; /* Causes bugs for NGG, has to be smaller than #stimuli_overlay z-index, which is 90 by default, so move value of #nav-menu to 50 instead of 300 */
 width: 100%;
 height: 100%;
 background: none;
 text-align: left;
 font: 18pt/24pt Tahoma,Arial,sans-serif;
 font-weight: bold;
 color: #ffffff
}

There, problem solved – 50 is still ample to ensure the dropdowns sit on top of other elements, and small enough to ensure it doesn’t interfere with the lightbox CSS.

And because I’m big on commenting in my code to avoid getting confused when maintaining it, I’ve also added that great big string of text to my CSS to remember why it’s changed from the standard 300 recommended by the tute I used as a reference.

In theory, you can make the z-index property anything you like, just as long as it doesn’t go above the z-index value of the divs that sit above your page when you call the lightbox plugin via NextGen Gallery.

I was originally planning on writing two WordPress pieces, but I only worked this one out a couple of hours ago and thought I should share 🙂 Next one will be the last, then I’ll get back to the usual program I promise!

Share

WordPress fixes part 1 – Warning: Cannot modify header information – headers already sent by…

Just wanted to share this fix – I had this error come up when working on my other blog when I installed my latest theme and could not work out why it was happening. The error message mentioned the functions.php file and pluggable.php file in the error message.

From what I’ve read online, this error is caused by whitespace somewhere in the PHP files noted in the error message. As a precaution I went in and checked every php file in my theme and cleaned any inconsistencies, then checked pluggable.php and got rid of the blank space at the end of the file. Reloaded, still no luck.

I then took another look at my functions.php file, and something occurred to me – I added a php comment field at the top of the file before programming in some stuff in the file, and there was a blank line between the comment php tag and the functions – I removed the comment so it was purely the functions on the first line, and problem fixed!

Previous code:



 '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', )); ?>

New code:

 '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', )); ?>

Incedently, you can also see how I set up the sidenav boxes on my other blog this way too in case you’re interested or want to criticise 😛

While everyone might have different issues, hopefully this’ll help someone else who gets this message – check the files indicated in the error message, and if you’ve added a comment to the top of your file for example (like my functions.php file, where I put the theme details in as a php comment and then had a blank space/line underneath), chop it out, re-upload via FTP, and hopefully your issue will be resolved!

I have another WordPress fix to post in the next couple of days on the blog detailing how I setup the drop-down system in my navigation bar in the page header to style the top nav separately from the drop-down boxes to dynamically insert the dividers to the right of each menu item. Stay tuned!

Share

Companion blogs

Calendar

December 2024
M T W T F S S
 1
2345678
9101112131415
16171819202122
23242526272829
3031