The Joomlashack Blog

Creating a New Joomla Offline Page

Written by Steve Burge Steve Burge
Published: 24 July 2010 24 July 2010

This is Part 3 of a series of tutorials on Joomla's 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:

Joomla Offline Page

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="/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')) : ?>
all the way down to: 
<?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.