Как расширить шаблон joomla
Как расширить шаблон joomla
Размера сайта это один из начальных параметров который стоит определить для своего сайта. От этого размера будет зависеть всё внутреннее одержимое сайта: блоки, меню и тд.
Если сайт вам кажется недостаточной ширины, то самое время исправить её. Единственное, нужно иметь в виду, что изменяя стандартную ширину сайт может некорректно отображаться на других разрешениях экрана. Поэтому изменять ширину нужно с умом и просматривать на разных разрешениях.
Просматривать свой сайт на разных разрешениям можно с помощью расширения Google: Windows Resizer.
Пример изменения ширины сайта
Шаблон не имеет тонких настроек в административной панели поэтому, делаем это с нуля.
1. Открываем сайт в любом браузере, например Chrome.
Наводим мышкой на верхнюю часть блока, нажимаем ПКМ и выбираем пункт: «Просмотр кода элемента».
2. В нижней части экрана открывается исходный код данного элемента. Слева HTML справа CSS.
3. Изменяем правую CSS часть. В данном случае свойство max-width на любое другое (1000px).
Так мы изменили максимально возможное значение ширины сайта. Теперь нужно изменить саму ширину.
4. Прокручиваем окошко CSS немного вниз. Изменяем свойство width на предполагаемое(1000px), но не более значения max-width.
После изменения этих значений, сайт автоматические применит данный размер. Но чтобы значения сохранились нужно прописать эти свойства в сам файл.
5. Открываем файл: сайт/template/protostar/css/template.css, переходим в указанные CSS строки (6716 и 4930).
Вносим изменения для первого значения:
Вот мы и изменили один из главных параметров сайта. Если вы используете другой шаблон, то сначала проверьте нет ли настроек размеров сайта в административной панели, а уже затем приступайте к подобным манипуляциям.
Внешний вид шаблонов. Как редактировать шаблон Joomla
В данной статье мы рассмотрим, как редактировать внешний вид шаблона Joomla.
Любой человек, создающий сайт, хочет сделать свой сайт уникальным, ну или хотя бы не похожим на другие.
Сейчас почти все шаблоны для Joomla общедоступны, скачать и установить их на сайте может каждый.
Давайте на примере разберем видоизменение стандартного шаблона Beez5.
Изменение заднего фона шаблона (background)
Я использую браузер Chrome, нажимаем F12 или щелкаем правой клавишей мыши на нужном месте и нажимаем «Просмотр кода элемента».
Как видно на рисунке, за задний фон шаблона отвечает тег body со стилем background.
В стилях указан цвет фона #EEE и фоновая картинка (путь к ней). Именно эти параметры дают нам фон сайта.
Для их изменения нужно просто заменить эти параметры (указать новый цвет и путь к новой картинке).
Все изменения производятся в файле, который указан в панели разработчика, здесь это beez5.css, после двоеточия указана строка в которой нужно изменять параметр, у нас это 19 строка.
Путь к файлу можно посмотреть, если навести на название курсором.
Изменение логотипа сайта
Изменять логотип очень легко и для этого есть несколько способов.
Способ 1:
Так же, как и в первом способе, наводим курсор на логотип, щелкаем правой клавишей мыши и нажимаем Просмотр кода элемента. Все, что нам надо узнать, это адрес (путь) к логотипу. Теперь делаем свой логотип, даем ему такое же имя (fruits.gif) и просто заменяем на него старый логотип.
Способ 2:
Способ 3:
Делаем все так же, только заменяем не файл, а путь к логотипу. Как видно на картинке, картинка вставлена через html, а не через css. Поэтому нужно изменять исходный код шаблона. Делается это легко:
Изменить ширину шаблона и блоков
Таким же образом редактируются отдельные блоки. Находим блок, смотрим и изменяем стиль.
Изменение цвета текста и ссылок
Все файлы могут редактироваться через редакторы типа notepad++ или через стандартный «редактор» Joomla.
Ваше мнение важно для нас. Пишите Ваши комментарии.
Резиновый дизайн и дизайн с фиксированной шириной шаблона «Protostar» Joomla
В этой статье рассмотрим поле «Тип контейнера» шаблона «Protostar», которое влияет на отображение сайта на CMS Joomla, растягивая элементы на всю ширину экрана (резиновый дизайн) или располагая элементы дизайна в области заданной ширины (фиксированный дизайн). Для этого потребуется открыть вкладку «Дополнительные параметры» в стилях шаблона Protostar (в «Менеджере шаблонов»).
Поле «Тип контейнера» шаблона «Protostar»
Поле «Тип контейнера» шаблона «Protostar» находится на вкладке «Дополнительные параметры» в самом низу. У него два положения переключателя:
После выбора одного из стилей, чтобы изменения вступили в силу, нужно сохранить эти изменения одной из кнопок управления, находящимся в верхней части страницы «Менеджера шаблонов»:
Рассмотрим, на что конкретно влияет изменение переключателя поля «Тип контейнера» шаблона «Protostar».
Стиль с фиксированной шириной шаблона «Protostar»
После того, как выбрана красная кнопка «Фиксированный» поля «Тип контейнера» и изменения сохранены, можно наблюдать появление фона на страницах сайта, а основной контент выдаётся в ограниченном по ширине поле:
Резиновый стиль шаблона «Protostar»
Если выбрать зелёную кнопку «Резиновый» поля «Тип контейнера» и сохранить этот выбор, то лишние поля с фоном исчезают, а основной контекст располагается по всей ширине и высоте окна браузера:
Мне больше нравится резиновый стиль шаблона «Protostar», но каждый может выбрать именно тот стиль, которой удовлетворит его личные эстетические потребности или потребности пользователей его сайта.
Как сверстать шаблон для Joomla
Введение
Добавление шаблона
Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:
Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:
Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй — en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.png и template_thumbnail.png. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе — это самый важный файл, он содержит подробное описание нашего шаблона:
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также, на всех страницах, кроме главной, есть сайдбар слева и название страницы. Поиск и все виды меню мы оформим в виде модулей Joomla!, а все тексты будут оформлены через механизм локализации.
Структура страниц
Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.
Шаблон страницы
Следующим шагом нам нужно сделать шаблон страницы Joomla! Откройте файл index.php, который мы создали в папке нашего шаблона и добавьте в него код, который создаст каркас страницы:
После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В блок header нашего шаблона вставьте разметку для логотипа:
В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:
К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл
Форма поиска
После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:
Осталось добавить стили в template.css:
Навигация
Далее откройте templateDetails.xml и добавьте позицию главного меню:
На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:
Заголовок страницы
Joomla! автоматически вставляет заголовки статей в содержимое страницы, но на главной странице нам заголовок не нужен, а на других, он должен иметь совсем другую верстку, поэтому давайте просто отключим автоматическую вставку заголовка и вставим заголовок внутри шаблона так, как это нам нужно.
Для начала немного теории. Настройки отображения элементов страниц задаются в Joomla! в трёх местах:
Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.png и добавьте стилевые правила:
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок
В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:
Прописываем стили в template.css:
В итоге внутренняя страница сайта должна выглядеть вот так:
Главная страница
Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:
Теперь осталось стилизовать данный код.
Сайдбар
Если вы посмотрите на psd макеты, то увидите, что внутренние страницы отличаются от главной наличием левой колонки.
Давайте добавим его в index.php перед вызовом контента страницы:
Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:
В качестве заглушки для карты создайте пустой файл sample.png и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:
Страница About us
Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:
about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
И стили в template.css:
Страница поиска
В самом начале, когда мы создавали шаблон шапки, мы добавили в него поиск. Результатом поиска является страница, которая сейчас не очень хорошо выглядит. Давайте добавим для нее стили:
Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.png в папку images шаблона. Размер картинки должен быть 16х16 пикселей.
Страница печати
Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.
Страница ошибки
Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:
В целом структура здесь аналогична предыдущим страницам, но есть несколько нюансов. Во-первых, данный тип страницы не поддерживает конструкции вида « », поэтому пришлось отказаться от всех модулей и даже динамического блока head, поэтому теги в блоке head прописаны вручную. В заголовке страницы появился новый ключ локализации: TPL_WHITESQUARE_ERROR со значением «Error». Не забудьте прописать его в файлах локализации. И в области контента страницы выводится сообщения с кодом и текстом ошибки.
Заключение
На этом создание шаблона Joomla! закончено. Готовый проект можно скачать здесь.
Макеты Joomla. Как сделать ваш сайт максимально уникальным.
Сегодня я хочу представить вашему вниманию очень интересную статью. Используя технику, которая в ней описывается, вы сможете придать вашему сайту, сделанному на Joomla, максимальную гибкость и уникальность. Что я имею ввиду? Только представьте: оформление каждого модуля, каждой категории, да хоть каждого материала вы можете сделать неповторимым. Интересно? Тогда читаем дальше…
Итак, в чем же фокус? Дело в переопределении макетов или создании собственных уникальных макетов и их привязке к определенным элементам Joomla. Многие поклонники Joomla знают о возможности переопределения макетов. Мы можем переопределять и изменять под себя на сайте практически всё. Но давайте подробнее.
Что такое макет?
Начнем с основ. Мы привыкли, что в Joomla есть некоторые общие элементы. Это материал, категория, модуль, компонент, шаблон, плагин и пункт меню. Давайте представим, что у нас есть следующая задачка:
Заказчик хочет, чтобы в статье категория, автор, дата создания и иконки кнопок появлялись не перед, а после основного текста материала.
Конечно, можно хорошенько поработать с CSS и поменять блоки местами с помощью позиционирования. Но есть и более простой вариант – переопределение макета.
В Joomla, есть шаблоны. В стандартном варианте они изменяют только общую конструкцию сайта. Проще говоря, с помощью шаблона Joomla мы меняем редактируем шапку, подвал, центральную часть, задаем позиции модулей и общее оформление. А если нам нужно заглянуть в конструкцию статьи? В шаблоне Joomla указывается только то, что мы вызываем компонент. Для изменения конструкции статей, категорий, модулей, как раз и используются макеты. Макет Joomla (Joomla layout) – это как бы шаблон в шаблоне. Это шаблон контента Joomla.
Для решения нашей задачки нам необходимо отредактировать макет статьи, изменив в ней последовательность элементов.
Где находятся макеты Joomla?
В Joomla есть достаточно строгая парадигма разработки. Если вы понимаете ее, то легко сможете найти нужный вам макет. Для поиска макета в общем случае необходимо следовать следующим шагам:
Хорошо, файл макета мы нашли. Что дальше?
Переопределение макетов в Joomla
Просто так вносить изменения в макет Joomla нельзя. Почему? Дело в том, что мы создадим хак. О том, что такое хак, и почему это плохо, вы можете почитать в отдельной статье. Если говорить коротко, после внесения изменений в системные файлы Joomla они могут быть стерты при обновлении CMS, т.к. файл с изменениями будет перезаписан файлом из обновления.
Из-за проблемы хаков как раз и появился такой термин, как «Переопределение макетов Joomla» (Joomla layout overrides).
Под переопределением макета подразумевается копирование его файла в используемый на сайте шаблон Joomla.
Куда нужно скопировать макет, чтобы он считался переопределенным? Есть жесткая декларация:
Давайте рассмотрим пару реальных примеров:
Если каких-либо каталогов в шаблоне не хватает для соответствия заданным путям, вы должны создать их в самостоятельно.
Если вы все сделали правильно, то увидите такое окно:
В нем показаны все макеты компонентов и модулей Joomla. Для создания переопределения вам достаточно кликнуть но ссылке с нужным макетом.
У сторонних расширений Joomla, например, у Virtuemart, также есть макеты и они переопределяются в шаблон тем же способом и по тем же причинам, что и стандартные макеты Joomla.
Вот таким несложным способом переопределяются макеты Joomla. Но не увлекайтесь и не переопределяйте макеты бездумно. Помните, что если макет переопределен, при обновлении Joomla и расширений он не будет изменяться. Это означает, что все новые функции, затрагавающие переопределенный макет, не будут в нем функционировать.
Альтернативные макеты Joomla
Передпределение макетов это хорошо, но что делать, если для разных страниц сайта нам нужны разные макеты?
Рассмотрим задачку 2:
Заказчик хочет, чтобы в статье1 категория, автор, дата создания и иконки кнопок появлялись перед основным текстом, а в статье2 – после основного текста материала.
Если использовать только стандартный макет Joomla, это будет большой проблемой. Но кроме переопределений есть и другая техника. Макет можно не только переопределять, но и создавать еще один, альтернативный макет. Альтернативный макет можно назначать для отдельных единиц контента прямо в админке. Например, вы можете задать для одной статьи один макет, а для другой – другой.
Мы можем создать несколько файлов одного и того же макета с различной структурой, назвав их уникальными именами. Вы могли заметить, что в настройках материалов, категорий и модулей Joomla есть опция «Альтернативный макет». Если в шаблоне существует несколько макетов, она позволяет выбрать любой из них. Благодаря этой опции, в Joomla мы можем задавать собственные макеты хоть для каждого материала и модуля, а также, как мы увидим далее, и для каждого пункта меню.
Далее мы рассмотрим основные типы стандартных макетов Joomla и способы создания альтернативных макетов для них.
Какие бывают макеты?
Все макеты, имеющиеся в Joomla, можно разделить на несколько категорий:
Есть и некоторые другие типы макетов, но они используются очень редко и на данном этапе ими можно принебречь.
Рассмотрим каждую категорию подробнее.
Макеты компонентов
Макеты компонентов позволяют изменять структуру компонентов, созданных по концепции MVC. Все стандартные компоненты Joomla могут быть перестроены. Рассмотрим пример на компоненте com_content – перестроим статью.
Предположим, что у нас используется шаблон Beez_20.
1) В корневой папке шаблона создаем подпапку html
2) В папке html, созданной в п.1, создаем подпапку com_content
3) В папке com_content, созданной в п.2. создаем подпапку article
4) Заходим в папку components\com_content\views\article\tmpl и копируем файл default.php в папку article, созданную в п.3.
5) Для создания альтернативного макета изменяем название файла default.php на любой другое, содержащее только английские буквы и цифры, но не имеющее в себе знака нижнего подчеркивания «_», например, myarticle.php
6) Если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.5, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _myarticledop1.php
7) Редактируем файл myarticle.php, изменяя его структуру под свои нужды.
8) Если мы хотим, чтобы данный файл применялся для всех статей по умолчанию, в настройках менеджера материалов в опции «альтернативный макет» выбираем myarticle.php
9) Если мы хотим, чтобы данный макет применялся только для одной статьи, в настройках статьи в опции «альтернативный макет» выбираем myarticle.php
10) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:
11) Если макет не применился, смотрим ограничения, описанные ниже, думаем, анализируем.
Альтернативные макеты могут использоваться только при соблюдении двух правил:
Макеты категорий
Макеты категорий позволяют изменять структуру категорий, Joomla. Смысл такой же, как и у макетов компонентов. По умолчанию существует два макета категории блог и список. Вы можете изменять их структуру или создавать собственные макеты. Ниже рассмотрим изменение макета блога категории.
Предположим, что у нас используется шаблон Beez_20.
1) В корневой папке шаблона создаем подпапку html
2) В папке html, созданной в п.1, создаем подпапку com_content
3) В папке com_content, созданной в п.2. создаем подпапку category
4) Заходим в папку components\com_content\views\category\tmpl и копируем файл blog.php в папку category, созданную в п.3.
5) Для создания альтернативного макета изменяем название файла blog.php на любой другое, содержащее только английские буквы и цифры, но не имеющее в себе знака нижнего подчеркивания «_», например, myblog.php
6) если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.4, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _myblogdop1.php
7) редактируем файл myblog.php, изменяя его структуру под свои нужды.
8) если мы хотим, чтобы данный файл применялся для всех категорий по умолчанию, в настройках менеджера материалов в опции «альтернативный макет» выбираем myblog.php
9) если мы хотим, чтобы данный макет применялся только для одной категории, в настройках категории в опции «альтернативный макет» выбираем myblog.php
10) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:
11) если макет не применился, смотрим ограничения, описанные ниже, думаем, анализируем.
Альтернативные макеты могут использоваться только при соблюдении двух правил:
Макеты пунктов меню
Создание макетов пунктов меню отличается от создания макетов компонентов и категорий. Пункты меню имеют более высокий приоритет и будут перекрывать собой макеты компонентов и категорий. Рассмотрим пример создания макета пункта меню материала.
Предположим, что у нас используется шаблон Beez_20.
1) В корневой папке шаблона создаем подпапку html
2) В папке html, созданной в п.1, создаем подпапку com_content
3) В папке com_content, созданной в п.2. создаем подпапку article
4) Заходим в папку components\com_content\views\article\tmpl и копируем файлы default.php и default.xml в папку article, созданную в п.3.
5) Для создания альтернативного макета изменяем название файлов default.php и default.xml на любые другие(совпадающие!), содержащие только английские буквы и цифры, но не имеющие в себе знака нижнего подчеркивания «_», например, mymenuarticleitem.php и mymenuarticleitem.xml
6) если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.4, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _mymenuarticleitem.php
7) редактируем файл mymenuarticleitem.php, изменяя его структуру под свои нужды. Редактируем файл mymenuarticleitem.xml, изменяя название пункта меню в третьей строке:
и добавляя в него новые опции настройки пункта меню, если это требуется.
8) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:
9) создаем новый пункт меню и выбираем тип с названием, указанным в п.7.:
Макеты модулей
Макеты модулей позволяют изменять структуру модулей. Перестроены могут быть любые модули. Рассмотрим пример на модуле mod_login.
Предположим, что у нас используется шаблон Beez_20.
1) В корневой папке шаблона создаем подпапку html
2) В папке html, созданной в п.1, создаем подпапку mod_login(название папки должно совпадать с оригинальным названием папки модуля)
3) Заходим в папку modules\mod_login\tmpl и копируем файл default.php в папку mod_login, созданную в п.2.
4) Для создания альтернативного макета изменяем название файла default.php на любой другое, содержащее только английские буквы и цифры, но не имеющее в себе знака нижнего подчеркивания «_», например, mylogin.php
5) Если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.4, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _mylogindop1.php
6) Редактируем файл mylogin.php, изменяя его структуру под свои нужды.
7) Чтобы макет применялся к модулю, в настройках модуля в опции «альтернативный макет» выбираем mylogin.php
8) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:
TPL_BEEZ_20_MOD_LOGIN_LAYOUT_mylogin =» Название макета«.
Теперь, если требуется создать два разных отображения одного и того же модуля, достаточно скопировать модуль и изменить его макет и CSS-суффикс (кстати, о CSS-суффиксах я писал отдельную статью Суффикс класса модуля или как сделать каждый модуль Joomla уникальным. ). Сочетание суффиксов и макетов дает модулям непревзойденную гибкость.
Используя шаблоны, макеты, и css-суффиксы Joomla, вы можете как угодно изменять ваш шаблон. Теперь это дело техники. И пусть после этого кто-нибудь попробует сказать, что шаблон Joomla не гибкий :-). Удачи!