top_ua
Вхід
Ваш Бітрікс24
Авторизуйтеся, щоб увійти
до Бітрікс24 вашої компанії.
Вхід

Підтримка24

Як використовувати CSS для сайту та магазину

Рейтинг:

Бітрікс24.Сайти підтримують роботу з користувальницьким CSS. Ви завжди можете налаштувати зовнішній вигляд елементів саме так, як вам буде необхідно.

CSS дозволяє вручну визначити зовнішній вигляд сайту. Цей інструмент вимагає певних знань і досвіду. Якщо ви не знаєте, що це таке - рекомендую спочатку ознайомитися з навчальними матеріалами, яких багато в інтернеті. Наприклад Довідником CSS.

Розглянемо кілька базових прикладів роботи з користувальницьким CSS.

Підбір кольору елементів

Якщо компанія використовує якийсь специфічний колір фону або шрифту, то можна підібрати його вручну.


1. Колір шрифту

У нас є блок з текстом, якому потрібно надати особливий колір.


Для роботи потрібно обов'язково опублікувати сторінку.

кнопка опублікувати.png

Перейдіть в режим перегляду коду опублікованої сторінки. (Правою кнопкою миші викличте контекстне меню та виберіть функцію Переглянути код або сполученням клавіш Ctrl+Shift+I меню.jpg .

Для зміни кольору тексту нам потрібно використовувати:

  • ID даного блоку;

    id.jpg

  • клас даного блоку.

    class.jpg.

Якщо не вказувати ID блоку, то зміни застосуються до всіх однакових блоків на сторінці.

Отже, наш код для зміни кольору шрифту повинен виглядати наступним чином:

#block1037 .landing-block-node-title
{ color: #FF0000 ;
}
Кольори прописуються через шістнадцятковий код. Список кольорів та їх коди можна знайти, наприклад скориставшись сайтом Вікіпедії

Тепер відкрийте Налаштування сторінки і додайте отриманий код в поле CSS-код.

Збережіть зміни та перейдіть на сторінку. Публікувати її заново не потрібно - просто оновіть, і блок матиме потрібний вигляд.

2. Зміна кольору фону

Для зміни кольору фону виберемо цей блок за його ID та класом.


Також слід уточнити, що нам потрібен тільки тег section всередині цього блоку.

Тобто CSS-код повинен мати наступний вигляд:

#block1037.block-27-3-one-col-fix-title section
{ background-color: #FFDAB9;
}

Знову відкрийте Налаштування сторінки і додайте отриманий код в поле CSS-код.

Зберігаємо та оновлюємо сторінку. Пам'ятаємо, що публікувати заново немає потреби:)


Щоб перевизначити деякі базові властивості, може знадобитися ключове слово !important (наприклад color: #FFDAB9 !important). Якщо зміни не застосувались, то додайте слово в рядок.

Як можна приховати якийсь елемент блоку?

Якщо необхідно приховати якийсь елемент блоку, то нам також потрібно спочатку отримати його клас. Для прикладу приховаємо кнопку на блоці переходу до магазину.

Перейдіть до перегляду коду сторінки.

Не забудьте спочатку опублікувати сторінку.

Тепер додамо в налаштуваннях сторінки код, який повинен виглядати наступним чином:

.landing-block-node-button
{ display: none;
}

Збережемо зміни та оновимо опубліковану сторінку.


Додавання користувальницького CSS в коробковій версії Бітрікс24 доступне з версії модуля сайтів 18.5.8. Перед роботою перевірте поточну версію та оновіть її, якщо це необхідно.
Дякую, допомогло! Дякуємо :) Не допомогло Дуже шкода :(
Дізнайтесь, чому:
Це не те, що я шукаю
Дуже складно і незрозуміло