RocketTheme - TOPIC: Integrating Gantry error page into a non-error page Template

Welcome Guest! Login

0 items Join Now

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

Integrating Gantry error page into a non-error page Template

Posted 11 years 3 months ago

In this guide we'll create a custom 404 error page for our earlier J2,5x templates that didn't incorporate this feature.

In this example we will use Modulus as our template. Basically anywhere you see rt_modulus you would substitute the modulus part with your template name.

From the attached error.zip file, extract error.php and place it in your [ROOT]/templates/rt_modulus folder.

Make a copy of your [ROOT]/templates/rt_modulus/templateDetails.xml file and then insert this code in the original:

 
<filename>error.php</filename>

so that it looks like this:

This image is hidden for guests.
Please log in or register to see it.

Copy the attached image, gantryrocket.png (you may use your own) to your [ROOT]/templates/rt_modulus/images folder.

Then in your gantryrocket.png (you may use your own) to your [ROOT]/templates/rt_modulus/css folder create a file called rt_modulus-custom.css

Insert this styling code in your rt_modulus-custom.css <-{Click the LINK} file add this:

 
/**
 * @package   Modulus Template - RocketTheme
 * @version   1.9 November 11, 2013 $Id: rt_hadron-custom.css 17042 2013-12-17 18:41:54Z DanG $
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2013 RocketTheme, LLC
 * @license   http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
 */
 
/* CSS for custom 404 error page */
.rt-error-rocket {
  width: 350px;
  height: 315px;
  float: left;
  background: url(../images/gantryrocket.png) 0 0 no-repeat;
  margin-right: 15px;
  margin-top: 15px;
}
.rt-error-content {
  margin-left: 365px;
  margin-top: 15px;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .rt-error-rocket {
    width: 320px;
    background-size: 320px;
  }
  .rt-error-content {
    margin-left: 335px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .rt-error-rocket {
    width: 280px;
    background-size: 280px;
  }
  .rt-error-content {
    margin-left: 295px;
  }
  .error-title {
    font-size: 1.8em;
  }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
  .rt-error-rocket {
    width: 280px;
    height: 260px;
    margin: 0 auto;
    background-size: 280px;
    background-position: 50% 0;
    float: none;
  }
  .rt-error-content {
    margin-left: 0;
  }
  .error-title {
    font-size: 1.8em;
  }
}
@media only screen and (max-width: 480px) {
  .rt-error-rocket {
    width: 260px;
    height: 240px;
    margin: 0 auto;
    background-size: 260px;
    background-position: 50% 0;
    float: none;
  }
  .rt-error-content {
    margin-left: 0;
  }
  .error-title {
    font-size: 1.6em;
  }
}

#1049444

Time to create page: 0.089 seconds