Красивая страница 404 ошибки для OpenCart 3 (1 вариант)

Всем привет, иногда люди заходят на 404 страницу (Запрашиваемая страница не найдена), по умолчанию она выглядит довольно скучно, в этой статье мы её немного улучшим.

1. Заходим на сайт по ftp и открываем файл: ../public_html/catalog/view/theme/default/template/error/not_found.twig и вместо этого кода:

{{ header }}
<div id="error-not-found" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>
      <p>{{ text_error }}</p>
      <div class="buttons clearfix">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}

вставляем этот:

{{ header }}
<div id="error-not-found" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row 404 text-center">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>
      <h2 class="wave">
        <span>4</span>
        <span>0</span>
        <span>4</span>
      </h2>
      <p>{{ text_error }}</p>
      <hr>
      <div class="buttons clearfix">
        <div class="text-center"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}

Смотрим результат:

Уже смотрится лучше чем было, но мы ещё не закончили, нам необходимо чуть-чуть оформить эту страницу с помощью CSS стилей.

2. Заходим на сайт по фтп и открываем этот файл: ../public_html/catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавляем эти строки:

.wave span {
    padding: 50px 10px;
    display: inline-block;
    font-size: 14rem;
    animation: wave 2s ease-in-out infinite;
}
.wave span:nth-child(1) {
    animation-delay: 0s;
}
.wave span:nth-child(2) {
    animation-delay: 0.2s;
}
.wave span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
}

Смотрим результат:

Цифры 404 имеют эффект волны, на мой взгляд смотрится прикольно, но я хочу ещё немного побаловаться css стилями, поэтому немного перепишем и дополним стили:

.wave {
    padding: 50px 0;
}
.wave span {
    padding: 10px;
    display: inline-block;
    font-size: 14rem;
    animation: wave 2s ease-in-out infinite;
}
.wave span:nth-child(1) {
    animation-delay: 0s;
}
.wave span:nth-child(2) {
    animation-delay: 0.2s;
}
.wave span:nth-child(3) {
    animation-delay: 0.4s;
}
.wave span:nth-child(1),
.wave span:nth-child(3) {
    border: 1px solid #ddd;
    background: #000;
    color: #fff;
}
.wave span:nth-child(2) {
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
}
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
}

Просто меняем предыдущий код на этот, чистим кеши и смотрим результат (и выбираем, какой вариант вам нравится больше):