Адаптация шаблона под Joomla 3 выполняется в ряд шагов. Ввиду того, что в Joomla 3 используется фреймворк Bootstrap, множество классов и id имён были изменены. Кроме того, для полного использования всех возможностей Bootstrap нужно подключить некоторые файлы.
В данном материале не рассматриваются все возможности пользовательского интерфейса Joomla 3 и статья - всего лишь краткий курс по базовой адаптации шаблона, однако при более основательном подходе вы можете добиться полной адаптации шаблона, а также использования новых возможностей интерфейса Joomla 3 и фреймворка Bootstrap.
В некоторых случаях, когда верстка была основательно проработана, и в шаблоне присутствует множество стилей, либо активно применяется Mootools, как временный вариант, вы можете попробовать использовать переопределения от версии 2.5.
| 2.5 | 3.x | Заметки |
|---|---|---|
| menu | nav | |
| pagnav | pager | |
| actions | dropdown-menu | Выведет только текст, без иконок |
Файл index.php
Добавляем следующий код сразу после head:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='../media/jui/js/jquery.js'></script>
<script src='../media/jui/js/bootstrap.min.js'></script>
<script src='../media/jui/js/chosen.jquery.min.js'></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
Следующий код добавим после подключенного файла template.css:
// если нужны стили для RTL языка (с направлением письма справа налево)
if ($this->direction == 'rtl') :
$doc->addStyleSheet('../media/jui/css/bootstrap-rtl.css');
endif;
// Загружаем специальный CSS файл для текущего языка
$file = 'language/' . $lang->getTag() . '/' . $lang->getTag() . '.css';
if (JFile::exists($file)) :
$doc->addStyleSheet($file);
endif;
$doc->addStyleSheet('../media/jui/css/chosen.css');
Стили редактора во фронтэнде
Во фронтальной части сайта в редакторе используются закладки (табы) для разделения области редактирования и блока с опциями. Если в этом нет надобности, необходимо переопредить стили так, чтобы этот блок не отображался:
<ul class="nav nav-tabs">
<li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('JEDITOR') ?></a></li>
<?php if ($params->get('show_urls_images_frontend')) : ?>
<li><a href="#images" data-toggle="tab"><?php echo JText::_('COM_CONTENT_IMAGES_AND_URLS') ?></a></li>
<?php endif; ?>
<li><a href="#publishing" data-toggle="tab"><?php echo JText::_('COM_CONTENT_PUBLISHING') ?></a></li>
<li><a href="#language" data-toggle="tab"><?php echo JText::_('JFIELD_LANGUAGE_LABEL') ?></a></li>
<li><a href="#metadata" data-toggle="tab"><?php echo JText::_('COM_CONTENT_METADATA') ?></a></li>
</ul>
Продолжение следует.
