четверг, 4 декабря 2014 г.

Подключение Bootstrap и Font Awesome в CMS Joomla

Перед началом работы с Bootstrap и Font Awesome Вам потребуется скачать библиотеки с официального сайта разработчиков.


Ссылка для Bootstrap                  Ссылка для Font Awesome
Подключение Bootstrap

Так как данная библиотека уже присутствует в CMS Joomla, то особого труда при подключении возникнуть не должно. Для начала нам придется добавить немного кода в самом верху index.php вашего шаблона:

<?php defined('_JEXEC') or die; JHtml::_('bootstrap.framework'); JHtml::_('jquery.framework'); $app = JFactory::getApplication(); ?>

Теперь, если Вы хотите использовать готовые стили Bootstrap, то Вам нужно скопировать CSS файлы bootstrap.css и bootstrap-responsive.css в папку вашего шаблона. Затем  в index.php между тегами <head></head> вставляем:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" type="text/css" media="screen" /><link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap-responsive.css" type="text/css" media="screen" />


Подключение Font Awesome

Архив Font Awesome состоит из 4 папок, нам нужно всего две - css/ и fonts/. Копируем в корень шаблона полностью папку fonts/, а из папки стилей css файл font-awesome.css в папку css/ шаблона joomla. Далее также как и в случае с Bootstrap подключаем font-awesome.css в index.php, между <head></head> добавляем :

<!-- Font Awesome -->
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/font-awesome.css" type="text/css" />


Чтобы не возникло ошибок при подключении папок  css/, fonts/, js/ , они должны находиться в корне шаблона по пути имя_сайта\templates\имя_шаблон\.