Смена дизайна на сайте uCoz

 
 
 
12
 
В этой статье я подробно расскажу и покажу, как просто и интуитивно можно сменить дизайн шаблона своего сайта на uCoz. Причём не ограничусь сменой фона и шапки, но и затрону многие незаметные нюансы.
 
Итак, начинаем! Покажу на примере своего сайта, как я заменял обычный дизайн на рождественский.
 
Сначала меняю фон (подробнее про замену фона можно почитать здесь).
Для этого я иду в Панель управления своего сайта, затем в «Управление дизайном» и «Таблицу стилей (CSS)».
 
 
Попутно открываю Файловый менеджер, в который заранее залил все нужные картинки-элементы.
 
 
Нажатием на кнопку «i» открываю и копирую ссылку на нужную картинку.
 
 
Вот так выглядит сначала у меня сайт.
 
 
В коде CSS нахожу строчку с фоном и вставляю вместо прежней ссылки новую.
 
 
Обновляю сайт и убеждаюсь, что фон обновился.
 
 
Теперь меняю шапку сайта (подробнее про замену шапки можно почитать здесь).
 
 
Убеждаюсь и в её обновлении.
 
 
Теперь приступаю к незаметным вначале мелочам, которые тем не менее режут глаз несоответствием общей цветовой композиции.
 
Меняю полоску, разделяющую новости на главной странице.
 
 
Теперь полоска соответствует общей цветовой гамме.
 
 
Смотрю дальше глазами по сайту, выискивая несоответствия. А вот и следующее — полоски меню! Открываю замечательную программку HTMLColors2000 (скачать её можно, например, отсюда).
 
Эта программа не требует установки и очень проста в использовании. С её помощью я узнаю HTML-код нужного цвета на сайте и нахожу его в коде CSS.
 
 
Чтобы определить цвет в любой точке экрана, нужно нажать кнопку «Screen», навести курсор на нужное место и один раз кликнуть. В строчке «HTML Code» выводится номер этого цвета, в данном случае — #AEE939. Запоминаю этот номер.
 
Теперь ищу подходящий цвет для полоски меню, кликаю, и копирую номер, нажав кнопку «Copy».
 
 
Затем в CSS я ищу строчки с цифрой #AEE939
 
 
и заменяю их новой, скопированной из программки.
 
 
Обновив сайт, проверяю результат.
 
 
Далее меняю цвет полоски с датой. Также вычисляю HTML код цвета,
 
 
нахожу его в CSS,
 
 
и заменяю на новые номера цветов.
 
 
Советую не тупо проставлять цифры по картинкам, но и запоминать при этом, какая строчка CSS-кода чему соответствует. Это поможет в дальнейшей осознанной работе над дизайном сайта.
 
Причём в каждой замене я заменяю все старые номера цветов на новые, пролистывая до конца CSS-таблицу, чтобы не было пропусков.
 
Заменили цвет полоски даты, проверяем.
 
 
 
 
 
Опубликована: 07.04.2013
Просмотров 3151


Оценка(18)
Оценить статью:  

Комментарии

Гости не могут добавлять комментарии, войдите или зарегистрируйтесь.
Раиль  03.05.2013 22:40  
Спасибо за помощью!  :book: 
Antonij  04.05.2013 01:52  
Пожалуйста! 
Софья  23.06.2013 09:16  
У меня шаблон дизайна, такой же, как у Вас. Названия блоков не изменились, изменяю именно там, где и вы. Не знаете, в чем проблема?
Antonij  24.06.2013 02:22  
Софья, после изменения названий блоков вы сохраняете изменения?