Русский клуб Joomla/Шаблоны Joomla! http://joomclub.net/en/blog/templates/ ru vadim@joomline.ru tena2000@mail.ru Alto CMS v.1.1.13 RoundTheme выпустили новый шаблон Kunena и провели большое обновление http://joomclub.net/en/t/278/ http://joomclub.net/en/blog/templates/278.html vadim@joomline.ru Клуб шаблонов RoundTheme выпустил новый шаблон для Kunena форума под названием RND Kascetic. Шаблон выполнен в легких тонах и аскетичном стиле и отлично впишется в большинство современных шаблонов Joomla от известных производителей.

Также было проведено большое обновление с уже существующими шаблонами Kunena — все они получили дополнительные 5 цветовых стилей для унификации и демонстрации большей гибкости. Все шаблоны от RoundTheme выполнены с использованием техники адаптивного дизайна и корректно отображаются на мобильных устройствах.

Также были обновлены все квикстарты до актуальных версий Joomla и Kunena, а также улучшен скрипт демо-полигона для более удобной навигации.

Страница шаблона RND Kascetic

]]> Mon, 18 Aug 2014 21:07:12 +0400 jdoc:include - метод отображения контента на странице. http://joomclub.net/en/t/22/ http://joomclub.net/en/blog/templates/22.html al-teen@inbox.ru В статье Создание шаблонов для Joomla мы поверхностно коснулись темы методов вывода контента в теле шаблона. Давайте теперь подробно разберем что это и с чем его едят. Итак, объявления метода jdoc присутствуют  в каждом шаблоне Joomlaи выводят в тело шаблона (то бишь на страницу сайта) ту или иную информацию. В целом объявление метода выглядит следующим образом
<jdoc:include type="component" />

Данная строчка выводит на сайте информацию из компонентов, например статьи из com_content. Тип элементов вывода указывается в атрибуте.

    1. type — типы элементов вывода.

  • component — как писал выше, выводит основное содержание страницы. Может вызываться только один раз в шаблоне.
  • head — объявляется так же один раз после открывающего тэга <head>. Служит для вывода стилей, скриптов, <title> и метаданных текущей страницы.
  • message - выводит системные сообщения. Объявляется один раз в теле документа (body).
  • installation  — ничего не выводит и представляет собой «инструкцию» для установки.
  • module — выводит на странице единичный модуль. Количество объявлений не ограничено.
  • modules — в отличии от предыдущего типа, позволяет выводить в своей позиции не единичое число модулей.

Для первых четырех указанных типов достаточно лишь указать их на странице. В случае с типом модуля задача немного усложняется. Для того, чтобы вывести на странице модуль нам нужно сперва создать для него модульную позицию с уникальным идентификатором (название позиции модуля). Это делается при помощи атрибута name=«имя позиции» и обязательным добавлением строки:

<position>название позиции</position>
в файл templateDetails.xml. Описывая название позиции в templateDetails.xml мы обозначаем ее в системе и видим в менеджере модулей. Имена позиций могут быть произвольными, хотя name=«user3» позиция, по-умолчанию используется для отображения верхнего меню.

    2. style — описание стиля вывода (mod chrome).

От указанного стиля зависит внешний вид и структура оболочки модуля. Выглядит как

