is it possible to either:

(1) Resize and shape the overlay so that it doesn't cover the whole page before bringing in the lightbox, or:

(2) apply a z-index above 10090 somewhere in a div or something to make (say) the primary links appear above the overlay and still active.

I tried changing it in page-front.tpl.php

            <div id="primary" style="z-index:10100;">
              <?php print theme('links', $primary_links); ?>
            </div>

but it didn't work.

CommentFileSizeAuthor
#1 Picture 1.png126.42 KBajlowndes

Comments

ajlowndes’s picture

ajlowndes commented
StatusFileSize
new Picture 1.png126.42 KB

well, i managed to make the primary links appear properly by adding this somewhere in my theme's style.css:

/*=============================
    Lightbox2 Overwrites
==============================*/

#overlay {
        position: fixed;
	top:30px;          /*same as height of primary links div */
}

effectively moving the overlay down so that it starts 30px from the top of the page. i would still like to display a logo on my main screen which displays above the overlay, but there will be one next to it that does not appear above the overlay. any idea how to do this? I am not sure whether changing the shape of the overlay to a polygon is possible...

will changing position to fixed instead of absolute like this have any untoward effects? I did it because it stops the horizontal scroll bar from appearing at the bottom...

ajlowndes’s picture

ajlowndes commented

hmm. position:fixed makes the overlay move with the scroll bar, so the bit at the top of the screen without overlay moves down the page as you scroll. i think the horizontal scroll bar that appears is a good compromise :)

ajlowndes’s picture

ajlowndes commented
Status: Active » Fixed

okay i found the missing piece of code. I initially thought that the primary links and the div that holds anything and everything lightbox were in different stack indexes. but the lightbox one was set to position:absolute, which if i understand correctly, is a (the) stack index. so I fixed what I want to happen by defining position:absolute to my primary links div as well.
of course I found that everything else (body, system messages etc) moved up behind the primary links. To get it back in the correct place I will just create a dummy div with the same size as the primary links, with no (i.e. default) z-index.

cheers for walking me through that one stella ;)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.