Как применить стили в битрикс

Битрикс – Как правильно подключать CSS и JS файлы в шаблон

Разберем все способы подключения и выберем какой же самый лучший.

Как подключить стили в обычном HTML

Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):

2. Инлайново (крайне не рекомендуется):

3. через тег style (иногда допустимо, но редко):

body

Битрикс – Как добавить стили в шаблон?

В битриксе стили подключаются таким способом:

SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css")?>

Благодаря $APPLICATION->SetAdditionalCSS, а SITE_TEMPLATE_PATH – указывает на путь к текущему шаблону сайта.
Помимо этого способа существует подключение при помощи класса:

// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addCss('/path/style.css');

Данный метод якобы лучше, но мне привычнее первый :), хотя этот новее и правильнее.
Оба метода имеют неочевидный второй параметр additional – Необязательный. По умолчанию “false”. Добавление файлов стилей или js в конец списка ресурсов шаблона.

То есть, для его использования пишем:

Asset::getInstance()->addCss('/path/style.css', true); // или $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css", true);

Таким же способом вы можете добавить стили в шаблоны компонентов, речь про template.php.

Битрикс – Как добавить скрипты в шаблон?

Сначала функция на ядре D7:

// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addJs('/path/main.js');

Старая запись выглядит так и использует $APPLICATION->AddHeadScript:

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/main.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/cookie.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/custom.js');

$additional – По умолчанию false, то есть скрипты подключаются после подключения скриптов ядра и шаблона сайта. Если true скрипты, подключаемые данным методом, будут добавляться в конец текущего таргета вывода скриптов. Т.е. если относятся к ядру то после всего ядра, если к шаблону, то после шаблона сайта и смогут на него повлиять.

А зачем вообще подключать таким способом свои скрипты и стили?
Всё просто, в битриксе есть способы оптимизации этих файлов. Заходим в админке в:
Настройки → Настройки продукта → Настройки модулей → Главный модуль
И видим там такую картину

Теперь вы знаете несколько способов подключения своих CSS и JS файлов, знаете про скрытый параметр, а также зачем подключать стили и скрипты именно с использованием API.

Как в битриксе добавить свою строку в head

Очень просто, делается это при помощи:

Правильное подключение стилей и скриптов в Битрикс

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс

Для чего подключать скрипты и js через API

Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида

Для стилей Для js файлов

Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс

До выхода нового ядра D7

// Для подключения скриптов $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/file.js" ); // Подключение css $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true); // Подключение мета тегов или сторонних файлов $APPLICATION->AddHeadString("name=''");

Подключение стилей и скриптов с D7:

use Bitrix\Main\Page\Asset; // Для подключения css Asset::getInstance()->addCss("/bitrix/css/main/bootstrap.min.css"); // Для подключения скриптов Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js"); // Подключение мета тегов или сторонних файлов Asset::getInstance()->addString("");

По условиям обратной совместимости, использовать можно оба метода- оба способа работают правильно и принципиальной разницы не имеют

Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы

Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.

Самое главное, вы сможете подключать необходимые файлы в «объединение» по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта

Подключение стилей и js в шаблонах компонентов

Если нужно подключить стили и скрипты, в нутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто поспользуйтесь такой конструкцией

$this->addExternalCss("/local/styles.css"); $this->addExternalJS("/local/liba.js");

Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат

Кроме того. Внутри ядра 1С-Битрикс есть вспомогательные скрипты и библиотеки: jQuery, Vue, font-awesome итд. Например, четвертый bootstrap можно подключить так:
\Bitrix\Main\UI\Extension::load(«ui.bootstrap4»);

Работа со стилями в битрикс

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

Для начала немного окунемся в теорию. По задумке разработчиков битрикс, файлов со стилями должно быть много… как бы это нелепо ни звучало. Итак, стилевая составляющая типового шаблона сайта предполагает наличие:
1. файла template_styles.css — в терминологии битрикс «стили шаблона»
2. styles.css — «стили сайта»
3. style.css — стили шаблона компонента
4. дополнительные файлы стилей

template_styles.css

Файл располагается в корневой директории шаблона и включает правила, которые не отвечают за отображение результатов работы компонентов, контента сайта и содержимого включаемых областей. Обычно сюда относят базовую разметку сверстанного макета — размеры и положение колонок, общий фон сайта, обрамляющие блоки включаемых областей и т.д. Этот файл в теле страницы подключается последним, поэтому, при равной специфичности, правила из template_styles.css будут переопределять другие.

styles.css

Файл располагается в корневом каталоге шаблона. В него входят стили, использование которых планируется в визуальном редакторе. К любому классу из styles.css можно сделать текстовое описание, оно будет отображаться в выпадающем списке (Стиль).

Зачем это надо читайте в курсе на dev.1c-bitrix.ru:)

