Jump to content
Sign in to follow this  
cornell2

Special "Splash" Page

Recommended Posts

cornell2

Again - not exactly a platform pro question (except that it is probably custom css) ... Say, for instance I have a page with 6 boxes that contain text and links, or perhaps merely the blog-posts page ... I want to display a large nearly full page semi-transparent graphic that says "coming soon" ... such that visitors can see the underlying content but not click through to any of the underlying links. But I do want them to be able to click on the nav menus. I can think of a couple of ways to do this - but one challenge is that I don't want this "splash" graphic to *ever* interfere with the nav bar (no matter what the platform or how the browser window is scaled down) I was just curious if anyone has done something like this, or of there were any features in platform pro that might make this easier Thanks!

Share this post


Link to post
Share on other sites
catrina
I've never done this before but with CSS it's possible to position your semi-transparent image over the content and control its opacity. The challenge you mentioned will require a lot of playing around with the positioning properties (absolute vs. relative).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cornell2
Yes, I don't mind tweaking the positioning - but I am having trouble with figuring out how to use relative position with the position of the navigating bar (in CSS) ... e.g. making the positing-top of the image always be relative to the bottom of the navigation bar....

Share this post


Link to post
Share on other sites
cornell2
I think i got it. Still have to test on other screens and browser/windows: [url]http://metapreneurship.net/the-book/[/url] The last box in the box-set contains the html displaying the big image. The Custom CSS: [code]#fbox_3413 .fboxinfo { position:absolute; left:250px; top:155px; width: 1100px;height: 2600px; border: none; padding: 0 0 0 0px; background: none; box-shadow: none;} #fbox_3413 img {opacity:0.75; filter:alpha(opacity=75); } [/code] If you think there's a more efficient way, please LMK.

Share this post


Link to post
Share on other sites
cornell2
Actually it was not correct on IE and failed badly when I resized ... so I just changed it to relative positioning and it seems to work OK (you may have tried it after I changed it) [code]#fbox_3413 .fboxinfo {width: 1100px;height: 2600px; position:relative; left:-733px; top:-2100px; border: none; padding: 0 0 0 0px; background: none; overflow:hidden; box-shadow: none;}[/code] Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×