Monday, March 26, 2012

How To Change The Joomla! "Site Offline" page

Found an interesting article on changing Joomla's "Site Offline" Page instead of the regular page with the big Joomla logo. Thanks to http://www.connectage.com.

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.
Site Offline - Global Configuration

Step 2 - Copy the offline.php file

Site Offline Directory StructureJoomla! 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 colours, html layout of the page, logos etc to suit your Template or site design.
 

No comments: