Прочитайте готовые ответы
Новые статьи
Поддержка Битрикс24
Регистрация и вход
Тарифы и оплата
С чего начать
Задачи и проекты
Мессенджер
Главная страница: наш вайб
Группы
Календарь
CRM + Интернет-магазин
Диск
База знаний
Сайты
Интернет-магазин
Складской учет
Почта
CRM
CoPilot — AI в Битрикс24
Битрикс24 КЭДО
Подпись
Маркетинг
Сквозная аналитика
Центр продаж
CRM-аналитика
BI Конструктор
Автоматизация
CRM.Оплата и Доставка
Интеграция 1С и Битрикс24
Компания
Бизнес-процессы
Приложения
Контакт-центр
Настройки
Моя страница
Телефония
Мой тариф
Энтерпрайз
Enterprise HRM
Десктоп-приложение
Общие вопросы
Битрикс24 в коробке
1С-Битрикс24: Интернет-магазин + CRM
Изменения в статьях (архив)

Поддержка24

Как использовать 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. Перед работой проверьте текущую версию и обновите, если это необходимо.
Спасибо, помогло!
Спасибо :)
Не помогло
Очень жаль :(
Помощь интегратора
Это не то, что я ищу
Написано очень сложно и непонятно
Есть устаревшая информация
Слишком коротко, мне не хватает информации
Мне не нравится, как это работает