Настройка цвета фона иконки. Решение

Илона Иванова

04.12.2025

0 Комментариев

В статье рассматривается способ изменения цвета фона для иконок элементов курса и ресурсов для способа стилизации иконок «Цветная иконка на белом фоне». . .

Описываемые ниже возможности в полном объеме доступны в СЭО 3КL, начиная с версии 4.5.7b.
Если вы используете более раннюю версию системы — обратитесь с заявкой на проведение обновления в службу технической поддержки ООО «Открытые технологии».

Перейти к «Настройка внешнего вида СЭО 3КL».

Содержание:
1. Задача
2. Предусловия
3. Решение
4. Результат

1. Задача

Учебная платформа Исторического факультета университета оформлена в цветах факультета. Но на иконки элементов курса и ресурсов основные цветовые установки не действуют - цвет фона иконок белый (Рис. 1.1). Необходимо изменить цвет фона иконок элементов курса и ресурсов с белого на цвет с кодом #FAF7EB, который больше соответствует цветовой концепции оформления учебной платформы.

Рис. 1.1. Страница курса с белым фоном иконок.

-Вернуться к содержанию-

2. Предусловия

Дизайн системы настроен. Для настроек профиля темы оформления Администрирование - ► Внешний вид - ► Пользовательские настройки темы - ► СЭО 3KL - ► Профиль - ►

- ► Фоны основных областей - ► Основной слой верстки сайта - ► Цвет фона (на всю ширину);
- ► Фоны основных областей - ► Основной контент - ► Контент, задний план, цвет фона;
- ► Цветовая схема - ► Контент - ► Контент, задний план - ► Контент, задний план, цвет фона

установлен цвет #F5EFDA.

Подробнее о настройке цвета оформления можно прочитать в материалах: «Страница «Цветовая схема» и «Страница «Фоны основных областей».

Способ стилизации иконок элементов курса и ресурсов (Администрирование - ► Внешний вид - ► Пользовательские настройки темы - ► СЭО 3KL - ► Профиль - ► Общие настройки- ► Настройки иконок элементов курса и ресурсов - ► Способ стилизации иконок элементов курса и ресурсов) выбран «Цветная иконка на белом фоне».

В среде электронного обучения существуют курсы. В том числе курс «История древнего мира», для которого выполнены основные настройки: определены количество секций и их названия, добавлены и настроены элементы курса и ресурсы.

-Вернуться к содержанию-

3. Решение

Для изменения цвета фона иконки необходимо:

1) Перейти: Администрирование - ► Внешний вид - ► Пользовательские настройки темы - ► СЭО 3KL - ► Профиль темы оформления - ► Общие настройки - ► Дополнительные настройки стилизации.

2) В поле «Инициализирующий код SCSS» добавить переменную:

$activity-icon-bg-color: #FAF7EB !default;

Где #FAF7EB - цвет фона иконки, выбранный дизайнером учебного портала (Рис. 3.1).

Рис. 3.1. Настройка «Инициализирующий код SCSS». Добавленная переменная, задающая цвет фона иконки.

По умолчанию цвет фона иконки установлен #FFFFFF - белый.

Если дизайнеру необходимо, чтобы иконки сливались с фоном, после хэштега следует добавить код цвета фона, заданного в настройках (для данного примера - #F5EFDA).

3) Сохранить изменения.

-Вернуться к содержанию-

4. Результат

После сохранения настройки цвет фона иконок изменился и соответствует цветовой концепции оформления учебной платформы (Рис. 4.1).

Рис. 4.1. Страница курса с иконками, фон которых соответствует концепции цветового оформления платформы.

-Вернуться к содержанию-

Теги: администрирование, внешний вид