Слайдшоу для главной страницы

По итогам прошлой статьи мы имеем слайд-шоу, каждый слайд которого состоит из картинки заголовка и нескольких слов взятых из статьи. Прежде чем выводить его на главную изменим некоторые параметры. Все изменения будут касаться оформления.
Переходим на страницу нашей вьюшки. Начнём с заголовка. Он по умолчанию выводиться обычным шрифтом, а хотелось бы его выделить. Для этого в разделе FIELDS кликнем на Content: Title.

В разделе STYLE SETTING отмечаем галочкой Customize field HTML. После этого нам предложат в списке HTML element выбрать обёртку для поля Title. Другими словами мы выбираем теги в которые будет заключено поле, и указываем класс. Для тех кто знаком с HTML и CSS всё просто и понятно. Для всех остальных слегка запутано. Мой вам совет не забивайте пока голову непонятными терминами а пробуйте разные варианты и смотрите что получится. Я бы вам рекомендовал для заголовка выбрать H2 или H3. Не забываем сохранять.

Следующие эксперименты будем проводить на сайте. Для начала разместим слайд-шоу на главной. Как вы помните в настройках Views мы указали что делать будем блок. Соответственно после сохранения вьюшки она должна появиться в списке блоков. Указав место расположения и страницы где должен появляться блок и  смотрим что получилось.

Все поля нашего слайд-шоу располагаются одно над другим, в том порядке который мы определили в настройках Views. Я собирался поставить картинку слева, всё остальное справа. Модуль который раскидает наши поля по горизонтали я не нашёл, точнее не искал. Эту проблема можно решить тремя строками дописанными в CSS файл. Для тех кто не в курсе, в CSS файл записаны указания браузеру как отображать страницу. Для каждого элемента есть своё правило. Чтобы браузер точно знал какое правило к какому элементу относиться есть метки которые добавляются в HTML код. Такая метка называется класс.

С теорией разобрались переходим к практике. Начнём с добавления класса. Для этого в разделе FIELDS кликнем по названию поля с картинкой (у меня это  Content: teaser_image) и видим картинку очень похожую на ту что мы видели при изменении заголовка. Переходим в раздел STYLE SETTINGS отмечаем настроить HTML поля а дальше всё зависит от вашего уровня подготовленности. По умолчанию Views сам создаст класс, но нам нужно будет найти его в коде страницы. Чтобы прописать название класса в ручную отмечаем Create a CSS class и в появившемся поле вписываем название класса.

Название класса пишутся маленькими буквами, для разделения слов используйте «—».
Переходим к редактированию файла css. Расположен он в папке /sites/all/themes/название_темы. Ищите файл с расширением css, например style.css, или папку с названием css, в которой будут лежать файлы стилей. Открываем его для редактирования и в конце пишем:

.front-page-slide-img {float:left; padding:10px;}

float:left указывает на то что наш блок с картинкой нужно прижать к левой стороне а всё что идёт ниже будет обтекать его справа. Для того чтобы задать расстояние между картинкой и текстом используем поля в 10 пикселей padding:10px. Обратите внимание что перед название класса должна стоять точка.

На этом я думаю закончить инструкцию по созданию слайдшоу. Об основных моментах я рассказал, а остальное дело техники и вкуса:) Главное разобраться как это работает. Просто кликайте по ссылкам, изменяйте значения и смотрите что получается. Начните с настроек слайдшоу - кликните Setting рядом с Slideshow и измените время или эффект анимации.

Мой вам совет - если вы планируете заниматься сайтостроительством я бы вам рекомендовал помимо практики с друпалом начинать изучение CSS и HTML. Я ничего не имею против PHP или Javascript, но начинать я думаю нужно с основ. В большинстве случаев необходимую функциональность сайта можно обеспечить модулями, а вот корректировать внешний вид часто приходится вручную.

Если что не получилось пишите, помогу исправить.