Добавляем JS, CSS и шрифты в фреймворк Warp 6

Warp 6

Данный материал рассматривает методы по добавлению собственных JS и CSS файлов в шаблон Joomla который основан на Warp 6 от студии YooTheme.

Файл который отвечает за определение всех классов PHP, подгрузку CSS и JavaScript файлов находиться по пути /layouts/template.config.php. Так же в его задачу входит поддержка браузера IE. Для подключения в шаблоне собственных CSS и JavaScript файлов нужно редактировать именно этот файл.

При создании собственного стиля шаблона или добавлении новых значений можно произвести замену файла template.config.php который используеться по умолчанию. Для этого нужно просто скопировать конфигурационный файл который расположен по пути /layouts/template.config.php в директорию /styles/название _вашего _стиля/layouts/template.config.php.

Добавляем файлы стилей CSS

Подгрузкой всех CSS файлов шаблона в фреймворке Warp 6 занимаеться файл template.config.php. Для добавления своего файла CSS /css/new.css нужно использовать следующий синтаксис:

// load css
$this['asset']->addFile('css', 'css:new.css');

Добавляем файлы JavaScript

Если нужно добавить файл JS в код сайта который имеет название new.js, то для этого нужно его перенести/скопировать в папку /js которая находиться в корне вашего шаблона, а в файл template.config.php нужно добавить строки следующего содержания:

// add javascripts
$this['asset']->addFile('js', 'js:new.js');

Сторонние шрифты

Для интеграции сторонних шрифтов в шаблон на основе Warp необходимо произвести два шага. Шрифты можно использовать с любого сервиса в интернете, главное, что бы их использование, не нарушало авторское право. Так, например сайт по продаже телевизоров http://www.notus.com.ua/Televizory_samsung может не беспокоится о нарушении авторских прав.

Добавляем шрифт в шаблон Warp

Копируем файл шрифта в папку /fonts. Создаем css файл в котором будет содержаться шрифт и называем его соответствующим именем, например myfont.css. Редактируем файл /layouts/template.config.php в котором прописываем новую строку (там где load fonts).

// load fonts
$this['asset']->addFile('css', 'template:fonts/myfont.css');

Для того что бы наш шрифт стал доступным при произведении настроек шаблона, нужно обновить файл config.xml. В настройках доступно три типа для использования шрифтов - Body, Header и Menu. Достаточно добавить новую опцию в любой из доступных параметров шрифта - font1, font2 или font3. В примере ниже показан способ, при котором шрифт добавляется в Body Font. По аналогии можно добавить любой шрифт в нужный вам раздел.

Warp 6

Дальше нужно создать файл с названием myfont.css в папке по адресу /css/font1. Этим файлом и определяться все селекторы, к которым и будет применяться ваш собственный шрифт. Тогда назначаем шрифт общему контейнеру body, прописав в файле myfont.css строку:

body { font-family: "MyFontRegular"; }

Последние материалы

Последние комментарии