How to display own code over site.theme content?

[in2harmony]

Hi, I have a site.theme that is displayed at the top of each page of my website. This includes a row of buttons to navigate round the site. I am currently working on a new page which is predominately my own code. Part of this is a pop up login box that needs to display over the headings. So the Visual HTML container needs to overlap the site.theme (otherwise the login box would be outside my container). This all works fine for my code but although the buttons across the top are visible they are no longer actionable.

I've tried bringing the various elements in the site.theme page all to the front (using the Antenna "Move to Front" menu option and I've tried setting the z-index of my elements to negative values. Neither of these seem to have worked.

I could put the actual code for the headings/buttons in the Visual HTML rather than using the site.theme on this page but that would really defeat the object of using Antenna to quite a high degree!

Anyone got any suggestions?

Thanks for taking the time to read this.

[J]

Hi in2harmony,

Give this a try:

- On your site.theme page, place your navigation buttons on a separate layer above the rest of the site.theme design i.e. Layer1 then Layer2 (Buttons).
- In the Layers palette, rename your buttons layer to start with a ^ symbol (e.g. ^Layer2).

The ^ symbol tells Antenna to always float that particular layer to the top. So on your new page the buttons layer should float to the top above the other layers automatically.  The result is your navigation buttons sit on top and should no longer be masked by the Visual-HTML container.

Any joy?

Cheers,
J

Usual ordering:
Layer1 Visual-HTML
Layer2 Buttons (from theme)
Layer1 Design (from theme)

New ordering:
^Layer2 Buttons (from theme)
Layer1 Visual-HTML
Layer1 Design (from theme)

[in2harmony]

Thanks for the steer, J. Unfortunately although the buttons now work fine, my popups sit behind the buttons.

However, I've never used Layers before, so will look in to what else I could do utilizing them or might have a look at the code that Antenna creates and see if I can adapt my Visual HTML or Scripts to get what I want.

Thanks again.

In2Harmony

[J]

In case it proves useful for popups, you can switch layer visibility off and on - in Antenna and in Events code, such as a mouse-click:

[#Layer3].style.visibility='visible';

If you select items from the menus in the Code Editor, Antenna can almost write the code for you.

Cheers,
J

[in2harmony]

Thanks again J - using the Layers as you suggested in your first answer and then just increasing the z-index: in the style for the PopUp (when it's active), seems to get the result that I wanted.

I will have a look at the Code Editor as well for future reference.

Thanks again - very helpful and clear.