Creating a New Joomla Offline Page

This is Part 3 of a series of tutorials on Joomla's offline page:

• Part 1 (Beginner): Take your Joomla site offline
• Part 2 (Intermediate): Customize your Joomla offline page
• Part 3 (Advanced): Create a new Joomla offline page

Joomla allows a site to be taken offline with a setting in the Administrator Global Configuration panel.  When this happens, frontend access is no longer permitted and a special offline page is displayed. 

How is the Offline Page Created?

By default, the offline page is created from the System Template.  You'll find a file called offline.php in the /templates/system/ folder. The file itself is fairly straight-forward and can be divided into five parts:

Part 1. This single line provides error messages, for example if you try to login but enter the wrong information:

<jdoc:include type="message" />

Part 2. This places a Joomla logo on the page:

<div id="frame" class="outline">

<img src="http://www.ostraining.com/cdn/joomla_logo_black.jpg" alt="Joomla! Logo" align="middle" />

Part 3. This places your site name on the page:

<h1>
 <?php echo $mainframe->getCfg('sitename'); ?>
 </h1>

Part 4. This places an offline message on the page:

<p>

<?php echo $mainframe->getCfg('offline_message'); ?>
 </p>

Part 5. This final and longest part of the code places a login box. This code runs from:

<?php if(JPluginHelper::isEnabled('authentication', 'openid')) : ?>

<?php echo JHTML::_( 'form.token' ); ?>
 

Creating Your Own Joomla Offline Page

You could of course just edit the default offline.php but you'd lose any changes as soon you upgraded your Joomla site. The best way to do this is to create a file called offline.php in your template folder. Copy the following files:

• /templates/system/offline.php
• /templates/system/css/offline.css
• /templates/system/css/offline_rtl.css

and add those file to:

• /templates/your_template/offline.php
• /templates/your_template/css/offline.css
• /templates/your_template/css/offline_rtl.css

This will give you a platform to safely customize the files.