Как добавить новые CSS, JS и шрифты

В этом уроке будет показано, как можно добавить пользовательские шрифты, CSS и JavaScript файлы в вашем шаблоне на основе Warp Framework.

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

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

Добавим CSS файл

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

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

Добавим JavaScript файл

Если вы хотите добавить свой собственный скрипт my.js, просто скопируйте его в /js каталог шаблона и добавьте в файл конфигурации template.config.php следующее:

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

Добавим шрифт

Иногда вам нужно добавить в шаблон специальный шрифт, это делается в несколько шагов. Есть хороший сервис FontSquirrel, где можно выбрать множество шрифтов из сети, вы даже можете загрузить нужный вам шрифт с вашего компьютера, преобразовав его на сайте сервиса в webfont. При этом соблюдайте авторские права их создателей, не каждый шрифт лицензирован для использования в сети.

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

Положите ваши файлы шрифтов в папку /fonts шаблона. Создайте файл CSS, который включает в название собственное имя шрифта, похожее на fontname.css. Отредактируйте файл /layouts/template.config.php и добавьте новую строку в раздел load fonts:

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

Обновите файл config.xml шаблона, чтобы сделать ваш шрифт доступным в настройках. Изначально доступны три различных типа шрифтов (Body, Header and Menu Font). Просто добавьте нужный вам новый шрифт в параметр option (font1, font2 или font3). В следующем примере новый шрифт добавлен в параметры Body Font.

<field name="font1" type="list" default="default" label="Body Font" description="Select the main body typeface.">
	<option value="arial">Arial</option>
	<option value="lucida">Lucida</option>	
	...
	<option value="myfont">My Font</option>

Затем создайте файл myfont.css для шрифта в каталоге /css/font1. Этот файл определяет все селекторы, которые вы хотите применить вашим новым шрифтам. Продолжаем наш пример и определим Body Font в myfont.css так:

body { font-family: "MyFontRegular"; }

• 1
• 2
• 3
• 4
• 5