"Website is under construction" overlay

17/07/2017

Recommended method: 

It's better to recommend users to lock the front page (even for free users), and edit the page for user login. This way there won't be any codes that the user has to edit, and the user will be able to easily maintain the website. Users will have to be approved manually by default, so the user doesn't have do change anything else in the settings.

I won't delete the code, so if you still want to offer this to the user, you can still do that:

<style>
    body {
        overflow-y:hidden;
    }
    .contruction-overlay {
        position: fixed;
        z-index: 999;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, .95);
    }
    .construction-content {
        margin: 10%;
    }
    .construction-content h1, .construction-content p {
        color: #fff;
    }
</style>
<div class="contruction-overlay">  
    <div class="construction-content">    
        <h1>Website under construction</h1>    
        <hr>    
        <p>Send an e-mail to user@adress.com if you have any questions</p>  
    </div>
</div>

Here's a preview of what it looks like. Click the image to go to the live project:

You should add this code to PAGES > Homepage > SEO-settings for page.

If you are sending the code to a user, send him either a .txt file with the code or a link to the code. This is because you cannot send HTML-code via Kayako. You can use pastebin.com if you want to upload the code.

Check out the presentation here