Разработка сайтов, поисковая оптимизация, продвижение, техническая поддержка и обслуживание вебсайтов любой сложности. Быстро, качественно и по разумной цене.
Продолжение статьи о создании шаблона для Joomla 3.0. В предыдущих статьях мы создали простую заготовку шаблона с несколькими позициями, посмотрели как управлять их стилями. Чтобы использовать Joomla по максимуму нужно разобраться с Bootstrap! Этот CSS фреймворк (если его так можно назвать) сильно облегчает жизнь разработчику.
Так получилось что по умолчанию модуль, который выводит верстку меню в шаблон не адаптирован под BootStrap. Этим и займемся! В папке html в нашем шаблоне можно переопределять стили модулей. Для того чтобы переопределить стиль меню нужно создать в папке html папку mod_menu и уже в ней два файла см. рисунок:
Вот код файла default.php изменения не очень большие добавился класс "nav" и "dropdown-menu".
<?php defined('_JEXEC') or die; // Note. It is important to remove spaces between elements. ?> <?php // The menu class is deprecated. Use nav instead. ?> <ul class="nav menu <?php echo $class_sfx;?>"<?php $tag = ''; if ($params->get('tag_id') != null) { $tag = $params->get('tag_id').''; echo ' id="'.$tag.'"'; } ?>> <?php foreach ($list as $i => &$item) : $class = 'item-'.$item->id; if ($item->id == $active_id) { $class .= ' current'; } if (in_array($item->id, $path)) { $class .= ' active'; } elseif ($item->type == 'alias') { $aliasToId = $item->params->get('aliasoptions'); if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) { $class .= ' active'; } elseif (in_array($aliasToId, $path)) { $class .= ' alias-parent-active'; } } if ($item->deeper) { $class .= ' deeper dropdown'; } if ($item->parent) { $class .= ' parent'; } if (!empty($class)) { $class = ' class="'.trim($class) .'"'; } echo '<li'.$class.'>'; // Render the menu item. switch ($item->type) : case 'separator': case 'url': case 'component': require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type); break; default: require JModuleHelper::getLayoutPath('mod_menu', 'default_url'); break; endswitch; // The next item is deeper. if ($item->deeper) { echo '<ul class="dropdown-menu">'; } // The next item is shallower. elseif ($item->shallower) { echo '</li>'; echo str_repeat('</ul></li>', $item->level_diff); } // The next item is on the same level. else { echo '</li>'; } endforeach; ?></ul>
И следующий файл default_component.php это вывод ссылок меню там тоже не очень большие изменения. Листинг нужно просто скопировать и вставить на свое место.
<?php defined('_JEXEC') or die; // Note. It is important to remove spaces between elements. $class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : ''; $title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : ''; if ($item->menu_image) { $item->params->get('menu_text', 1) ? $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' : $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />'; } else { $linktype = $item->title; } $data_toggle = $item->deeper ? 'data-toggle="dropdown"' : ''; switch ($item->browserNav) : default: case 0: ?><a <?php echo $class; ?>href="/<?php echo $item->deeper ? '#' : $item->flink; ?>" <?php echo $data_toggle; ?> <?php echo $title; ?>><?php echo $linktype; ?><?php echo $data_toggle !== '' ? '<b class="caret"></b>' : '' ?></a><?php break; case 1: // _blank ?><a <?php echo $class; ?>href="/<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php break; case 2: // window.open ?><a <?php echo $class; ?>href="/<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a> <?php break; endswitch;
Меню готово, остается только подключить BootStrap в шаблон:
<?php defined('_JEXEC') or die; //верхняя строчка присутствует во всех файлах Joomla JHtml::_('bootstrap.framework'); //подключение фреймворка JHtmlBootstrap::loadCss(false); //отключение стандартных CSS
$doc = JFactory::getDocument(); //добавление стилей bootstap
$doc->addStyleSheet('/templates/blank_j3/css/bootstrap.min.css');
?>
Скачать последнюю версию BootStrap можно от сюда
P.S. файл bootstrap.min.css я взял от туда и добавил в шаблон в папку css. Если возникают вопросы, пишите в комментариях, а мы ответим!
А для тех кто дочитал статью выкладываем исходники шаблона.
Продолжение статей по данной тематике. Создание шаблона для Joomla 3 (часть 4)
Понравилась статья? Возник вопрос? Вступайте в нашу группу и смело задавайте