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

Всем привет, иногда люди заходят на 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>
        <div class="conic">
         <h2>404</h2>
        </div>
        <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 и в конец файла добавляем эти строки:

.conic {
    position: relative;
    z-index: 0;
    padding: 50px;
    margin: 50px auto;
    border-radius: 10px;
    display: inline-block;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: #2196F3;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(transparent, #E3F2FD, transparent 30%);
        animation: rotate 4s linear infinite;
    }

    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: #fff;
        border-radius: 5px;
    }
}

.conic h2 {
    font-size: 8em;
    color: #2196F3;
}
.conic-demo::after {animation: opacityChange 5s infinite linear;}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes opacityChange {
    50% {opacity:.5;}
    100% {opacity: 1;}
}

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