top
Вход
Ваш Битрикс24
Авторизуйтесь, чтобы войти
в Битрикс24 вашей компании.
Вход

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