Страница технические "работы"

Krixys — Mon, 23 Dec 2013 15:30:57 GMT

Наверное всем владельцам сайтов ни раз приходилось временно закрывать свой проект, на внесение каких либо корректировок в интерфейс, на доработку функционала, на важное обновление дизайна всего сайта.В системе uCoz страница которая отображается когда сайт закрыт давольно скучна и дико стандартна.

Дизайн стандартной страницы "технические работы uCoz"

Дизайн который у нас получится в итоге, ничего лишнего для посетителей сайта, все конкретно, понятно и приятно взору, заголовок о том что на сайте ведуться технические работы, и таймер обратного отсчета, который показывает сколько осталость дней, часов, минут и секунд до открытия сайта.

Чтобы изменить страницу технических работ, пройдем в ПУ / Общие настройки и поставим галочку "Сайт временно отключен" добавляем в поле пункта "Причина временного закрытия сайта", стерев все что в нем было, данный код:

Выделить всё

type="text/javascript" src="/offline/offline.js">

Далее останется залить папку "offline" к себе на сервер, и все готово. Осталось лишь поставить дату открытия, для этого подредактируем страничку offline.htm открыв ее исходный код в блокноте, либо в notepad++, либо в dreamweaver и в самом конце мы видим код:

Выделить всё

 type="text/javascript"> 
  year = 2013; 
  month = 4; 
  day = 22; 
  hour= 10; 
  min= 25; 
  sec= 0;

year - год
month - месяц
day - день
hour - час
min - минута
sec - секунда

И изменяем значения на свои. Все готово, и все работает.

При всем мы не потеряли форму входа для администраторов мы всего лишь наложили свой дизайн, на стандартный. Для того чтобы администраторам можно было бы входить на сайт я сделал невидимую кнопку котоая расположена всегда в верхнем правом углу страницы, кликаем и у нас открывается форма входа.

Чтобы изменить основной цвет страницы, который по умолчанию у нас голубой, в странице offline.htm на 21 строчке найдем данный код:

Выделить всё

class="bx-overlay blue">

и изменим в нем класс blue

blue - голубой
green - зеленый
gray - серый
red - красный
orange - оранжевый
black - черный

Вот в принципе и все.

Все для ucoz - шаблоны , CSS3 , HTML5

Страница технические "работы"