Removing header & footer to create a coming soon page

I know theres been a few questions on this topic but ive tried to use some of the CSS in those posts but it doesnt seem to work for me.

Im using 7.1 and my site isnt live just yet. Ive still got a few things before i can publish the site.

My issue is my domain is transferring over today so i want to create a simple "Coming Soon" page. Ive created this page just using a simple blank page from the template pages. Problem is this page has the header + links and the footer + links which i dont want my clients to see just yet. Once im ready ill delete this page and link all my site pages so its live.

Can anyone give me simplest way of doing this please? Will i just add the code provided into this specific page settings / advance / page header code injection? Or will it need to be added in the site wide CSS section?

Also do i have to set this "Coming Soon" page the home page while i use it as the coming soon page?

I cant give anyone a link to the website as its not live/published yet, hope this isnt crucial for this help?

Thanks in advance.

The easiest way is to set a site password. When you do this, a 'lock screen' will be created. The lock screen will prevent visitors seeing your header, footer and other page content. All they'll see is the lock screen.

You can customise the lock screen by following this guide: Designing a lock screen. 

  If this helps you, please click "Like" below  ⬇️

23 minutes ago, paul2009 said:

The easiest way is to set a site password. When you do this, a 'lock screen' will be created. The lock screen will prevent visitors seeing your header, footer and other page content. All they'll see is the lock screen.

You can customise the lock screen by following this guide: Designing a lock screen. 

  If this helps you, please click "Like" below  ⬇️

Thanks for this but ive tried this and the lock screen is very very restrictive in 7.1. Ive been able to add a background image but then little else. There no option for changing fonts and etc, it seems theres only options for styling the password box which i dont even want.

Ideally im after custom CSS so im able to hide the header and footer on one specific page which ive already designed. 

I found this CSS code which ive tired putting into the specific page code:

<style>
 #header, #footer { display: none }
</style>

This hides the header on the page i want but doesnt hide the footer for some reason. If i could hide both it would be perfect.

Thanks for the reply though. 

20 minutes ago, NaviTavern said:

<style>
 #header, #footer { display: none }
</style>

This hides the header on the page i want but doesn't hide the footer for some reason. If i could hide both it would be perfect.

On 7.1, instead of #footer, you can either use footer (without the #) or #footer-sections.

Note that the rest of your site will still be accessible if there's no site password.

9 minutes ago, paul2009 said:

On 7.1, instead of #footer, you can either use footer (without the #) or #footer-sections.

Note that the rest of your site will still be accessible if there's no site password.

Amazing!!!! Removing the # from before the word footer and header worked 😉 

Thank you so much!!