Your Ultimate Guide to Taking Joomla Offline

If you have a normal Joomla site setup, anyone can come along and visit. Anyone can browse around and see what you're doing.

However, what happens if you're building site for a client? You don't want the whole world to see. The same is true if you're developing a site for yourself and aren't ready to make it public.

Joomla Offline Pages for Beginners

To solve this, Joomla allows you to work on a site in private where only you (and your client) can see it.

It has a very nice feature that allows you to test your site in complete privacy. You might just need your site offline for a few minutes, you might want to show it privately to a client, or you might want to keep the site offline for weeks while you build it. Either way, this is a good solution.

Login To Your Joomla Site


Go to Global Configuration


Click on Site then Global Configuration

Site Offline


Set "Site Offline" to "Yes" and then click Save

Visit Your Site


Now when you visit the front of your site you'll see a screen like this. Anyone who has a Super Administrator, Administrator or Manager account can login and view the site as normal. Everyone else will only be able to see the splash. You can keep search engines, rivals and all other unwanted guests out of your site until you're ready.

If you'd like to take this one step further and customize your offline page with a new logo and text, read on:

Joomla Offline Pages for Intermediate Users

Video Showing How to Edit Your Joomla Site's Offline Logo


Step-by-Step Tutorial Showing Edit Your Joomla Site's Offline Logo

However, if you're expecting vistiors you might want to customize the login page so that it contains your logo and your information. Here's how to do it:

Change the Logo


The default Joomla offline page has a large Joomla logo and the message "The site is down for maintenance. Please check again soon."


In order to to start changing the page, go to the Administrator area of your website, click "Site" and then "Media Manager".


Click the red X next to the file called joomla_logo_black.jpg. We're going to delete that file so that you can upload your own.

Here's the thing ... you must make sure that the file you're uploading is also called joomla_logo_black.jpg. If it isn't yet, rename it.


At the bottom of your screen, click "Browse" to find the image on your desktop. Then click "Start Upload". If your image had uploaded successfully you should be able to visit the front of your site and see the new logo.


Changing the Text


If you'd like to change the text that appears on your offline page, go to Site >> Global Configuration and you can edit two area:
- Offline Message
- Site Name


Click Save when you're done and visit your new offline page:


Joomla Offline Pages for Advanced Users

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:

<img src="joomla_logo_black.jpg" alt="Joomla! Logo" align="middle" />

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

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

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

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

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.

This has been a guest post by Steve Burge from OS Training - Professional Joomla Training

Read 22171 times Originally published on Monday, 27 September 2010 09:00
Last modified on Monday, 27 September 2010 15:59
comments powered by Disqus