Создаем шаблон для Joomla с нуля. Часть 4

Вернуться
Опубликовано: 9.03.2015 г.

Когда основа для шаблона готова, и его уже можно установить на движок, самое время заняться дизайном. Внешний вид шаблона реализуется с помощью таблиц каскадных стилей, или, проще говоря, CSS. Мы будем использовать CSS2 с небольшими вставками CSS3 – так проще для понимания и для совместимости со всеми браузерами. Обязательно тестируйте дизайн сначала на локальном хосте, и только когда всё работает и выглядит как положено, можно заливать файлы на сайт. Редактировать CSS-файлы вы можете любой удобной для себя программой – от обычного Блокнота до сложных редакторов кода с подсветкой синтаксиса и другими полезными фичами. Также никогда не правьте код непосредственно в админке Joomla – хотя это и возможно, такой вариант может создать массу проблем и банально неудобен.

Начинаем работу над CSS

Первое, что нужно сделать – это правильно расставить модули на странице, ведь в данный момент они идут просто один под другим. Для этого надо их включить в настройках CMS, чтобы иметь возможность визуально наблюдать все изменения. Для этого мы включаем последовательно модуль поиска, левое меню, футер, подвал и все другие элементы, которые мы ранее описывали. Теперь самое время открыть файл template.css и начать его заполнять.

Самое первое – фон страницы. Это делается при помощи блока BODY:

Данный код сделает весь фон страницы серым. Теперь оформляем общий внешний вид страницы, который мы ранее обозначили с помощью id ‘page’:

Здесь задается ширина страницы, размер, цвет, выравнивание и начертание шрифта, отступы.

Как вы помните, мы блоки user и search помещали в специальный контейнер top, поэтому задаем для него стили отдельно:

Как видите, мы указываем высоту и ширину блока, причем высота указывается абсолютно (в пикселях), а ширина – относительно (в процентах).

Логотип мы поместим в самый левый край блока top, укажем размеры и заставим все остальные элементы его «обтекать»:

То же самое проделываем также для блока search. Для шапки (блок header) можно просто указать ширину в 100%:

Для левой и правой колонок (блоки left и right) нужно задать ширину, обтекание и фоновые цвета:

С блоком content есть небольшая сложность – для него нужно прописать три возможных размера – с одной отключенной колонкой. С двумя, а также когда все колонки на месте:

Осталось только указать стили для блока footer, которому кроме цвета фона и размера, понадобится также параметр, запрещающий блоку подниматься вверх. Делается это при помощи clear:both:

Теперь основа фала CSS готова, в чем можно убедиться, загрузив template.css на сайт, после чего его загрузить. Особой красоты вы пока не увидите, но все элементы должны стоять на своих местах и иметь фоновые цвета, если они задавались.

Изменяем внешний вид страницы

Когда костяк готов, можно переходить к тонкостям – визуальному оформлению каждого элемента. Делается это стандартно для любого CSS-файла, поэтому если на каком-то этапе что-то будет неясно, просто почитайте учебник по каскадным стилям, и ситуация прояснится.

Вначале мы обнуляем отступы, задаем глобальные стили для текста, ссылок, заголовков и т.д.:

Также не забываем про изображения и абзацы:

Теперь переходим к настройкам каждого блока по отдельности. Вначале – всё тело страницы (напоминаю, речь идет о содержимом тега BODY):

Как видите, мы немного дополнили код, который прописывали для этого элемента ранее. Заново его указывать не нужно.

Теперь, если вам нужно видоизменить созданные нами блоки logo, search, left, right и т.д., вы делаете это по аналогии на свое усмотрение. Изменить можно буквально всё: шрифт, цвета, обтекание и т.д. Не трогайте только размеры и расположение на странице, поскольку из-за этого «поплывет» вся вёрстка.

О контенте следует упомянуть отдельно. Поскольку именно здесь будет находится всё наполнение сайта: статьи и другие полезные материалы, то нужно прописать параметры для картинок и списков (элементы li), которых могут быть в статьях:

Не забывайте, что блок content обязательно должен указываться в виде трех разных вариантов, которые отличаются шириной при включенных или отключенных боковых колонках. Меню мы пока не трогаем, для него будет создан отдельный файл menu.css, где будут описаны все необходимые стили.

В CMS Joomla есть специальный класс .moduletable, главная задача которого – управлять внешним видом блоков. Поэтому кроме отдельного описания каждого блока, нужно задать стиль и для .moduletable:

Как видно, мы задали стили не только для самого блока, но и для его заголовка, абзацев, картинок, списков. Теперь наш template.css полностью готов, а из стилевого оформления достаточно будет только закончить оформление навигационных меню.

Создаем шаблон для Joomla с нуля. Часть 1

Создаем шаблон для Joomla с нуля. Часть 2

Создаем шаблон для Joomla с нуля. Часть 3

Создаем шаблон для Joomla с нуля. Часть 5

1247 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *