Styles and images in app_offline.htm file

Display elegant maintenance page while you are upgrading your website

From time to time we all need to do some maintenance to our websites. ASP.NET has nice integrated feature to put your website online while you are updating files and libraries. Simply add static app_offline.htm file to your root folder and visitors will see the message while you are upgrading.

However there is a small problem with app_offline.htm. When you add it to your website, it will take the whole application down, meaning that non of the resources will be available.

That sucks especially if you want to add some nice looking content to your page.

There is one rule for that which is keep everything in your app_offline.html file.

This means not only styles and scripts but images too.

1. Include CSS styles withing <style> tags

Although it is not a good practice nor it is encouraged by Google, this is only for the one specific file in your website, so keep all the styles you want to apply to your app_offline.htm

2. Include JavaScript file code inside <script> tags

This is also not a good practice for any page on your website, but since this is unique page and there is only one in the entire website you should do this.

3. Use base64 serilalized image content

Since nothing in the website is accessible, access to images is also restricted, so the only way to use images it to serialize them to base64 string. There are bunch of tools online which provide this.

App Offline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css">@font-face {font-family: "Open Sans";font-style: normal;font-weight: 400;src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}body {font-family: "Open Sans";}h1{font-size: 90px !important;}.error-page-container {color: #333333;margin: 50px auto 0;text-align: center;
            width: 600px;
        }

            .error-page-container h1 {
                font-size: 120px;
                font-weight: normal;
                line-height: 120px;
                margin: 10px 0;
                font-family: "Open Sans";
            }

            .error-page-container h2 {
                border-bottom: 1px solid #CCCCCC;
                color: #666666;
                font-size: 18px;
                font-weight: normal; /*text-transform: uppercase;*/
                font-family: "Open Sans";
            }

            .error-page-container a {
                text-decoration: none;
                color: #ffffff;
                background-color: #009AD7;
                padding: 11px 19px;
            }

                .error-page-container a:hover {
                    text-decoration: none;
                }
    </style>


    <title>
        Under Maintenance
    </title>
</head>
<body>
    <div class="error-page-container">
        <h1>Maintenance</h1>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM...." alt="" />
        <h2>
            <p>Website is under maintenance right now. It will be back in few minutes.</p>
        </h2>
        <br />
        <a href="/">Try again</a>
    </div>
</body>
</html>

This is app_offline code of this website which uses this 3 key steps approach to display decent looking maintenance page.

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN