Работа со стилями в битрикс
В этой статье я продолжу повествование о создании шаблона для битрикс. В первой части описан процесс начального разделения сверстанного макета и создания необходимых файлов. Пришло время вплотную заняться удобной организацией стилей.
Для начала немного окунемся в теорию. По задумке разработчиков битрикс, файлов со стилями должно быть много… как бы это нелепо ни звучало. Итак, стилевая составляющая типового шаблона сайта предполагает наличие:
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
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
/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»? ТОЛЬКО В КОРЕНЬ ТОЛЬКО ХАРДКОР и запомни в битриксе все через корень
Подключение кастомных скриптов и стилей в шаблоне компонента
Сегодня хотим поделиться с вами полезным и очень простым API, которое есть продукте 1С-битрикс и заслуживает отдельного внимания и о котором, наверняка, еще не все знают.
В шаблоне API доступны не обязательные файлы, для реализации и оформления front-end логики компонента
— style.css, — определяет стили, которые необходимы представленному шаблону
— script.js, который определяет и подключает javascrits, которые необходимы данному шаблону.
Но, как вы уже наверняка сталкивались, не всегда их хватает.
Посему, для подключения кастомных скриптов, которые находятся вне компонента, или стилей можно использовать несколько методов:
-
• Инлайновое подключение в шаблоне, что смотрится не совсем профессионально
$APPLICATION->SetAdditionalCss(«/local/styles.css»);
Необходимо создать component_epilog.php: global $APPLICATION;
$APPLICATION->SetAdditionalCss(«/local/styles.css»);
Как использовать CSS для сайта и магазина
Битрикс24.Сайты поддерживают работу с пользовательским CSS. Вы всегда можете настроить внешний вид элементов именно так, как вам будет необходимо.
CSS позволяет вручную определить внешний вид сайта. Этот инструмент требует определенных знаний и опыта. Если вы не знаете, что это такое — рекомендую сначала ознакомиться с обучающими материалами, которых много в интернете. Например Справочником CSS.
Рассмотрим несколько базовых примеров работы с пользовательским CSS.
Подбор цвета элементов
Если ваша компания использует какой-то специфический цвет фона или шрифта, то вы можете подобрать его вручную.
У нас есть блок с текстом, которому нужно придать особый цвет.
Для работы нужно обязательно опубликовать страницу.
Перейдите в режим просмотра кода опубликованной страницы.
Для изменения цвета текста нам нужно использовать ID и класс данного блока.
Если не указывать ID блока, то изменения применятся ко всем одинаковым блокам на странице.
#block3965 .landing-block-node-title
color: #000080 ;
>
Для изменения цвета фона выберем этот блок по его классу и уточним, что нам нужен только тег section внутри этого блока.
#block3965.block-27-one-col-fix-title-and-text-2 section
background-color: #F5FFFA;
>
Откройте Настройки страницы и добавьте полученные коды в поле CSS-код.
Публиковать страницу заново не нужно — просто обновите ее и блок будет иметь нужный вид.
Чтобы переопределить некоторые базовые свойства, может потребоваться ключевое слово !important (например color: #E9AD99 !important). Если изменения не применились, то добавьте слово в строку.
Как можно скрыть какой-то элемент блока
Если необходимо скрыть какой-то элемент блока, то нам также нужно сначала получить его класс. Для примера скроем кнопки на блоке с ценами.
Перейдите в просмотр кода страницы.
Не забудьте сначала опубликовать страницу.
Теперь добавим в настройках страницы код.
.landing-block-node-price-button
display: none;
>
Сохраним изменения и обновим опубликованную страницу.
Добавление пользовательского CSS в коробочной версии Битрикс24 доступно с версии модуля сайтов 18.5.8. Перед работой проверьте текущую версию и обновите, если это необходимо.
Как применить стили в битрикс
Для визуального редактора присутствует возможность к уже имеющимся стандартным стилям добавлять собственные и помещать их в соответствующую панель редактора. Чтобы стили отображались в меню, файл styles.css в шаблоне сайта должен существовать и быть непустым.
Чтобы подключать сторонние стили в визуальном редакторе, например Bootstrap и Font Awesome, нужно прописать данную возможность в файле description.php, находящемся в папке шаблона сайта:
"EDITOR_STYLES" => array ( '/bitrix/css/main/bootstrap.css', '/bitrix/css/main/font-awesome.css',
Внимание! Ошибки при создании стилей могут вызвать серьезные проблемы в работе сайта, поэтому данную задачу лучше предоставить разработчику с необходимой квалификацией.
Для примера создадим простой стиль, добавляющий тексту рамку и меняющий его цвет на красный. Для начала добавим в файл styles.css описание стиля.
.example
Когда стиль создан им уже можно начать пользоваться через форму Свойства, вызываемую по щелчку правой кнопкой мышки в рабочей области визуального редактора.
Чтобы созданный стиль отображался в меню, нужно добавить соответствующую строку в файл .styles.php.
array( "tag" => 'p', /*в какой тег будет помещен текст в данном стиле*/ "title" => "Это тестовый стиль", /*название стиля*/ "html" => 'Пример') /*оформление текста с помощью html*/ ); ?>
Примечание: Поля «tag» и «title» являются обязательными для заполнения. Также поле «title» по умолчанию используется как название пункта в списке, соответствующему стилю, и всплывающая подсказка при наведении курсора на него. Однако при использовании поля «html» можно также указать название, которое и будет отображаться в выпадающем списке.
Также можно разбивать стили по категориям с помощью поля «section» . Пока что собственные стили можно помещать только в уже существующие категории.
Теперь созданный нами стиль отобразится в меню.