ШаблоныТарифыПартнерамНовостиПомощьПосмотреть сайты

Как изменить дизайн готового сайта. Азбука CSS

Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение?

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

А можно такой же, но с перламутровыми пуговицами? Да!

На UMI.ru есть возможность изменить внешний вид готового сайта несколькими способами, которые можно сочетать или использовать по отдельности:

1. Самый простой способ - изменить вид страниц сайта при помощи картинок. 

  • Поставьте ваш логотип в левом верхнем углу сайта. Если у вас нет логотипа – это может быть любое имиджевое изображение, дающее понять, чему посвящен сайт. Это может быть даже ваша фотография – если бизнес привязан к вашей личности (например, уроки английского языка).
  • Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.
  • Добавьте картинки, иллюстрирующие текст сайта. Это легко cделать при помощи визуального редактора. Иллюстрации в тексте нужны, но, в зависимости от использования, они могут как улучшить сайт, так и испортить его. Про то, как грамотно работать с изображениями для веб-страниц, мы поговорим отдельно, в другой раз.

Исходный шаблон дизайна:

скриншот исходного шаблона

Шаблон, измененный при помощи картинок:

скриншот сайта, чей дизайн изменен с помощью картинок

 

2. Самый радикальный способ - изменить шаблон дизайна.

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ - редактирование стилей CSS.

CSS - это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” - “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

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

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS - htmlbook.ru, а получить нужный код - генераторы CSS:  css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как начать работать с CSS и посмотреть, какие стили уже применены к элементам страниц - вы узнаете из нашего руководства

А чтобы вы поняли, насколько это легко - разберем несколько примеров.

Действия с объектами

Первая задача: изменение цвета кнопки с голубого на красный.

При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента - в данном случае, это код кнопки:

скриншот адаптивного сайта

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:  

  • черным - класс (в данном случае, кнопка),
  • зеленым - CSS-свойство (в данном случае, цвет),
  • синим - значение (в данном случае, голубой),
  • зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background - это свойство, определяющее стиль фона, а #1f1f1f - голубой цвет в шестнадцатеричной кодировке цвета.

скрин свойства background
Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета - #ff0000:
скриншот палитры цветов

Теперь перейдем в раздел “Дизайн” - “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Таким образом, в общем виде схема CSS-кода выглядит так:

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

  • записываем класс (название элемента) - .direction_title
  • ставим фигурные скобки - { }
  • внутри фигурных скобок прописываем стиль кнопки - background:
  • после двоеточия указываем код красного цвета - #ff0000
  • в конце строки ставим ;
  • не забываем в самом конце закрыть фигурную скобку.
скриншот схемы CSS-кода
Что получилось:
 
    Было                                                                                                   Стало
скринщот адаптивного сайта с синей кнопкой скриншот адаптивного сайта после изменений

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно - “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom - расстояние от нижнего края кнопки до нижнего края родительского блока, а left - расстояние от левого края кнопки до левого края родительского блока.

скриншот значения текущего расположения кнопки

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева - получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

скрин изменения значений для перемещения кнопки вверх и вправо на 100px

Что получилось:

    Было                                                                                                  Стало

скрин адаптивного сайта с кнопкой внизускрин адаптивного сайта со смещенной кнопкой

Изменение шрифтов

При редактировании некоторых текстовых полей на готовых сайтах не появляется визуальный редактор, а потому нельзя стандартным способом изменить цвет, размер и начертание шрифта. Это могут быть заголовки, анонсы новостей, цены на товары, контактные данные в шапке сайта, надписи на кнопках и др. Мы сделали это умышленно: настроили лучшие шрифты, самые удобные для чтения и оптимально подходящие к дизайну сайта. Но если все же вам потребуется изменить стиль этих элементов, то это можно сделать при помощи CSS.

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно - “переведем” значения через справочник.

скриншот инспектора кода Firebug

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас - 18px; а за цвет - свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” - ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

скриншот раздела CSS

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось:

Было                                                                                                          Стало

скрин каталога с черным шрифтом

скриншот каталога с караным шрифтом

 

 

 

 

 

 

 

 

 

 

 


Еще несколько примеров работы с CSS описаны в нашем руководстве.

Возможные сложности

1. Не “срабатывают” стили, прописанные в файле CSS.
   Решение: после значения свойства прописать правило !important, которое позволяет повысить приоритет стиля. Например:

.shop-heading{
color: #ff0000 !important;
font-size: 28px
!important;}

2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

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