:<jdoc:include type="modules" name="user1" style="xhtml" />
По-умолчанию заложено несколько стилей вывода модулей:

  • xhtml - выводит модуль в блоке с заголовком
    function modChrome_xhtml($module, &$params, &$attribs)
    {
        if (!empty ($module->content)) : ?>
            <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
            <?php if ($module->showtitle != 0) : ?>
                <h3><?php echo $module->title; ?></h3>
            <?php endif; ?>
                <?php echo $module->content; ?>
            </div>
        <?php endif;
    }
  • table — выводит модуль в верстке табличной структуры
    function modChrome_table($module, &$params, &$attribs)
    { ?>
        <table cellpadding="0" cellspacing="0" class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
        <?php if ($module->showtitle != 0) : ?>
            <tr>
                <th>
                    <?php echo $module->title; ?>
                </th>
            </tr>
        <?php endif; ?>
            <tr>
                <td>
                    <?php echo $module->content; ?>
                </td>
            </tr>
            </table>
        <?php
    }
  • horz — выводит содержимое модуля в ячейке таблицы, горизонтально
    function modChrome_horz($module, &$params, &$attribs)
    { ?>
        <table cellspacing="1" cellpadding="0" width="100%">
            <tr>
                <td>
                    <?php modChrome_table($module, $params, $attribs); ?>
                </td>
            </tr>
        </table>
        <?php
    }
  • rounded — выводит модуль в нескольких вложенных блоках для сложного стилевого оформления в виде графических границ (напр. закругленных углов)
    function modChrome_rounded($module, &$params, &$attribs)
    { ?>
            <div class="module<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
                <div>
                    <div>
                        <div>
                            <?php if ($module->showtitle != 0) : ?>
                                <h3><?php echo $module->title; ?></h3>
                            <?php endif; ?>
                        <?php echo $module->content; ?>
                        </div>
                    </div>
                </div>
            </div>
        <?php
    }
  • outline — добавляет к блоку модуля предустановленные стили css
    function modChrome_outline($module, &$params, &$attribs)
    {
        static $css=false;
        if (!$css)
        {
            $css=true;
            jimport('joomla.environment.browser');
            $doc = JFactory::getDocument();
            $browser = JBrowser::getInstance();
            $doc->addStyleDeclaration(".mod-preview-info { padding: 2px 4px 2px 4px; border: 1px solid black; position: absolute; background-color: white; color: red;}");
            $doc->addStyleDeclaration(".mod-preview-wrapper { background-color:#eee; border: 1px dotted black; color:#700;}");
            if ($browser->getBrowser()=='msie')
            {
                if ($browser->getMajor() <= 7) {
                    $doc->addStyleDeclaration(".mod-preview-info {filter: alpha(opacity=80);}");
                    $doc->addStyleDeclaration(".mod-preview-wrapper {filter: alpha(opacity=50);}");
                }
                else {
                    $doc->addStyleDeclaration(".mod-preview-info {-ms-filter: alpha(opacity=80);}");
                    $doc->addStyleDeclaration(".mod-preview-wrapper {-ms-filter: alpha(opacity=50);}");
                }
            }
            else
            {
                $doc->addStyleDeclaration(".mod-preview-info {opacity: 0.8;}");
                $doc->addStyleDeclaration(".mod-preview-wrapper {opacity: 0.5;}");
            }
        }
        ?>
        <div class="mod-preview">
            <div class="mod-preview-info"><?php echo $module->position."[".$module->style."]"; ?></div>
            <div class="mod-preview-wrapper">
                <?php echo $module->content; ?>
            </div>
        </div>
        <?php
    }
  • none — аналогично не указанному вообще style. Выводит модуль без оформления и заголовка
    function modChrome_none($module, &$params, &$attribs)
    {
        echo $module->content;
    }

Все предустановленные стили располагаются в файле templates/system/html/modules.php. Но мы не ограничены использованием только предоставленных вариантов, а вполне можем создавать свои собственные.

    3. Создание пользовательского mode chrome.


Итак, предоставленные по умолчанию типы представления модулей не удовлетворяют текущих требований. Нужно добавить свой собственный стиль оформления. В качестве примера выберем достаточно часто повторяющуюся ситуацию. По заданию нужно вместо <h3> поместить заголовок модуля в тэг <span>, который является семантически нейтральным. Так же требуется поместить контентблок модуля в отдельный <div>. Для создания собственного стиля вывода модуля, воспользуемся стандартными средствами. В большинстве шаблонов  Joomla существет папка html/ (templates/имя шаблона/html/), используется для так называемой шаблонизации. То есть, если скопировать в эту папку шаблон модуля,  то вместо шаблона из директории modules/my_module/tmpl/default  будет выводиться файл из templates/имя шаблона/html/my_modules/default. Аналогично шаблонизируются и компоненты. Удобно и практично. В папке html/ Вашего шаблона создадим файл modules.php. Если такой папки в шаблоне нет, то создадим ее. В файл запишем

<?php
function modChrome_modbox($module, &$params, &$attribs) // Вызываем функцию
{
    if (!empty ($module->content)) : /* Проверяем наличие в поиции включенного модуля */?>
        <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); /* выводим суффикс css класса модуля */ ?>">
        <?php if ($module->showtitle != 0) : /* проверяем включен ли заголовок модуля */ ?>
            <span class="title"><?php echo $module->title; /* Выводим заголовок */ ?></span>
        <?php endif; ?>
            <div class="modcontent">
                <?php echo $module->content; /* Выводим содержимое модуля */ ?>
            </div>
        </div>
    <?php endif;
}
?>
Готово. Теперь нужно только указать его в качестве стиля вывода.

