Bitrix как подключить стили

Свои СТИЛИ в визуальном редакторе 1С Битрикс

Дополнительное видео

В данном видео разберем формирование своих стилей в области редактора. Стили отобразим не только в форме редактирования, но и встроим их в само меню, в своем оформлении.

Стили их предназначение

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

К примеру, я вставляю текст, оформляю его в цитирующую область, но визуально в нашем редакторе данный текст не изменился, он остался прежним.

У Битрикс есть такая плюшка, что мы можем формировать свои стили и выводить их в меню редактора. При их выборе текст сразу форматируется в форме, и отображается в том стиле как на страничке сайта. Как это сделать смотрите далее!

Структура формирование стилей

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

READ  Как подключить iphone к passat b6

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

Устанавливаем визуальный режим отображение стилей в редакторе

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

Открываем его на редактировании и прописываем ключ EDITOR_STYLES с массивом подключаемых URL файлов.

Выводим стили в область меню редактора

Открываем страничку на редактирование, стили, тут в выпадающем списке видим нашу цитату. Теперь давайте предадим ей оформление, для этого добавляем в файле styles.css ключ ‘ html ’ и в значении прописываем наш стиль, сохраняемся.

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

Есть еще не обязательный ключ с названием ‘section’ с его помощью мы можем разбивать стили по категориям. На данный момент стили можно отнести только в существующие категории такие как:

Получилась новая категория с Цитатами. Для примера я пропишу оформление остальных стилей в файле ‘section’ и посмотрим, как они будут отображаться.

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

Кому было интересно поделитесь статьей с друзьями, урок подготовил Горелов Денис.

Источник

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

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

READ  Как подключить провода генератора ваз 2107

Для начала немного окунемся в теорию. По задумке разработчиков битрикс, файлов со стилями должно быть много… как бы это нелепо ни звучало. Итак, стилевая составляющая типового шаблона сайта предполагает наличие:
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:)

style.css

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

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

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

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

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

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

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

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

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

Источник

Подключение файла CSS к определённой странице сайта

Добрый день.
Помогите пожалуйста решить задачку.

READ  Как подключить вай фай роутер билайн к телефону

Страницы сайта состоят из модулей и компонентов.
Нужно подключить определённый CSS файл, к определённой странице.

Классы к которым будут применяться css свойства, используются и на других страницах, поэтому важно, чтобы css отрабатывал только на одной странице.
Изменить классы нет возможности, как и нет возможности подключить css файл в header.php

1) Как можно реализовать эту задачу?

2) Как можно для конкретной страницы подключить другой header.php в котором уже будет подключён этот файл?

3) Как прописать условие, на php? Если страница такая, подгружается такой-то css файл, иначе всё как обычно.

Ну так добавьте стиль именно на нужную вам страницу

Цитата
Игорь Долгополов написал:
https://dev.1c-bitrix.ru/api_help/main/reference/cmain/setadditionalcss.php

Ну так добавьте стиль именно на нужную вам страницу

Посмотрел, но не понял, где это нужно прописать? Можно подробнее?
Как задать страницу то?

Шаблон для всех страниц общий.
Если я там пропишу:

Код

то вероятно он будет использоваться для всех страниц

Цитата
Максим Власов написал:
А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

И для кого я всё расписываю..

Цитата
Евгений Зачем? написал:
Цитата
Максим Власов написал:
А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

И для кого я всё расписываю..

Не вижу противоречий. Даже если шаблон общий, то в хедере можно поставить условие. что если адрес совпадает с нужным, то подключить нужный стиль. В чем проблема-то? Проблематично составить условие?

Код

Только видимо условие дописано не до конца, как правильно закончить будет?

Типа если стр такая, то подгрузит этот css, иначе подгружаем обычный.
А то он опять на всех страницах отрабатывает почему-то.

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector