Темизация. Особенности верстки под Drupal

Kate Kalashnikova

Не торопитесь начинать

➔ Ознакомьтесь с требованиями проекта

➔ Внимательно посмотрите на дизайн всех страниц

➔ Найдите схожие элементы (блоки, шрифты, формы)

Выберите базовую тему

Bartik

Тема - набор файлов для изменения внешнего вида

сайта

Подтема - это тема, которая наследует функционал

другой темы

Custom theme or subtheme

Создание собственной темы

1. Прочитайте readme темы

2. Создайте копию папки темы или подтему и поместите ее в папку sites/all/themes

3. Назовите папку именем вашей темы, а также не забудьте назвать так же .info файл и заменть название в файлах .info и template.php

❏ Файл theme_name.info

❏ Файлы стилей .css

❏ Файлы шаблонов .tpl.php

❏ Файлы скриптов .js

❏ Файл template.php

❏ Images

Файлы темы

Полезные модули

➔ Delta https://www.drupal.org/project/delta

➔ Contexthttps://www.drupal.org/project/context

➔ Form placeholder https://www.drupal.org/project/form_placeholder

➔ Flexsliderhttps://www.drupal.org/project/flexslider

➔ Owl carouselhttps://www.drupal.org/project/owlcarousel

➔ ImageCache Actionshttps://www.drupal.org/project/imagecache_actions

➔ Superfishhttps://www.drupal.org/project/superfish

- Всегда используйте для отступа два пробела. - Всегда пишите в нижнем регистре. - По возможности поясняйте свой код, где это необходимо.- Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно. - Избегайте использования информации о версии браузеров, или CSS “хаков”— сначала попробуйте другие способы.- Используйте пробелы после двоеточий в объявлениях.- Начинайте каждый селектор или объявление с новой строки.

Общие правила оформления css файла:

Logged-in Logged-out

Тестируйте

Спасибо за внимание!