0
Welcome Guest! Login
0 items Join Now

Integrating Gantry error page into a non-error page Template

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3226
    • Custom work done

    Integrating Gantry error page into a non-error page Template

    Posted 6 years 5 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;
        }
      }
       

Time to create page: 0.073 seconds