Overriding and customizing the look of your Joomla! website's offline page is pretty easy.

As you're probably already aware, the default offline page has 3 basic parts:

• An option to display an image.
• An option to display a custom message.
• A login form.

You can customize these 3 any way you want via CSS styles. Or maybe like me, you may want to remove one or all 3 from the offline page.

It's all possible, so let's get started.

STEP 1: Overriding The Default Offline Page

Whether you want to customize the default look of the offline page or you want to radically alter it, the first thing you need to do is copy 3 files to your template folder.

These 3 files are found here:

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

Place them in your template:

• /templates/your-template-name/offline.php
• /templates/your-template-name/css/offline.css
• /templates/your-template-name/css/offline_rtl.css

STEP 2: Pointing The CSS Links To The New Directory Path

The next step is to open the offline.php file you just copied to your template folder and find the following lines of code.

// Styles
  JHtml::_('stylesheet', 'templates/system/css/offline.css', array('version' => 'auto'));

  if ($this->direction === 'rtl')
  {
  JHtml::_('stylesheet', 'templates/system/css/offline_rtl.css', array('version' => 'auto'));
  }

  JHtml::_('stylesheet', 'templates/system/css/general.css', array('version' => 'auto'));

As you can see, the CSS stylesheet paths are pointing to the default templates/system/.. folder.

Change them to: templates/your-template-name/.. (where your-template-name is the name of your particular template).

They should now look like this:

// Styles
  JHtml::_('stylesheet', 'templates/your-template-name/css/offline.css', array('version' => 'auto'));

  if ($this->direction === 'rtl')
  {
  JHtml::_('stylesheet', 'templates/your-template-name/css/offline_rtl.css', array('version' => 'auto'));
  }

  JHtml::_('stylesheet', 'templates/your-template-name/css/general.css', array('version' => 'auto'));
  

STEP 3: Customize The New Offline Page

Now you can customize the default structure and components of the offline page or you can remove them all and redesign them the way you want!

Personally, if the project requires others viewing the site's frontend content while the site is offline, I leave the offline.php structure as is and just customize it via CSS.

This way, they can login and view the content on the frontend of the website.

If the project doesn't require me or anyone else logging in, while the site is under construction, then I remove everything and code the html of the page myself. In this case no login form is displayed.

STEP 4: Uploading The New Offline Page And Taking The Site Offline

OK, so after overriding and customizing the offline page, the next to last step is to upload it to your production environment (you know, the live server).

The final step is to take your Joomla! website offline in the backend:

• Login to the admimistrator page of you Joomla! site.
• On the top menu bar, click on Settings.
• Then, on the Settings drop menu, click on Global Configuration.
• In the Site tab, set "Site Offline" to "Yes" and then click "Save".