Изменяем шаблон в Joomla.

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

Вот его скриншот.

Как изменить шаблон Joomla 1.5

После установки шаблона его структуру можно посмотреть по адресу
C:\WebServers\home\ваш сайт\www\templates\siteground-j15-36.

Как изменить шаблон Joomla 1.5
Теперь разберём что к чему.
• В папке css хранятся таблицы стилей для сайта. Самый главный файл template.css
• В папке images находятся изображения, которые используются для построения дизайна.
• Файл index.php является основным файлом шаблона. В нём прописан код шаблона, как в  HTML.
• Файл template_thumbnall.png содержит маленькое изображение шаблона, его можно посмотреть наведя мышку на шаблон в менеджере шаблонов ( в Админпанели).
• Файл templates.php содержит вспомогательные элементы шаблона.
• В файле params.ini находятся параметры конфигурации.
tempateDetails.xml содержит в себе все данные о шаблоне, такие как имена авторов, файлы шаблона, позиции в шаблоне.
В основном при изменении используют три файла: template.css, index.php и templateDetails.xml.

Изменение "шапки" сайта.

Самый простой способ это замена файла header.jpg в папке images на свой файл-картинку такого же размера. В нашем шаблоне размер хедера составляет 718 х 186 пикселей.
В других шаблонах этот файл может называться logo.jpg.

Если же вы хотите изменить размер шапки, то нужно будет менять его и в коде шаблона.
Не бойтесь, ничего сложного в этом нет. Windows нам поможет. Зарываться в коде мы не будем.
В основном размеры шапки прописываются в файле template.css

Для этого запомните размер старого хедера. Например, я поменял высоту со 186 пикс. на 155, ширину не трогал. То есть у меня получилась картинка размером 718 х 155.
Откройте файл template.css, лучше с помощью WordPad.
Нажмите Правка - Найти... В открывшемся окошке введите число 186, это старая высота шапки и нажмите Найти Далее. Windows найдёт это значение, и его остаётся только изменить на новое. После чего Сохранить файл.

Как изменить шаблон Joomla 1.5
В нашем template.css этот размер прописан один раз. В других шаблонах может быть указан несколько раз. В будущем, для полной уверенности проверяйте поиском файлы до конца, пока не всплывёт сообщение о завершении поиска.

 

Изменение размера текста и шрифта в шаблоне.

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

Я сделал размер шрифта 15 пикселей. Убрал шрифт Tahoma, теперь он стал Arial.

Также прошу обратить внимание на свойство line-height. Это расстояние между строк. Может задаваться в пикселях, процентах и относительных единицах, например 1.3em = 13px.
Я заметил, во многих шаблонах это расстояние маленькое, что затрудняет чтение и напрягает глаза.
Здесь же можно изменить и цвет шрифта, свойство color. А можете добавить и новое свойство.

Теперь пробуем изменить размер и цвет ссылок.

Это тоже делается в template.css.
a: link, a: visited и a: hover. Отвечают за: обычные ссылки, посещённые и активные (в момент наведения мышью) соответственно.
Их свойства обозначены чуть ниже класса body.


Размер можно задать отдельным свойством, font-size, и дописать его к остальным.
После изменения не забудте сохранить файл и обновить сайт для просмотра изменений.

Как вы наверное уже заметили ссылки изменились, но не все. Ссылки главного меню так и остались маленькие.
Это потому что мы изменили только основные ссылки. Свойства ссылок главного меню указаны отдельно.
Для того чтобы найти где, нужно проделать несколько действий. Мы ведь незнаем куда их спрятали авторы шаблона.
Итак, выделяем и копируем надпись Главное меню.
Щёлкаем правой кнопкой мыши по сайту и из открывшегося окна выбираем пункт Исходный код или HTML-код, взависимости от вашего браузера.

Нажимаем Правка - Найти, и вставляем туда скопированную надпись.
Жмём Найти.

Находим, смотрим внимательно откуда что идёт. Знание основ CSS тут как раз пригодится.

Как видим наше главное меню находиться в блоке с классом module_menu, и этот блок находится в другом блоке с id="leftcolumn". Разгадка где-то рядом.

Опять же открываем наш template.css и при помощи Правка - Найти... ищем свойства ссылок.

Сначала пробуем искать все значения с классом module_menu. Смотрим на такие значения как font-size...

Таких свойств обнаружить не удалось, в этом классе не указаны размеры ссылок.

Теперь ищем значения с leftcolumn. Их много, поэтому повнимательней.
Также обращайте внимание на комментарии, они могут оказаться полезными.

Как изменить шаблон Joomla

Например комментарий /* LEFT COL H3 */ говорит о свойствах текста заключенного в тэг h3 и находящийся в левой колонке. Это как раз надпись Главное меню, название модулей и т.д.

Чуть ниже этого блока стилей начинается блок /*LEFT COL LINK*/ , он отвечает за ссылки в левой колонке, то что мы и искали. Пожалуйста! Изменяйте как вам хочется.

Ещё ниже будет блок /*LEFT COL CURRENT LINK*/ , он также отвечает за ссылки, но которые открыты в данный момент.

На этом пока закончу.

Во второй части рассмотрим другие моменты. Желаю удачи!

X

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

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

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

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