<jdoc:include type="modules" name="user1" style="modbox"/>
Назначаем в нашу позицию модуль и смотрим результат.

]]> Fri, 14 Sep 2012 00:46:26 +0400 Создание шаблонов для Joomla http://joomclub.net/en/t/16/ http://joomclub.net/en/blog/templates/16.html al-teen@inbox.ru Шаблоны практически всех CMS чем то похожи. Это обычные HTML шаблоны, интегрированные с системой. Чаще всего интеграция достигается путем вставки в нужные блоки программного кода, объявляющего те или иные элементы вывода: модулей, сайдбаров, материалов и т.д. Различия лишь в программировании, на уровне HTML никаких отличий нет и быть не может. Joomla в данном случае является классическим примером. Для того, чтобы создать в блоке шаблона позицию для модуля, нам требуется всего лишь вписать в него строчку 
<jdoc:include type="modules" name="mymodule" />

Где <jdoc:include /> — метод объявления вывода элемента на страницу.

type=«modules» — указания типа выводимого элемента.

name=«mymodule» — название модульной позиции.

Минимальная информация, необходимая для создания позиции в шаблоне. Используется для вывода на странице модулей, например: меню навигации, формы авторизации, «хлебных крошек» и т.д. Так же можно указывать title="" для обозначения подсказки, style="" для обозначения стиля вывода модуля. В случае отсутствия style модуль будет выводиться без заголовка. Обозначения стилей подробнее разберем в следующих статьях. А пока, в качестве наглядного примера создадим простой шаблон для Joomla.

Для этого необхомо создать пустую папку c произвольным названием, пусть будет mytemplate, в ней создадим папку css. Далее создадим файлы templateDetails.xml, index.php и пустой файл index.html для защиты от несанкционированного просмотра содержимого папки. В css/ файл стилей template.css.

Содержимое templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <!-- Общая для всех xml шапка, определяющая тип документа и его кодировку -->
<extension version="2.5" type="template" client="site"> <!-- Указание инсталлятору Joomla о версии и типе устанавливаемого расширения -->
    <name>mytemplate</name> <!-- Имя шаблона в списке менеджера шаблонов -->

    <files> <!-- Контейнер для списка файлов шаблона. -->
        <folder>css</folder> <!-- Указание папок -->
        <filename>index.html</filename> <!-- Указание файлов -->
        <filename>index.php</filename>
    </files> <!-- Обязательно требуется для стандартного установщика Joomla. Важно! Если информация о папках или файлах, указанная в данном блоке не соответствуют действительности, например не верно указано имя, или файл отсутствует, то получим ошибку установки -->

    <positions> <!-- Контейнер для списка модульных позиций шаблона -->
        <position>debug</position> <!-- Указание имени модульной позиции -->
        <position>header</position>
        <position>menu</position>
        <position>footer</position>
    </positions>
</extension>

В файле index.php

<?php
// Защита от прямого обращения к сценарию.
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<meta charset="utf-8">
<head>
        <jdoc:include type="head" /> // Требуется для вывода информации <title></title>, meta стилей и скриптов расширений.
        
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css">
        // Подключаем системные стили
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css">
        // Подключаем файл стиля шаблона. Важно! Путь к файлу необходимо указывать в точности, как написано здесь, то есть абсолютный путь. 
        // В противном случае чревато неправильным отображением шаблона на внутренних страницах. То же касается и подключения js файлов.
</head>
  <body>
    <div id="page"> 
        <header>
            <jdoc:include type="modules" name="header" /> // Модульная позиция header
        </header>
        <nav>
            <jdoc:include type="modules" name="menu" style="xhtml" /> // Модульная позиция menu
        </nav>
        <section>
            <jdoc:include type="message" /> // Позиция вывода системных сообщений
            <jdoc:include type="component" /> // Вывод информации компонентов
        </section>
        <footer>
            <jdoc:include type="modules" name="footer" /> // Модульная позиция footer
        </footer>
    </div>
    <jdoc:include type="modules" name="debug" /> // Вывод отладочной информации
  </body>
</html>

template.css

body{margin:0;padding:0;}
header,nav,section,footer{display:block;padding:5px;}
#page{border:1px #000 solid;width:960px;margin:0 auto;}
header{height:100px;}
nav{width:200px;float:left;margin:10px 0;}
section{width:730px;float:right;margin:10px 0;}
footer{height:100px;}

Пример, наглядно демонстрирующий простоту работы с шаблонами Joomla. Алгоритм несложный, взять готовый шаблон HTML и вывести в нужных местах нужные элементы. Конечно же, в более сложных шаблонах приходится использовать условия отображения, скрипты, пользоваться другими возможностями Joomla, а так же вести разработку на различных шаблонных фрэймворках (Gantry, T3 и т.д.). Но если Вам не требуется ничего сверхординарного и сложного, то вполне можно обойтись даже описанным выше простейшим функционалом.

 

]]> Wed, 12 Sep 2012 14:21:01 +0400