10.07.2008 | 22:26

Приветствую. Оговорюсь сразу - я дизайнер. Волшебством программирования и могучими знаниями кода 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. Для многих небольших сайтов часто таких работ по дизайну бывает достаточно для открытия проекта.Желаю вам творческих успехов и интересных открытий.

Бонус: Чтобы поменять логотип UMI.CMS Demo Site на свой, достаточно заменить файл logo.jpg, лежащий в папке /images/, на картинку со своим логотипом.

Читайте также:

Категории

Теги

exchange 28 Обмен данными 1C Интеграция с 1С версии UMICMS технологии модуль хостинг юмихост umihost UMI партнеры продукты UMI мероприятия UMICMS рейтинг MySQL разделение баз данных Кейсы обзоры маркетинг developer программинг менеджмент xslt документация шаблоны Служба Заботы маркетинг веб студии москва события лицензии новинки UMI Edu UMI Cloud UMISummit business облако тегов кастомы uwdc Челябинск разработчики конференция Конкурс UMIRU видео flash actionscript каталог анимация техподдержка tpl local scope macro кейсы итоги года SAPE seo мероприятие рынок веб разработки экономика Алексей Самойлов Сергей Котырев KINETICA CMS Сибирская интернетнеделя UMIWorkshop интернетмагазин интернет-магазин интернет магазин интернет-маркетинг акция Золотой сайт umi_workshop партнерская_программа партнерство стратегия highload РуПромо Машков версия 2_7 кэширование скорость стихи день рождения статьи пресс конференция версия 2_5 Edit_in_Place онлайн платежи кризис достижения CeBIT внедрения umi cms блоги верстка релиз EditInPlace изучение Юми создание модуля модули ReMIX UMI_CMS_Net iPhone XML драйвер как убрать лампочку форма обратной связи языковые версии CMS Pistols музыка UMICMS 28 удобство юзабилити usability user experience интерфейсы CMS Eye tracking ай тракинг usability test UXRussia управление сайтом RIW Russian internet week Softool выставки интернет клиенты сайты umisound cms pistols РИФ 2011 Tagline качество 2012 UMISound Полюса Илья Разин Марат Машков

Авторы блога