«Как убрать лампочку?» или смена шапки в шаблоне UMI.CMS

Приветствую. Оговорюсь сразу - я дизайнер. Волшебством программирования и могучими знаниями кода UMI.CMS не владею.

Поведу речь о самом, наверно, интересном и прекрасном, что есть в UMI.CMS - это ее дизайн. Если с дизайном админки все понятно и никто кроме владельцев сайта его не видит, то дизайн шаблона демо-сайта первоначально стоит на каждом сайте клиента UMI.

А мне, как владельцу сайта, конечно же, хочется его модифицировать. И я решил поменять подложку шапки сайта.

Вот так изначально выглядела у меня страничка:

А так выглядит подложка шапки сайта:

Как я ее нашел? Заходим по протоколу ftp на сайт. (Если вы не знаете как это делается, спросите у вашего хостинг-провайдера.) После этого идем в папку, где лежит сайт. Обычно она называется www. Там находим папку с вашим сайтом (это как правило папка с названием /docs/, /htdocs/ или /public_html/) и в ней папку /image/.

В папке /images/ в файлах есть картинка top.jpg - копируем ее к себе на компьютер. В самом начале я рассказал о том, чего я не умею. Теперь я расскажу, что я умею. А знаю я графический редактор Photoshop и то, что Юми содержит файлы стилей (.css), в которых прописываются все параметры, в том числе параметры нашей шапки.

Потратив 5 минут, я набросал шапку следующего вида.



Ее я сохранил на компьютер под названием top.jpg. Уверен, что вы сразу заметили, что название моей шапки, совпадает с названием шапки в шаблоне.

Все верно. Мне осталось только заменить файл top.jpg, лежащий на сервере, файлом, который я нарисовал. Так как моя шапка чуть меньше по ширине изначальной шаблонной шапки, то браузер выводит ее следующим образом:



Выделенный синим прямоугольник – это лишний отступ. В стандартном шаблоне выпирал листик цветка, а в нашей новой шапке его нет. Исправляется это очень просто. Заходим по ftp в папку /css/

Внутри папки cms лежит 3 файла и папка admin. Нам нужен файл style.css. Копируем его на свой компьютер.

Редактируем файл style.css, который лежит на сервере. Находим в нем параметр #header
Проще всего воспользоваться поиском. Нашли? Смотрим. Там должен быть такой кусок кода

#header {
         position: relative;
         width: 980px;
         height: 188px;
         margin-right: -18px;
         background:url(/images/top.jpg)
        }

Нас интересует следующие параметры:
width — ширина шапки;
height — высота шапки;
background: url() - путь где лежит картинка нашей шапки.

У меня сейчас размер шапки 946 px, а в параметре width 980 px; Пишу вместо 980 px нужные мне 946 px и сохраняю. Save it! Теперь открываю браузер и захожу к себе на сайт. И как вы думаете что? Все отлично)



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