RocketTheme - TOPIC: 404 - Custom Error page in Gantry 5

Welcome Guest! Login

0 items Join Now

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

404 - Custom Error page in Gantry 5

Posted 9 years 1 week ago

Gantry 5 has made it super-easy to create your own custom 404 error page.
To start create an article that you will use as the content for the error page:

<div style="text-align: center;">
    <img src="images/headers/404crikey.jpg" alt="" class="pull-center" />
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<h3 style="text-align: center;">I TOLD you George...</h3>
<h3 style="text-align: center;">We should have taken a
    <span style="font-size: 150%; color: red;">LEFT</span>at the Last Hyperlink!!!
</h3>

On your site create a temporary menu item to view your 404 article. Make any corrections you need to the article. Using something like Chrome Developer Tools - Inspection Tool to copy the relevant part of the HTML that will be used in a bit. Remove the menu item.

Viewing the error page with my Inspection Tool this is the relevant code needed:

<div class="g-container">
  <div class="g-grid">
    <div class="g-block size-100">
      <section id="g-mainbar">
        <div class="g-grid">
          <div class="g-block size-100">
            <div class="g-content">
              <div class="platform-content">
                <div class="item-page" itemscope="" itemtype="https://schema.org/Article">
                  <meta itemprop="inLanguage" content="en-GB" />
                  <div class="page-header">
                    <span></span>
                  </div>
                  <div itemprop="articleBody">
                    <div style="text-align: center;">
                      <img src="/Salient/images/headers/404crikey.jpg" alt="" class="pull-center" />
                    </div>
                    <h3 style="text-align: center;">I TOLD you George...</h3>
                    <h3 style="text-align: center;">We should have taken a 
                    <span style="font-size: 150%; color: red;">LEFT</span> at the Last Hyperlink!!!</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

In the Salient template I used to create this guide the main Gantry 5 Error content is in the Feature Section of the Error-Outline so I just used that Section. It has been set with a background image so that needs to be removed. Go to -> Error-Outline -> Feature Styles -> Background Image -> NONE.

If your Gantry 5 template doesn't have this field you can use CSS to remove an unwanted background image:

section#g-feature {
    background: none;
}

In your Feature Section if there isn't an existing grid then create a new one and drag a Custom HTML particle into it. Open the particle settings and paste in the relevant code from above.

The last thing to do is that Joomla will output it's own error content in the MainBody. So in the Error-Outline "power off" any Page Content Particle's.

Now when a user inadvertently navigates to an invalid link they will see your custom page:

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

Last Edit: 9 years 1 week ago by DanG.

#1286866

Time to create page: 0.066 seconds