Creating A Custom Drupal Maintenance Page
It happens to every drupal admin. You have your site up and running smoothly. But now you have have to make a change to your site. One that is best done in maintenance mode. Maybe your updating your drupal install to a new version. Maybe your installing some new module. Maybe your moving your site from one server to another. Or any number of other things. Your ready to switch to maintenance mode but you don't want that default look. You want something custom that matches the rest of your site. Here's what you can do.
If you've ever switched into maintenance mode you have seen a page that looks something like:
While, I love the drupalicon as much as the next drupaler I want my own custom look on this page. First, we have to create a function in our phptemplates template.php file. This maintenance page is created by the function theme_maintenance_page so we need to create the function phptemplate_maintenance_page. Lets start with the theme_maintenance_page function and modify if for our needs. Here is my first pass at changes:
<?php
function phptemplate_maintenance_page($content, $messages = TRUE, $partial = FALSE) {
drupal_set_header('Content-Type: text/html; charset=utf-8');
drupal_set_html_head('<style type="text/css" media="all">@import "'. base_path() . drupal_get_path('module', 'system') .'/defaults.css";</style>');
drupal_set_html_head('<style type="text/css" media="all">@import "'. base_path() . drupal_get_path('module', 'system') .'/system.css";</style>');
drupal_set_html_head('<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/maintenance.css";</style>');
drupal_set_html_head('<link rel="shortcut icon" href="'. base_path() .'misc/favicon.ico" type="image/x-icon" />');
$output = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n";
$output .= '<html xmlns="http://www.w3.org/1999/xhtml">';
$output .= '<head>';
$output .= ' <title>'. strip_tags(drupal_get_title()) .'</title>';
$output .= drupal_get_html_head();
$output .= drupal_get_js();
$output .= '</head>';
$output .= "<body>";
$output .= '<div id="wrapper">';
$output .= '<img src="http://www.mattfarina.com/'.base_path().path_to_theme().'/header.jpg" alt="site header" />';
$output .= '<div id="content">';
if ($messages) {
$output .= theme('status_messages');
}
$output .= $content;
$output .= "</div>";
$output .= "</div>";
$output .= "</body></html>";
return $output;
}
?>Note: The usual phptemplate variables from the page.tpl.php file don't work here.
The first change I made was to change the path to the maintenance.css file. Instead of the /misc/maintenance.css I told it to load /path/to/my/theme/maintenance.css. This custom file holds the css for my maintenance page. It is loaded into the head in this function:
<?php
drupal_set_html_head('<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/maintenance.css";</style>');
?>The rest of the changes were between the body tag and the close of the body and html tags where I changed the layout of the body. You'll notice that I have my own header image being loaded and the page is themed by my css file.
The output of this change is a page that looks like:
This all requires some PHP coding skills and a little knowledge of some drupal functions. Most of the ones you want you see here and all of them can be found at http://api.drupal.org.
One last warning is to create and test this function on a test site, even if you have a live site for this already. If there is something wrong with the function the whole site won't load.
And the sun rises and sets on another day of happy drupal theme customizations.
Comments
#1 Another Way
Hmm...I wish I could remember how I did this....But in the past, I simply was able to modify the entire maintenance page by just using CSS...not need for all the php stuff.
As just a guess, I'm thinking I simply put my page content (including all the tags) into the maintenance text box and styled using the maintenance.css file. Simple and straightforward.
#2 Don't Hack The Core
If you did anything to change the css you could have had to hack the drupal core maintenance.css file. So, if you upgraded your drupal installation that file will be replaced unless you make the point to back it up and replace it again. Oh, and you account for other changes in core. All around it's a bad idea.
Doing something like this makes it theme specific (Every theme can have it's own maintenance page) and makes for no changes to core (easier maintenance).
#3 Not true...
Nope, not true.
I didn't touch the core files when I did it...just added a maintenance section into my theme style.css to override anything I needed to do on the maintenance page. That kept it specific to the theme and made upgrading no problem at all...
#4 Nope... not quite
That's not quite the case. Your themes style.css file is not loaded on the maintenance page. So, that couldn't have been the case.
The maintenance page is different than other pages. It is not tied to your theme at all unless you override it with something like what is provided here.
#5 Interesting..
Hmm....
Interesting....because I know I did something like this and remember being careful not to touch any core files...but alas, maybe I broke down and modified the maintenance.css, can't remember.
#6 maintenance-page.tpl.php
I remembered doing something with just a tpl file so I did some research and came up with this http://drupal.org/node/195435
You just uncomment a few lines in the settings.php and make a maintenance-page.tpl.php file and your done.
#7 Thanks!
Thanks for the right up! This is exactly what I needed for a site I'm working on and works great.
#8 that would be *write up!*
that would be *write up!* (not right up)
#9 I also suggest having a look
I also suggest having a look at this example on drupal.org.
http://drupal.org/node/58562#comment-266358