Modify the Joomla! "Site Offline" page

Joomla! comes with it's own Site Offline page which is displayed when the site is set to "Offline Mode" within the Joomla! Administration. This page can be easily customised with your own layout, logo and colours, so it represents a message which relates to your project.

This tutorial will explain how to customise your site offline page. Here are the steps:

Step 1 - Change the Site Offline Message

The site offline message can be adjusted by logging into your Joomla! Administration and going to the Global Configuration screen, located under the menu Site > Global Configuration

The changes you make within your offline message box will be shown on your offline page when your site gets set to this status.

Step 2 - Copy the offline.php file

Joomla! Templates offer an override system, which allows you to copy core Joomla! files and place them within your own template so you can customise them and these changes will not be affected when you upgrade Joomla!. Joomla! will always look for certain things in your templates folder first before using the system values, so it works perfectly for creating our own custom overrides.

Within your Joomla! file structure, navigate to the /templates/system/, within this system folder you will see a file called offline.php. Take a copy of this file, and navigate to the /templates/yourtemplate/ directory and copy the file to this location. We can now proceed to edit this file, knowing that the original will not be affected.

You will need to do the same for a file called offline.css, located within your /templates/system/css/ folder. Copy this and place it within your /templates/yourtemplate/css/ folder.

Step 3 - Edit the offline.php file

You can now edit these two files as you wish, changing the background colors, html layout of the page, logos etc to suit your Template or site design.