Описания хранятся в файле .styles.php в виде

 "Описание для стиля .class-name", "class-name2" => "Описание для стиля .class-name2", ); return $arStyles; ?>

style.css

Это файл стилей скопированного шаблона компонента. Именно его содержимое можно редактировать из режима разработки.

Файл находится в папке шаблона компонента и содержит правила для форматирования результатов его работы.

Дополнительные файлы стилей

Служат для произвольных нужд, например, я практически всегда делаю layout.css со стилями каркаса сайта.

Подключаются такие файлы в секции файла header.php шаблона таким вызовом функции

SetAdditionalCSS("/bitrix/templates/".SITE_TEMPLATE_ID."/filename.css");?>

Пример создания файлов стилей для битрикс

Сначала выделяем в общем коде смысловые блоки (при грамотной верстке это делается сразу).

body < margin:0; padding:0; font-family:Arial, tahoma; >/* стили «каркаса» сайта */ #main < width:979px; margin:0 auto; text-align:left; >#header < height:548px; position:relative; >#footer < height:54px; >.col-1 < width:239px; >.col-2 < width:707px; >/* стили контейнеров для включаемых областей */ #header .logobox < position:absolute; width:200px; left:10px; top:10px; >/* стили контейнеров */ .col-1, .col-2, .col-3 < float:left; >.wrapper < overflow:hidden; width:100%; >.clear < clear:both; >/* стили элементов оформления контента */ /* картинки */ img < vertical-align:top; >a img < border:0;>/* списки */ .list < list-style:none; margin:0; padding:0; >/* текст */ h1 < font-size:1000em; >.bluetext < color:#00f; >.uppertext < text-transform:uppercase; >/* блок внутри контента */ .box .box-indent .box h3 /* форма поиска */ #searchform < margin:0; padding:0; >#searchform .input

Делим на 3 части — стили шаблона, стили сайта и стили шаблона компонента (в нашем случае bitrix:search.form)

/bitrix/templates/template-name/template_styles.css

/bitrix/templates/template-name/styles.css

/* стили элементов оформления контента */ /* картинки */ img < vertical-align:top; >a img < border:0;>/* списки */ .list < list-style:none; margin:0; padding:0; >/* текст */ h1 < font-size:1000em; >.bluetext < color:#00f; >.uppertext < text-transform:uppercase; >/* блок внутри контента */ .box .box-indent .box h3

/bitrix/templates/template-name/components/bitrix/search.form/search-template-name/style.css

/* форма поиска */ #searchform < margin:0; padding:0; >#searchform .input

На сегодня все. Весь процесс сложнее описать чем понять, практикуйтесь и пополняйте ряды квалифицированных шаблоностроителей:)

Больше статей и материалов по web-разработке в tg-канале — подписывайтесь!

6 комментариев “ Работа со стилями в битрикс ”

спасибо за статью, очень помогла
особенно про внедрение своих стилей в визивиг-редактор
Дмитрий 20.12.2012

Подскажите, почему у меня не изменяются на сайте файлы стилей, когда я их меняю через админку? Если меняю через фтп — все изменения сразу отображаются, а через админку вроде все и сохраняется, но на сайте стили старые.

Очень компактное оформление кода. Может понадобиться в будующем.
Виктор 07.12.2013

подскажите, почему, когда я меняю любую строчку в css файле компонента (style.css) все стили в итоге перестают работать? такое ощущение что проверяется контрольная сумма css перед подключением (даже добавление пустой строки ведет к отрубанию стиля). порылся в интернете ни чего путного не нашел.

Еще один Влад 20.02.2014

а мне вот другое интересно — как изменить эти стандартные файлы? Т.е., допустим, меня система устраивает, но я хочу, чтобы файл стилей, например, template_styles.css лежал не в корне (с чего бы это?), а в поддиректории css или чтобы он назывался не temlate_styles.css, a mytemplate_styles.css? но при этом также редактировался бы через панель и т.д.

Чувак с чего бы это css-файлы класть в папку «css»? ТОЛЬКО В КОРЕНЬ ТОЛЬКО ХАРДКОР и запомни в битриксе все через корень

Как подключить css файл в bitrix?

Есть страничка для которой требуется собственные стили (боди, контейнер и т д), предыдущий разработчик, прописал просто стили в style для index.php, внимание вопрос: как подключить стили к index.php ?
Или как подключить стили в template чтобы они не конфликтовали ?
Или создавать отдельный шаблон ? (стилей не много, страничка простая, типо как 404)

Вопрос задан более трёх лет назад
1589 просмотров

Комментировать

Решения вопроса 1

babarun

Алексей Емельянов @babarun Куратор тега 1С-Битрикс

Безумный план моих идей в руках больных людей

addJs('/путь/скрипт.js'); Asset::getInstance()->addCss('/путь/стиль.css'); Asset::getInstance()->addString(''); ?>

Ответ написан более трёх лет назад