Miscellaneous of OpenCart: Broken glass 404 error page

A 404 error indicates that the client was able to communicate with the server, but the server could not ﬁnd what was requested. In this recipe, we will create a customized 404 error page: a page that appears when a user types a non-existing page of a website. We will place some images along with navigational links on the error page.

1. Getting ready

We open the not_found.tpl ﬁle under the Catalog\view\theme\shop\template\ error.

2. How to do it…

Let’s list the steps required to complete the task:

First, we will create the HTML structure of the We’ll replace the existing code of the not_found.tpl ﬁle with the following code:

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title>Your Store</title>

</head>

<body>

//…

</body>

</html>

In the css stylesheet, we ﬁrst reset the browser styles with the following code:

@charset “utf-8”;

/* Default Values */ a {

outline: none;

}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,te xtarea,p,blockquote,th,td {

margin:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,img {

border:0;

}

address,caption,cite,code,dfn,em,strong,th,var {

font-style:normal;

}

ol,ul {

list-style:none;

}

caption,th {

text-align:left;

}

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:normal;

}

q:before,q:after {

content:”;

}

abbr,acronym {

border:0;

}

object {

outline:none;

}

q {

display:block;

}

q:before, q:after {

content:””;

}

We have set the reset styles; now, we will apply general styling:

/* General layout values */

html {

height:100%;

}

body {

height:100%;

background-color:#010e16;

margin: 0;

padding: 0;

font-family: Arial, Helvetica, sans-serif;

color:white;

}

In the body section, we place the following content:

<p class=”lead”><strong>Grats.</strong> You broke it.</p>

<p>This page doesn’t exist or some other horrible error has occurred.</p>

</div>

In the browser, we can see our 404 page as this:

To change the font style, we are using the following font property:

p.lead {

font:22px/1.964 ‘Century Gothic’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Verdana, Arial, Helvetica, sans-serif;

}

This brings the following changes:

Let’s apply some colour to the texts:

p.lead {

font:22px/1.964 ‘Century Gothic’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Verdana, Arial, Helvetica, sans-serif;

letter-spacing:-1px;

color:#77cff1;

}

Let’s look at the browser:

Then, apply some margin to it:

p.lead {

font:22px/1.964 ‘Century Gothic’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Verdana, Arial, Helvetica, sans-serif;

letter-spacing:-1px;

margin:20px 0 1.964em;

display:block; color:#77cff1;

}

We will go to the browser to ﬁnd the following changes:

To the strong HTML tag, we apply this style:

p.lead span {

display:block;

padding:.982em 0 0;

}

p.lead strong {

font-size:28px;

line-height:1.179;

}

p.lead sup {

font-size:.5em;

}

Then, the texts appear as the following:

In the gratz class, we are going to use the following styling for the positioning:

.gratz {

position:absolute;

top:440px;

right:180px;

text-align:right;

z-index:116;

}

So, we ﬁnd the position as this:

Again, for the styling of the fonts, we apply the following style on the gratz class:

.gratz p.lead {

font-size:36px;

margin:0 0 5px;

}

.gratz p.lead strong {

font-size:36px;

}

.gratz p {

font:12px Arial, Helvetica, sans-serif;

color:#82B8CB;

margin:0;

}

And, in the browser, we ﬁnd this:

We now add some HTML wrapper to the gratz There is some inline css styling, you can place them in the master.css also:

>Grats.</strong> You broke it.</p>

<p class=”lead”><strong

<p>This page

doesn’t exist or some other horrible error has occurred.</p>

</div>

Here is the gif:

Now, we need to use some styling properties on these classes:

.brokennavcontainer {

background:url(../image/gratz.jpg) 50% 0 no-repeat;

height:575px;

z-index:110;

margin:0 auto;

position:relative;

text-align:center;

}

Here is the gratz image:

We have to use the following extra styles for the above mentioned classes:

.brokennavcontainer {

width:954px;

height:572px;

left:0;

position:absolute;

top:0;

left:0;

z-index:117;

}

.brokennavloc {

background-position:50% 0;

background-repeat:no-repeat;

}

.brokennav {

width:954px;

height:552px;

top:0;

z-index:111;

margin:0 auto;

position:relative;

}

These styles bring the following changes to our 404 page:

We add two more classes on the So, the code block becomes the following:

>Grats.</strong> You broke it.</p>

<p class=”lead”><strong

<p>This page

doesn’t exist or some other horrible error has occurred.</p>

</div>

For the shatter1 and shatter2 classes, we will use some images in the Find some broken glass images on the Internet. We will use two broken glass images. First, for the shatter1 class, we use the following style:

.shatter1 {

width:674px;

height:549px;

left:-40px;

z-index:110;

top:0px;

background-image:url(../image/shatter1.png);

position:absolute;

}

We ﬁnd the status of our page as this:

Then for the shatter2 class, we also have another image:

.shatter2 {

width:262px;

height:285px;

right:0px;

z-index:109;

top:348px;

background-image:url(../image/shatter2.gif);

position:absolute;

}

With the two images, the page appears like the following:

Now, we will add footer after the subheader div on the First, we will see the HTML structure of the page:

<a href=”#”>Press</a>

<a href=”#”>Career Opportunities</a>

<a href=”#”>Privacy Policy</a>

<a href=”#”>Contact Us</a>

<a href=”#”>Sitemap</a>

</div>

</p>

</div>

With the footer, our 404 page becomes the following:

We positioned our footer with the following code block:

.footercontainer {

background-repeat: no-repeat;

background-position: top center;

background-color: #010E16;

width: 100%;

height: 90px;

padding: 80px 0 0 0;

}

This moves the footer to the following position:

Now, we will beautify the footer with the following styles:

.footer {

clear: both;

margin: 0 auto;

width: 980px;

}

.footer .footercontents {

width: 100%;

clear: none;

height: 60px;

}

.footer .footercontents .footercontents_int {

color: #FFF;

font-size: 11px;

text-align: center;

}

The above styles make our footer look like this:

For the footer navigation, we use the same styling to separate its contents:

.footer .footercontents .spacer {

color: #012839;

font-size: 13px;

padding: 0 5px 0 5px;

}

The footer navigation changes as the following image shows:

To complete our footer styling modiﬁcation, we add some colour to the copyright texts:

.footer .footercontents .links {

font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;

line-height: 14px;

display:inline;

}

.footer .footercontents .dark {

color: #bbb;

font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;

line-height: 14px; margin: 0;

}

Then, this section appears as the following when we refresh our browser:

3. How it works…

We have used some background images for the 404 page. We then used z-index for those images. We added styling properties to our page to make it look eye catching.

There are many different designs for the 404 page. Also, you can use your imagination to make your own 404 page.

4. See also

⯈ Sitemap creation.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.

Opencart

Miscellaneous of OpenCart: Broken glass 404 error page

1. Getting ready

2. How to do it…

3. How it works…

4. See also

Leave a Reply Cancel reply

1. Getting ready

2. How to do it…

3. How it works…

4. See also

Leave a Reply Cancel reply

Login