Уроки и видео
Сделать свой сайт Как изменить шаблон Joomla.часть 2
Как изменить шаблон Joomla.часть 2 |
 |
 |
Изменяем шаблон Joomla 1.5 часть 2В первой части мы разобрались с основными файлами шаблона, рассмотрели вопросы изменения "шапки", размера текста , шрифтов и ссылок. Во второй части будем разбираться с тем же шаблоном, что и в первой. Скачать можно здесь.
Изменение ширины шаблона.Поскольку наш шаблон узковатый давайте попробуем его немного расширить, пикселей на 200. Вот нужный нам кусок кода:
В коде видим несколько блоков с классами( контейнеры <div...> ). Именно эти блоки выводят содержимое шаблона. Наша задача - узнать в каких блоках указывается ширина шаблона, их может быть несколько. Начнём по порядку. На рисунке я подчеркнул красным классы блоков, вот их и будем искать. • Класс (точнее id) "page_bg"
Как видим в нём не указана ширина, смотрим следующий класс. • Класс "pill_m"
В нём указано что текст должен быть по центру, фоном будет изображение menu.jpg, и ширина блока 718 пикселей, вот то что мы и искали. То есть ширина шаблона у нас состовляет 718 пикселей. Но это ещё не всё, нужно посмотреть следующие блоки. • Класс "pillmenu" Класс "clr" нам не нужен. Обычно он просто разделяет блоки (отменяет обтекание блоков). Поэтому он подчёркнут зелёным. • Id "header"
в нём тоже указана ширина 718 пикселей, изменяем на 918. Далее. • Id "logo" в нём указана ширина 700 пикселей, в нём выводиться логотип. Тоже прибавим +200 пикселей. • Id "content_top" фоном служит изображение content_top.jpg, ширина блока 718, смело исправляем на 918. • Класс "center" также указывает ширину 718 пикселей, тоже исправляем на 918. Видите как много блоков имеют размеры 718. Незабудте сохранять изменения. • Id "wrapper" фон - изображение content.jpg, ширина 718 пикселей. • Id "content" как следует из названия выводит контент. Его ширина 702, меняем на 902 пикселя. Ниже идёт блок с id="leftcolumn", очевидно что он отвечает за левую колонку, поэтому трогать его пока не будем. Да, в большинстве шаблонов есть такой класс как maincolumn, он отвечает за основную колонку, в которой выводятся статьи. Давайте найдём его. С этого момента начинается вывод материала. Все основные блоки мы изменили. На всякий пожарный сделаем ещё кое что.
Сохраняем и смотрим. И получилось у нас вот что:
Коряво. Из этой ситуации есть несколько выходов: 1. Подогнать изображения при помощи PhotoShop'а Я изменил фон блоков с изображений на цвет, вот что у меня получилось:
Уже получше. Дополнительно я задал цвет в leftcolumn и растянул шапку в Фотошопе, оставив исходную высоту. Таким образом изменяются шаблоны для Joomla. Конечно не все, но большинство. Самое главное понять принцип, и знать капельку CSS. На этом я закончу вторую часть, и буду готовить третью. Всего хорошего! |
| Обновлено 03.02.2011 22:33 |
