Preferred Platform:

Gantry has built-in CSS and javascript compression tools allowing for fewer page requests and also adds compression for maximum page optimization. Find out more...

Home DocumentationJoomlaTutorialsCreating an IE6 Unsupported Page

Creating an IE6 Unsupported Page

This tutorial will take you through the steps needed to create an IE6 unsupported page functionality as used here on gantry-framework.org. You can see what this looks like by pointing your browser to: http://www.gantry-framework.org/?tmpl=unsupported. IE6 users are automatically taken to this page whenever they try to access a page on gantry-framework.org.

Unsupported Browser

Step 1: IE6 Redirect Feature

The logic for this IE6 Unsupported page is powered by a custom feature that we've called ie6redirect.php in this instance. This is a custom feature that we create and drop into the template's features/ folder. The code is very simple as you can see below: 

<?php
/**
 * @package     gantry
 * @subpackage  features
 * @version     ${project.version} ${build_date}
 * @author      RocketTheme http://www.rockettheme.com
 * @copyright   Copyright (C) 2007 - ${copyright_year} RocketTheme, LLC
 * @license     http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 *
 * Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
 *
 */

defined('JPATH_BASE') or die();

gantry_import('core.gantryfeature');
/**
 * @package     gantry
 * @subpackage  features
 */
class GantryFeatureIE6Redirect extends GantryFeature {
    var $_feature_name = 'ie6redirect';
    
    function isEnabled() {
        return true;
    }
    function isInPosition($position) {
        return false;
    }
    function isOrderable(){
        return true;
    }
    
    function init() {
        global $gantry;
        
        if (JRequest::getString('tmpl')!='unsupported' && $gantry->browser->name == 'ie' && $gantry->browser->shortversion == '6') {
            header("Location: ".$gantry->baseUrl."?tmpl=unsupported");
        }
    }
}

The feature is actually very simple, but let's break it down into parts so you can get a feel for how it works:

isEnabled()

The isEnabled() method is set to true because we are effectively forcing this feature to be enabled. We don't need any user interaction to toggle this functionality although that could easily be added by adding a simple bit of XML in the templateDetails.xml if needed.

isInPosition()

The isInPosition() method is set to false because this feature is not intended to be treated like a module and placed in a module position. It is purely some logic that just needs to run without any rendering output.

isOrderable()

As you can see isOrderable() is set to true. This is so that this feature will show up in the Advanced section of the template details in the Feature Order list. You probably want to drag the "ie6redirect" feature to the top of the list to ensure that it runs first and doesn't waste time processing other features if your going to be redirected anyway.

init()

This is where the logic actually happens. This feature does not need to display anything, so the render() method is not implemented. The init() method is the better place for any non-rendering functionality and as you can see here, there is just a simple if statement to ensure that we are not already on the unsupported page, the viewing browser is ie, and the short version is 6. This ensure that only IE6 browsers will enter the if statement, and redirect the browser to the ?tmpl=unsupported.

Step 2: Unsupported tmpl file

As you saw at the end of Step 1, we've redirected IE6 users to ?tmpl=unsupported, but what does this mean? We are going to take advantage of a little-known feature in Joomla 1.5 that allows you to change the 'index' file used when rendering a page. By default, Joomla looks for index.php inside your template folder, however if you pass another name in via the 'tmpl' request variable, for example, ?tmpl=unsupported, Joomla will look for a file called unsupported.php and use this rather than index.php to render the page.

The unsupported.php is basically a stripped down version of our existing index.php file as you can see below:

<?php
/**
 * @package Gantry Template Framework - RocketTheme
 * @version @VERSION@ @BUILD_DATE@
 * @author RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - @COPYRIGHT_YEAR@ RocketTheme, LLC
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 *
 * Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
 *
 */
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );

// load and inititialize gantry class
require_once('lib/gantry/gantry.php');
$gantry->init();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>">
  <head>
    <?php 
        $gantry->displayHead();
        $gantry->addStyles(array('template.css','joomla.css','unsupported.css'));
      ?>
  </head>
  <body <?php echo $gantry->displayBodyTag(); ?>>
    <div id="rt-header-surround">
      <div id="rt-header">
        <div class="rt-ruler-top">
          <div class="rt-container">
            <div class="rt-grid-12 rt-alpha">
              <div class="rt-block">
                <a href="/" id="rt-logo" name="rt-logo"></a>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="rt-main-surround">
      <div id="rt-main-overlay">
        <div id="rt-main" class="sa3-mb9">
                  <div class="rt-container">
            <div class="rt-grid-8 rt-push-2">
              <div class="rt-block">
                <h1>Unsupported Browser</h1>
                    <p>
                  You are using a browser that is not supported by this website.  That probably means your browser is woefully out of date, insecure, and just generally lacking in standards.  Luckily for you there are literally 10s of modern, standards compatible browsers available to you at no cost.  All you need to do is simply take the time to install one. </p>
                <p>
                We suggest installing the latest version of <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Safari</a>, heck, even <a href="http://www.opera.com/">Opera</a> would be a better option.  
                </p>
                
                <p class="note">NOTE: Even though Internet Explorer 8 is an improvement on version 6 and 7, we cannot in good conscience recommend it.  It's a pretty poor browser, with many rendering bugs, and poor JavaScript performance.</p>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        </div>
      </div>
    
    <div id="rt-footer">
      <div class="rt-container">
        <div class="rt-grid-12 rt-alpha rt-omega">
          <div class="rt-block">
            <a href="http://www.rockettheme.com" class="created-by-rockettheme"></a>
            <div class="rt-copyright-text">Copyright &copy; 2009-2010 RocketTheme, LLC - All Rights Reserved<br />
              <a href="/documentation/joomla/basics/license-and-usage">License &amp; Terms of Service</a>
            </div>
            
            <a href="http://www.gantry-framework.org" class="powered-by-gantry"></a>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    
    <div id="rt-footer-shadow"></div>
  </body>
</html>
<?php
$gantry->finalize();
?>

Basically we've removed all the extraneous module calls, and left the page in a basic hard-coded state. You could of course keep some of the module positions if needed, but we opted for the simple approach and kept the output as basic as possible while still offering the feel of the regular gantry-framework.org site.

Step 3: Tweaking and Testing

At this point you should have a fully functional feature. To test it out in your regular browser, you can just point it to http://YOUR_SITE/?tmpl=unsupported, and it should show you the new page based on the unsupported.php file you created. You should tweak and optimize this output to suit your needs. We kept ours pretty similar to our regular page, and even included our regular template.css and joomla.css files, but we also added a new unsupported.css file that has some styling that is only needed on this page. You can see these in the addStyles() method in the unsupported.php file listed above.

After you are pretty happy with the way this looks the last step is to actually test and fix it so that it looks correct in IE6. You should be able to point your IE6 browser directly at your site: http://YOUR_SITE and it should redirect you automatically to the unsupported page you have been working on. Just tweak and adjust your css as needed to ensure that things look correct in IE6, as this is the only browser that really sees the page.

That's it! Pretty easy right?