Рейтинг:  1 / 5

Звезда активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Изменяем шаблон Joomla 1.5 часть 2

В первой части мы разобрались с основными файлами шаблона, рассмотрели вопросы изменения "шапки", размера текста , шрифтов и ссылок.

Во второй части будем разбираться с тем же шаблоном, что и в первой. Скачать можно здесь.

Изменение ширины шаблона.

Поскольку наш шаблон узковатый давайте попробуем его немного расширить, пикселей на 200.
Открываем главную страницу, щёлкаем правой кнопкой мыши по экрану и смотрим исходный (HTML) код. Нам нужен код начала страницы, то есть блок <body>, поэтому ищем этот тег.

Вот нужный нам кусок кода:

В коде видим несколько блоков с классами( контейнеры <div...> ). Именно эти блоки выводят содержимое шаблона. Наша задача - узнать в каких блоках указывается ширина шаблона, их может быть несколько. Начнём по порядку. На рисунке я подчеркнул красным классы блоков, вот их и будем искать.
Открываем файл template.css нашего шаблона, лучше WordPad'ом. И при помощи Правка - Найти ищем эти классы.

• Класс (точнее id) "page_bg"

Как видим в нём не указана ширина, смотрим следующий класс.

• Класс "pill_m"

В нём указано что текст должен быть по центру, фоном будет изображение menu.jpg, и ширина блока 718 пикселей, вот то что мы и искали. То есть ширина шаблона у нас состовляет 718 пикселей. Но это ещё не всё, нужно посмотреть следующие блоки.
Так как мы хотели расширить шаблон на 200 пикселей, то изменяем ширину на 918px, сохраняем файл.

• Класс "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, он отвечает за основную колонку, в которой выводятся статьи. Давайте найдём его.
Да, так и есть его ширина 510 пикселей, изменяем её на 710 и сохраняем.

С этого момента начинается вывод материала. Все основные блоки мы изменили. На всякий пожарный сделаем ещё кое что.
В файле template.css изменим все значения с 718 на 918.
Для этого нажмите Правка - Заменить.

Сохраняем и смотрим.

И получилось у нас вот что:

Коряво.
Это потому что фоном (background) для блоков служат изображения. А их мы не изменяли.

Из этой ситуации есть несколько выходов:

1. Подогнать изображения при помощи PhotoShop'а
2. Нарисовать свои изображения, какие вам захочется.
3. Использовать вместо изображений цвета, например #096626. Каждому блоку можно задать свой цвет фона.
Имейте в виду, что блок размещается в блоке, типа матрёшки.

Я изменил фон блоков с изображений на цвет, вот что у меня получилось:

Уже получше. Дополнительно я задал цвет в leftcolumn и растянул шапку в Фотошопе, оставив исходную высоту.

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

На этом я закончу вторую часть, и буду готовить третью.

Всего хорошего!

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!