» »

Страница ошибки 404 серо белая


Страница ошибки 404 серо белая

Светлая страница 404 с оттенком серого для сайта любой тематики, отлично пр своим функциям. Если вы на ее попали, то у вас есть возможность обратно зайти на сайт. В ней присутствует красивый эффект, что вы можете навести курсор на цифры и увидите, но это как понимаете не главное, здесь безусловно сам дизайн и тематически разная.
Привет, с Вами Alkapone и это очередная страница 404 ошибки для Вашего супер крутого сайта.

Демо этой странички можно глянуть ВОТ ПО ЭТОЙ ССЫЛКЕ

Приступим к установке.

Для начала создадим в файловом менеджере папку img (это если её нет) загрузим в неё 3 файла из папки с 404 страницей (bg1.png , ch1.png , ch2.png)

Далее (ЧИТАЕМ ВНИМАТЕЛЬНО ЧТОБЫ НЕ СЛОМАТЬ ДИЗАЙН СВОЕГО САЙТА).

В корень файлового менеджера необходимо загрузить файл style.css (Говорю сразу, если у Вас уже там есть файл style.css, то чтобы не сломать дизайн своего сайта просто переименуйте файл который будете загружать в файловый менеджер. К примеру назовите его my404style.css обращаю Ваше внимание что наличие " .css " в конце имени файла обязательно.

После этого открываете файл 404.html через блокнот и ищите там такую строчку
Код
<link rel="stylesheet" href="style.css">


В ней меняете называние вместо " style " на своё то есть на то как вы назвали свой файл.

Но если же у Вас не было никакого style.css в файловом менеджере то смело загружайте этот файл без замены названия в 404.html

Теперь снова открываем файл 404.html и идём в самый низ пока не увидим такое
Код
<li><a href="#">Главная</a></li>
  <li><a href="#">О Сайте</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Поддержка</a></li>
решётку " # " необходимо заменить ссылкой на свой сайт к примеру было так
Код
<li><a href="#">О Сайте</a></li>
то в моём случает станет вот так
Код
<li><a href="ZORNET.RU">О Сайте</a></li>
вместо " # " я вставил ссылку на " свой " сайт.

Теперь сохраняем это всё в кодировке UTF-8 и загружаем в корень файлового менеджера, на этом установка закончена.

Все пути к картинкам можно поменять в файле style.css в базовых стилях
06.04.2016 Загрузок: 5 Просмотров: 438 Комментарий: (16)

Поделиться в социальных сетях

Материал разместил

Комментарий: 16
Kosten
Kosten 06.04.2016 18:091
0
Нормальная страница, давно его на сайт заливал, но здесь все очень понятно написано.
FeStemBer
FeStemBer 06.04.2016 18:482
0
Но а для чего держать 2 кода на сайте?
Kosten
Kosten 06.04.2016 19:514
0
Не чего, если хороший материал, будет продублирован, главное название разные и описание у всех оригинальны.
tsakonter
tsakonter 06.04.2016 19:493
0
А как она под мобильный идет или нужно адаптировать?
Alkapone
Alkapone 06.04.2016 20:545
0
Нет адаптировать не нужно, на мобилках работает отлично
Alkapone
Alkapone 06.04.2016 20:566
+2
За это отвечает такой вот не замысловатый код в css
Код
/* Меньше, чем стандартные 960 (устройства и браузеры) */
@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 959px) {

}

/* Планшетный экран размер стандартного 960 (устройства и браузеры) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* Все мобильные экраны (устройства и браузеры) */
@media only screen and (max-width: 767px) {

}

/* Мобильные экраны и планшеты (устройства и браузеры) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .checkbacksoon p span { font-size: 150px; line-height: 160px; }.error {font-size: 14px;}.search {width: 220px;}
}
/* Мобильные экраны (устройства и браузеры) */
@media only screen and (max-width: 479px) {
  .checkbacksoon p span { font-size: 150px; line-height: 160px; }.error {font-size: 14px;}.search {width: 220px;}
}
Maryges
Maryges 06.04.2016 20:587
0
Этими стилями не разрулить весь сайт под мобильное устройства, все равно в кодах придется копаться.
Alkapone
Alkapone 07.04.2016 15:279
0
А не кто не говорит про весь сай, это только для 404 страницы.
Kosten
Kosten 06.04.2016 21:008
0
Alkapone, вы бы на форуме веб мастер категория, сделали бы тему под мобильные устройства, то многие спрашивают.
Angerfist
Angerfist 07.04.2016 15:5710
0
Как то тоже думал опубликовать эту страницу, глянул на Демо и заметил поиск при адаптации уходит за границы низа, не стал копаться)
Kosten
Kosten 07.04.2016 16:1411
0
На демонстраций нормально стоит или просто на мобильных он уходит.
Angerfist
Angerfist 07.04.2016 16:4412
0
Потяни окно браузера чтоб быстрей без сервисов и смартфонов к самому минимуму, где то при ширине около 640 px начнёт поиск уходить
Kosten
Kosten 07.04.2016 18:2213
0
Angerfist, посмотри пожалуйста эту страницу, которая на этом сайте стоит, она нормально под мобильные.

Angerfist
Angerfist 07.04.2016 18:5914
0
Киваю, нормально!)
Kosten
Kosten 07.04.2016 19:1915
0
От души. услышать, от того человека кто волокет в этом.)
Сопрано
Сопрано 24.04.2016 01:5416
0
Круто будет для светлого дизайна и тематика здесь не важна.

avatar