Thứ Ba, 22 tháng 3, 2011

Quick and Dirty “Site Down” Page with CSS

Quick and Dirty “Site Down” Page with CSS

Tags:
Recently while updating a client’s site, I needed to put up a quick “Site Down for Maintenance” page for the 15mins that it was down for. There are ways to redirect all pages to a custom “Site Down” page using the .htaccess file, but I was in a bit of a rush and time constraint to set this up, so I decided to do this the quick and dirty way.

The Quick and Dirty Method

First let’s start by creating your “Site Down for Maintenance” image, or if you are in a rush or simply just lazy, you can download the simple one I made.
When creating the Site Down image, always be sure to point out why they are getting the message, the time frame your site will be down for, and it also might be helpful to add a phone number or email address for customers who need immediate assistance.

The CSS

What I did was simply hide the current content of the site, and only display a “Site Down” message as a background.
html {
 height: 100%;
 background: url(sitedown.gif) no-repeat center 50%;
 margin: 0;
}
body {
 display: none;
}
To avoid style conflicts, be sure to add this at the very bottom of your styles. (Technically you can just place this below your html/body classes.)

Conclusion

Again, this is for a quick and dirty way to get a temporary site down message. The obvious downside of this technique is that for people with images and css turned off, this will not work properly.
The correct way to do this (especially if the site is down for a long period of time) is to use the .htaccess file. Any suggestions for a more efficient solution will be greatly appreciated!

Related Posts

Không có nhận xét nào:

Đăng nhận xét