Conflict with graphic in header

Hello,

I have installed Shadowbox (with all the recommended parameters) on Joomla 1.5.14 and it works fine in general (embedded videos).

However, it conflicts with the graphics in the header of the template (at_tolona). The header is shown on top of the video. :-(
Further down the page it is no problem.

Here the link to the page:
http://www.agateno.de/profil/121

Does anybody have an idea

Many thanks in advance!
(I am a total Joomla / HTML newbie...)

Daniel

04 Jun 12

Hi Daniel,

Thanks for the link.

First, I would recommend to upgrade your Joomla version to the latest stable 1.5.26.
Your current version is fairly old and includes many vulnerable risks.
Besides that, the latest version includes general improvements of the main functionality of Joomla.

Second, I didn't see anything that I could test regarding Ninja Shadowbox on the page you provided.
Perhaps you have removed the content? Or may be I have to look elsewhere?

Can you please put an example with the issue you described, on your site.

Thanks.

Kind regards,
John

04 Jun 12

Hey John,

Many thanks for looking into this.

1) Thanks for the advice on updating. I know it would be wise. However, my 'tech guy' said there are some customizations that would not go well with an update - so I try to get around it for as long as I can.

2) Hmm - this is strange. Have you found the link saying "HD Video Youtube" (next to the picture)? With javacscript enabled it should pop up the lightbox....

I enclosed two screenshots (before and after clicking on the encircled link).

Kind regards,
Daniel

You don't have access to view the attachments in this post.

04 Jun 12

Hi Daniel,

Ok, thanks. Now I was able to see the issue.
I think it was me clicking to the wrong page.

The problem is that your template is defining some z-index elements way to high.
z-index is a CSS element that controls a layer-like or cascade-like visibility of the HTML elements on your page.

Open up your template.css file and find the following CSS definitions:

#logo1

#at-wrapmainnavigation

#javascript-flash-header

For each definition above, you have to lower the values of each z-index.
Make sure it's under a value of 999, as this the z-index for Ninja Shadowbox.

This should do the trick.

Let us know how it goes.

Kind regards,
John

04 Jun 12

John, thanks!

I found the z-index values in the CSS file. They are too high "all over the place". I am reluctant to touch any of those as I cannot judge what the consequences might be.

Would it be possible to just give the Ninja Shadowbox a higher value? Where can I do that?

Thank you!

Kind regards,
Daniel

04 Jun 12

Hi Daniel,

Sure it's possible either way.

Some explanation first:

The logo doesn't need a z-index at all, it's just nested into the header element and is only needed as a placeholder for the logo.
It's a bit overdone to give it a z-index of 20000. I don't know the meaning of this, with all my respect.

Flash headers, like on your page, are often given a z-index value to compensate artifacts and overlappings.
In this case, a z-index is respectable but again a value of 5000 is slightly overdone.

The z-index for the main navigation is also respectable. This has to do with displaying the submenu-items properly, if there are any. The value of 22000 is giving because the submenu-itmes must be visible upon the Flash header. So in this case the Flash header needs to be behind the menu-items and this is done correctly. However, I find a value of 22000 overrated but understandable in order to force the menu to display correctly. Since there aren't any submenu-items there's no need to force the menu to a higher z-index value.

What you can do are two things:

1) Adjusting your template's z-indexes according to the z-index for Ninja Shadowbox.

Safe z-index suggestions specific to your template are as follows:

#logo1 > no z-index at all.

#at-wrapmainnavigation { z-index: 998; }

#javascript-flash-header { z-index: 997; }

2) Adjust the Ninja Shadowbox z-index according to the z-index of your template.

Open up /modules/mod_ninja_shadowbox/ninja_shadowbox/js/skin/classic/skin.css.

Search for the selector (around line 36):

#shadowbox_container

And change the z-index value of 999 to 22001.

Like so:

#shadowbox_container { z-index: 22001; }

For both methods make sure you leave the structure of the other definitions within the selectors in tact.

Let us know how it goes.

Kind regards,
John

05 Jun 12

John,

Brilliant! Works like a charm! :-)

I chose the option to modify the z-index of Ninja Shadowbox as I felt this to be least "invasive" to the system.
I have already received the feedback that this template is not scripted well - but well, that's what I have now (and I am not knowledgeable enough to make larger changes).

One annotation regarding the configuration of Ninja Shadowbox. The documentation says that the position is irrelevant for the module to work. However, my template "opens" another (empty) box in the left column if I position the module "left". So, sometimes it can be necessary to check which position works best.

Thanks again for your great (!!) support. I had no hope I could get this problem fixed.

Kind regards,
Daniel

05 Jun 12

Hi Daniel,

Great to hear it worked out for you!
Thanks for letting us know.

Regarding the documentation, Ninja Shadowbox needs to be assigned to an existing module position available from the default (current) template in order to work correctly. Normally it does not render a blank box but more likely an empty module. If an empty module is rendering a white space (or blank box) on that particular position then this is caused by the template's CSS. This happens often when a template has fixed widths and heights for it's module positions. Most of the time this can be solved by assigning Ninja Shadowbox to a position other than left or right positions or any other side-bar-like positions. For instance an user-, bottom-, footer position, or even the debug position will do fine.

I hope this clarifies some more.

You are welcome, Daniel.
If you need further help with Ninja Shadowbox in the future don't hesitate to ask.

Cheers,
John

05 Jun 12

One more annotation regarding the documentation: "google.com" is given as example to show how to show a webpage in the lightbox.

However - this does not work as Google does not allow its page to be shown in the frame.

Took me a while to figure it out. Firefox just gives back a blank page. Opera gave a better feedback.

I think it would be good to update it in the documentation.

Cheers,
Daniel

06 Jun 12

Thanks for your feedback, Daniel.

I think it's not because Google allows it or not, I think it's just because the shadowbox script is outdated and therefor needs to be renewed. But unfortunately due to policy reasons, Ninjaforge isn't entitled to update the famous shadowbox script.

But you are right, there are some points in the docs that might need some attention.

Cheers,
John