Настройки темы оформления «СЭО 3КL»

1. Профили темы оформления «СЭО 3КL». Общая информациятребуются права Администратора

Все доступные пользователю параметры, отвечающие за внешний вид системы, сгруппированы на страницах профиля темы оформления (поз. 1 Рис. 1.1). СЭО 3КL поддерживает возможность создания и настройки неограниченного количества профилей темы оформления. При этом, каждый профиль оформления будет содержать свой уникальный набор настроек (включая изображения и шрифты), а переключение между профилями темы оформления позволяет, при необходимости, оперативно изменять внешний вид СЭО 3КL (разные цветовые схемы, в зависимости от сезона; региональные различия корпоративного стиля и т. п.). Такое переключение может быть настроено и применяться не только для системы в целом, но и для определенного курса, страницы, языка или пользователя (привязка профиля).

На странице «Профили тем» (Настройки->Администрирование->Внешний вид->Темы->СЭО 3КL->Профили тем), в виде плашек,  отображаются уже существующие в системе профили (Рис. 1.2).

Здесь пользователю доступны следующие действия над профилями и переходы на страницы:

• Кнопка «Создание профиля» (см. поз. 1 Рис. 1.2). Нажав на эту кнопку, пользователь перейдет на страницу создания нового профиля (Рис. 1.3).

Чтобы создать новый профиль, необходимо заполнить поля «Название», «Код» (краткое, уникальное название профиля), «Описание» (при необходимости) и нажать кнопку «Сохранить».

• Кнопка «Экспорт настроек профиля» (см. поз. 2 Рис. 1.2). Нажав эту кнопку на плашке произвольного профиля, пользователь имеет возможность сохранить на своем компьютере настройки этого профиля в виде архивного файла.

• Кнопка «Импорт настроек профиля» (см. поз. 3 Рис. 1.2). Позволяет загрузить в выбранный профиль ранее выгруженные настройки.

На открывшейся странице, в интерфейсе файлового менеджера, пользователь указывает файл настроек и загружает его в профиль (Рис. 1.4).

• Кнопка «Редактирование профиля» (см. поз. 4 Рис. 1.2). На странице редактирования профиля пользователь может изменить название/описание профиля и назначить его активным.

• Кнопка «Удаление профиля» (см. поз. 5 Рис. 1.2). Позволяет удалить ненужный или ошибочно созданный профиль.

• Кнопка «Привязки профиля» (см. поз. 6 Рис. 1.2). Переход на страницу управления привязками профиля.

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

2. Основные области и элементы страницы

На каждой странице СЭО 3KL можно выделить три основных области:

• Шапка страницы (поз. 1 Рис. 2.1). Отображается в верхней части страницы и содержит логотип компании, а также элементы навигации. Подробнее о настройках шапки страницы в разделе «Шапка страницы».
• Контентная область (поз. 2 Рис. 2.1). Располагается по центру страницы и содержит основной контент страницы.
• Подвал страницы (поз. 3 Рис. 2.1). Отображается в нижней части страницы и содержит полезные ссылки, а также информацию о компании. Подробнее о настройках подвала страницы в разделе «Подвал страницы».

На Рис. 2.1 обозначены два дополнительных элемента интерфейса:

• Вторичная навигация (поз. 4 Рис. 2.1). Располагается в контентной области сразу под заголовком страницы и служит для быстрой навигации по страницам курса или административным настройкам. Вторичную навигацию можно отключить в разделе настроек «Навигация» (не рекомендуется).
• Виджет служебной информации (поз. 5 Рис. 2.1). Раскрывается при нажатии на знак вопроса в нижней части страницы. В виджете содержатся ссылки на некоторые информационные страницы, а также кнопка выхода из системы (Рис. 2.4). Виджет служебной информации может отображаться вместе с подвалом страницы или вместо него, подробнее – в разделе «Подвал страницы».

Помимо основных областей сайта есть две дополнительные области, отображение которых необязательно – это область «Текст верха шапки» (поз. 1 Рис. 2.3), которая настраивается в разделе настроек «Шапка страницы», и область полосы над подвалом (поз. 2 Рис. 2.3), которая настраивается в разделе настроек «Подвал страницы», а также область док-панели (поз. 3 Рис. 2.3). В док-панели можно разместить блоки, которые будут при нажатии на иконку открываться во всплывающем окне (Рис. 2.4). Док-панель можно настроить в разделе настроек «Шапка страницы».

Также для размещения второстепенного контента доступна выдвижная панель блоков (см. поз. 4 Рис. 2.3), которая открывается по нажатию кнопки (см. поз. 5 Рис. 2.3). Новые блоки по умолчанию добавляются в выдвижную панель, после этого их можно перенести в другие регионы страницы. Подробнее о блоках – в статье «Блоки в СЭО 3KL».

Обратите внимание, при ширине экрана пользователя, большей, чем 1720px, на странице сайта появляются боковые фоны (обозначены красным на Рис. 2.5). Подробнее о том, как настроить внешний вид боковых фонов для каждой области сайта – в разделе «Особенности оформления шапки страницы».

В шапке страницы по умолчанию содержатся следующие элементы (Рис. 2.6):

• Логотип (см. поз. 1 Рис. 2.6). Логотип компании можно загрузить в разделе настроек «Шапка страницы».
• Хлебные крошки (см. поз. 2 Рис. 2.6). Это элемент навигации, который отображает путь до текущей страницы. Раскрываются при нажатии на кнопку с тремя точками в левой части док-панели.
• Панель навигации пользователя (см. поз. 3 Рис. 2.6). Расположена в верхней правой части шапки страницы и содержит элементы, которые открываются после авторизации пользователя в системе. Подробнее – в разделе «Настройка панели навигации пользователя и панели первичной навигации».
• Панель первичной навигации (см. поз. 4 Рис. 2.6). Расположена в верхней правой части шапки страницы и содержит элементы, которые владелец системы может персонализировать. Подробнее – в разделе «Настройка панели навигации пользователя и панели первичной навигации».
• Кнопка вызова справки (см. поз. 5 Рис. 2.6). При нажатии на кнопку пользователю отображается всплывающее окно со списком статей из клиентской базы знаний, в которых пользователь может прочитать инструкции по работе с различными элементами системы. Подробнее – в статье «Справка СЭО 3KL».

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

3. Страницы настроек профиля темы оформлениятребуются права Администратора

Страницы настроек профилей темы оформления расположены по следующему пути: Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль. 

Для каждого профиля темы настройки выполняются в отдельном наборе страниц (Рис. 3.1).

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

3.1. Страница «Редактирование профиля темы»

На странице редактирования профиля темы (Рис. 3.1.1) пользователь, при необходимости, может скоректировать название профиля, его описание, а также сделать этот профиль активным в системе (назначить профилем по умолчанию): для этого в выпадающем списке поля «Профиль по умолчанию» необходимо выбрать «Да».

В перечне профилей темы оформления «СЭО 3КL» профиль, установленный по умолчанию, будет отмечен символом (Рис. 3.1.2).

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

3.2. Страница «Привязки профиля»

Функционал страницы позволяет настроить применение выбранного профиля (независимо от того, какой профиль темы оформления установлен по умолчанию) к определенному курсу, странице, языку или пользователю системы.

На странице «Привязки профиля» (Рис. 3.2.1) отображаются:

•  Перечень ранее созданных привязок профиля (см. поз. 3 Рис. 3.2.1). Для каждой привязки будет указан тип профиля, описание (генерируется системой), информация об объекте привязки (в зависимости от типа, это могут быть названия курсов, адрес страницы, выбранный язык, ФИО пользователей) и кнопка удаления.

• Кнопка «Назначить профиль» (см. поз.2 Рис. 3.2.1). Позволяет создать новую привязку для профиля.

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

• Кнопка «Панель управления профилями темы» (см. поз. 1 Рис. 3.2.1). Нажав на нее, пользователь может перейти на страницу «Профили темы».

 Алгоритм создания привязки профиля темы оформления:

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

3.3. Страница «Общие настройки»

На странице доступны следующие настройки (Рис. 3.3.1):

• Иконка сайта (favicon) (см. поз. 1 Рис. 3.3.1). Позволяет загрузить изображение favicon в формате ico, которое будет отображаться во вкладке браузера с открытой страницей СЭО 3KL (Рис. 3.3.2). Подробнее о замене favicon – в вебинаре #5 «Смена домена, замена favicon, частые ошибки при редактировании курса».

• Добавить файлы в публичную зону (см. поз. 2 Рис. 3.3.1). Позволяет добавить файлы для дальнейшего использования на других страницах системы. После загрузки файлов и сохранения изменений под настройкой появятся ссылки на файлы (см. поз. 3 Рис. 3.3.1), которые можно будет указать при выполнении других настроек внешнего вида системы.

• Отображение док-панели (см. поз. 4 Рис. 3.3.1). Доступны варианты:
  
  • Всегда отображать – док-панель будет отображаться вне зависимости от того, есть ли в ней блоки или нет.
  • Скрывать, когда пустая – док-панель не будет отображаться пользователю, если в ней нет блоков.

• Режим фиксированной ширины (см. поз. 5 Рис. 3.3.1). При включенной опции (= Включено) ширина контентной области будет зафиксирована на значении 1200 пикселов. При этом у пользователей, чей экран шире, чем 1200 пикселов, по бокам контентной области будут отображаться области без контента.

• Модальное окно авторизации (см. поз. 6 Рис. 3.3.1). При включенной опции (= Включено) пользователю после нажатия на кнопку «Вход» будет предложена авторизация в модальном окне. При отключенной опции (= Отключено) после нажатия на кнопку «Вход» пользователь будет перенаправлен на страницу авторизации. Тип страницы авторизации определяется в настройках страницы авторизации.

• Заголовки элементов док-панели (см. поз. 7 Рис. 3.3.1). Доступны следующие варианты отображения (Рис. 3.3):
  • Текст (поз. 1 Рис. 3.3.3). Элементы док-панели отображаются в виде текста.
  • Иконки (поз. 2 Рис. 3.3.3). Элементы док-панели отображаются в виде иконок.
  • Зависит от размера док-панели. Вид блоков адаптируется под размеры экрана: на больших экранах блоки отображаются в виде текста (поз. 1 Рис. 3.3.3), на маленьких экранах – в виде иконок (поз. 2 Рис. 3.3.3).
  • И иконки, и текст (поз. 3 Рис. 3.3.3). Элементы док-панели отображаются в виде текста с иконками.
  • И иконки, и текст, пока хватает места. Вид блоков адаптируется под размеры экрана: на больших экранах отображаются и иконки, и текст (поз. 3 Рис. 3.3.3), а на маленьких экранах отображаются только иконки (поз. 2 Рис. 3.3.3).

• Если для блока не найдена иконка (см. поз. 8 Рис. 3.3.1). Для опции доступно два варианта:
  
  • Отображать стандартную иконку – при этом, если у блока нет своей иконки, для него будет отображаться стандартная иконка.
  • Отображать текст – при этом, если у блока нет своей иконки, он будет отображаться в док-панели в виде текста.

• Используемый набор иконок (см. поз. 9 Рис. 3.3.1). В настройке доступны для выбора несколько вариантов отображения иконок, отличающиеся оформлением и цветом (Рис. 3.3.4).

• Отправка орфографической ошибки в тексте (см. поз. 10 Рис. 3.3.1). При включенной опции (= Включено) у пользователей появится возможность отправить уведомление о найденной на сайте орфографической ошибке, выделив текст с ошибкой и нажав сочетание клавиш Ctrl+Enter. Подробнее – в статье «Уведомление об орфографической ошибке».

• Инициализирующий код SCSS (см. поз. 11 Рис. 3.3.1). SCSS это препроцессор, который служит для быстрого написания CSS стилей. В поле настройки можно ввести инициализирующий код SCSS, он будет добавлен перед всем остальным кодом. Этот параметр можно использовать для определения переменных в коде, которые будут использоваться для дальнейшей стилизации. Например, для того, чтобы задать толщину шрифта во всех кнопках системы, достаточно указать в данной настройке «$btn-font-weight: 600;». Эта настройка будет распространяться на оформление всех кнопок в системе.

• Завершающий код SCSS (см. поз. 12 Рис. 3.3.1). В поле настройки можно ввести код SCSS или CSS, который будет введен после всего остального кода. Завершающий код подгружает стили, написанные на SCSS.

• Пользовательская настройка css темы (см. поз. 13 Рис. 3.3.1). В поле настройки можно ввести код CSS, который будет добавлен после основных стилей, определенных темой оформления. Настройка позволяет выполнить дополнительную стилизацию внешнего вида профиля темы оформления при помощи кастомных css-стилей.

• Дополнительные классы в основной слой сайта (см. поз. 14 Рис. 3.3.1). В поле настройки можно ввести CSS-классы, которые будут добавлены в основной слой сайта (в тег #bodyinner). Классы следует указывать, разделяя пробелом.

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

3.4. Страница «Адаптивность»

Параметры, расположенные на странице (Рис. 3.4.1), позволяют дополнительно настроить удобство использования таблиц в СЭО 3КL.

• Адаптивные таблицы (Отключено/Включено). Если выбрано значение «Включено», для больших таблиц в системе (размер которых превышает размер занимаемой на странице области) добавляются полосы вертикальной и горизонтальной прокрутки (Рис. 3.4.2).

• Вертикальный текст в шапке отчета по оценкам. В настройке доступны следующие значения:
  
  • Отключено – текст в шапке отчета по оценкам будет расположен горизонтально.
  • Включено – текст в шапке отчета по оценкам будет расположен вериткально, что сокращает отчет по горизонтали, но увеличивает его по вертикали.
  • Использовать личные настройки пользователя – при выборе этой опции у каждого пользователя появится возможность выбрать свой вариант расположения текста в шапке отчета по оценкам. Эта настройка выполняется в панели навигации пользователя по следующему пути: Настройки -> Настройки отчета по оценкам (Рис. 3.3.4).

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

3.5. Страница «Навигация»

В разделе доступны следующие настройки (Рис. 3.5.1):

• Общие настройки (см. поз. 1 Рис. 3.5.1). Позволяют определить, где отображать ссылки на страницу администрирования и на страницу «Мои курсы». Доступно два варианта размещения:
  • в панели навигации пользователя (поз. 1 Рис. 3.5.2);
  • в панели первичной навигации (поз. 2 Рис. 3.5.2).

• Панель навигации пользователя (см. поз. 2 Рис. 3.5.1). Позволяет выбрать, какие кнопки будут отображаться в панели навигации пользователя. Отображение каждой отдельной кнопки можно включить (= Включено) или отключить (= Отключено).
• Отображать ссылку на домашнюю страницу в панели первичной навигации (см. поз. 3 Рис. 3.5.1). Доступные значения настройки:
  • Только если нет ссылки с логотипа – ссылка «В начало» (Рис. 3.5.3) будет отображаться в панели первичной навигации только в том случае, если на сайт не загружен логотип, по ссылке из которого можно перейти на домашнюю страницу.
  • Всегда – ссылка «В начало» (Рис. 3.5.3) будет всегда отображаться в панели первичной навигации.

• Расположение панели первичной навигации (см. поз. 4 Рис. 3.5.1). В настройке можно выбрать, где будет располагаться панель первичной навигации. Доступны следующие варианты:
  • над логотипом (поз. 1 Рис. 3.5.4);
  • над панелью навигации пользователя (поз. 2 Рис. 3.5.4);
  • под логотипом (поз. 3 Рис. 3.5.4);
  • под панелью навигации пользователя (поз. 4 Рис. 3.5.4).

• Способ отображения выбора языка (см. поз. 5 Рис. 3.5.1). Доступные варианты:
  • в виде выпадающего списка (поз. 1 Рис. 3.5.5);
  • в виде панели (поз. 2 Рис. 3.5.5).

• Скрыть вторичную навигацию (см. поз. 6 Рис. 3.5.1). При отмеченной опции вторичная навигация сайта будет отключена. Обратите внимание, при скрытой навигации рядовые пользователя могут потерять возможность перейти к некоторым интерфейсам системы.
• Отображение хлебных крошек (см. поз. 7 Рис. 3.5.1). Настройка определяет, будут ли в док-панели доступны хлебные крошки, указывающие путь до текущей страницы (Рис. 3.5.6).

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

3.6. Страница «Шапка страницы»

Шапка сайта – это верхняя часть страницы СЭО 3KL, включающая в себя логотип, описательный текст, а также панель навигации пользователя и панель первичной навигации. Основные настройки шапки страницы расположены по следующему пути: Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Шапка страницы (Рис. 3.6.1).

Для шапки страницы доступны следующие настройки:

• Закрепление шапки (см. поз. 1 Рис. 3.6.2). В выпадающем списке представлено 3 варианта закрепления шапки (см. поз. 1 Рис. 3.6.2):
  • Шапка с динамически меняющейся высотой. При прокрутке страницы шапка уменьшится в размере по вертикали.
  • (Ш)апка. Шапка будет закреплена с постоянным размером.
  • (Ш) + (Д)ок-панель. Шапка и док-панель будут закреплены с постоянным размером.

При выбранном варианте «(Ш) + (Д)ок-панель» настроенная шапка и полоса док-панели с хлебными крошками при прокрутке странице никуда не исчезают. Логотип уменьшается, док-панель с хлебными крошками отображается поверх отображаемых на странице элементов (Рис. 3.6.3).

• Текст верха шапки (см. поз. 2 Рис. 3.6.4). По умолчанию эта текстовая область не заполнена. Введенный сюда текст будет отображаться на странице следующим образом (Рис. 3.6.5):

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

• Логотип (см. поз. 3 Рис. 3.6.6):
  • Изображение логотипа (поз. 1 Рис. 3.6.7) можно добавить только одно.
  • Ссылка (поз. 2 Рис. 3.6.7) логотипа по умолчанию ведет на главную страницу сайта (т. е. при нажатии на логотип пользователь из любой страницы перенаправляется на главную страницу).
  • Текст логотипа (поз. 3 Рис. 3.6.7) по умолчанию не установлен. Для добавления изображения в текст логотипа нужно воспользоваться файловой областью. Изображения в текст можно добавить гиперссылкой на нужный файл в файловой области. Подробнее о добавлении изображений в файловую область в статье: «Работа с файлами в СЭО 3КL. Файловый контент». Текст логотипа можно сделать гиперссылкой.
  • Отступы (поз. 4 Рис. 3.6.7) по умолчанию не заданы. Отступами можно регулировать положение текста и логотипа в шапке страницы.

Настройки логотипа (см. Рис. 3.6.6) после сохранения будут отображаться на странице следующим образом (Рис. 3.6.7):

• Блок описания (см. поз. 4 Рис. 3.6.8). Это дополнительная текстовая область для шапки страницы. Текст тут так же может быть гиперссылкой, и положение регулируется отступами.

Выглядят такие настройки после сохранения следующим образом (Рис. 3.6.9):

• Меню пользователя (см. поз. 5 Рис. 3.6.10).
  • Отступы меню пользователя. Отступами можно регулировать положение меню пользователя.
  • Скрыть/показать кнопку меню пользователя. При значении настройки = Показать рядом с меню появляется кнопка (Рис. 3.6.11).

• Док-панель (см. поз. 6 рис. 3.6.10).
  • Отступы по горизонтали для элемента док-панели отображаемого текстом, Отступы по горизонтали для элемента док-панели, отображаемого иконкой. Позволяет задать отступы между соседними элементами док-панели.
  • Отобразить заголовок страницы в док-панели. При значении = Да в док-панели будет отображаться заголовок текущей страницы.
  • Отобразить заголовок страницы в контентной области главной страницы. При значении = Да сверху контентной области на главной странице сайта будет отображаться заголовок страницы.

3.6.1. Особенности оформления шапки страницы

Шапка по-разному отображается на различных устройствах. По умолчанию шаблон профиля подстроен под типовой современный монитор с разрешением экрана Full HD, то есть 1920 px по ширине. Шапка страницы ограничена по ширине до 1720 px.
Для того, чтобы растянуть оформление шапки на всю ширину экрана, существует настройка боковых фонов шапки, находящаяся по пути: Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Фоны основных областей (см. раздел «Фоны основных областей»).

Для установки такой настройки необходимо поставить галочку «Ширина без ограничений» в подразделе «Шапка» (Рис. 3.6.1.а). Эта опция также есть и в настройках других областей сайта.

Для всех элементов СЭО 3KL настроена адаптивность, это значит, что при уменьшении ширины экрана элементы оформления также изменяют свой размер. При уменьшении ширины экрана до 768 px и меньше шапка адаптируется под отображение на мобильных устройствах. А именно, происходит центрирование логотипа, описательного текста и панели навигации пользователя, меню пользователя сокращается до аватарки (Рис. 3.6.1.б).

При разработке шапки для сайта следует учитывать некоторые рекомендации:

• в первую очередь следует учитывать размер и форму логотипа, объем описательного текста, размер персонального меню;
• в персональное меню рекомендуется добавлять не более 3-5 ссылок, так как использование большего количества будет загромождать экран на мобильном устройстве;
• описательный текст к логотипу должен быть небольшого размера, чтобы не занимать слишком много места на экране;
• при использовании текстур следует помнить про возможность заполнения всей ширины экрана с использованием раздела настроек «Фоны основных областей»;
• высота шапки регулируется с помощью отступов над и под логотипом или описательным текстом.

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

3.6.2. Настройка панели навигации пользователя и панели первичной навигации

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

Основные параметры панели навигации пользователя настраиваются на странице «Навигация» (раздел настроек «Панель навигации пользователя»). Среди данных настроек есть возможность скрыть или показать ряд функциональных кнопок, среди которых «Портфолио достижений», «Витрина курсов», «Поиск по порталу», а также блок нотификации – уведомления и сообщения.

Панель первичной навигации – это меню, расположенное в верхней части страницы и содержащее элементы, которые владелец системы может персонализировать (Рис. 3.6.2.б).

Содержимое панели первичной навигации одинаково для всех профилей тем СЭО 3KL и настраивается в поле «Настраиваемые элементы меню» на странице «Настройки тем» (Администрирование->Внешний вид->Темы->Настройки тем->Настраиваемые элементы меню).

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

3.7. Страница «Подвал страницы»

Основные настройки подвала страницы расположены по следующему пути: Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Подвал страницы.

Для подвала страницы доступны следующие настройки (Рис. 3.7.1):

• Вариант отображения подвала страницы (см. поз. 1 Рис. 3.7.1). Доступно три варианта отображения подвала страницы:
  • Отображать стандартный подвал и виджет служебной информации – в подвале страницы будет отображен виджет служебной информации.
  • Отображать только стандартный подвал страницы.
  • Отображать только виджет служебной информации.
• Высота полосы над подвалом (см. поз. 2 Рис. 3.7.1). Настройка позволяет определить высоту полосы над подвалом, по умолчанию это высота 25px. Сами настройки полосы расположены в разделе настроек «Фоны основных областей».

• Изображение логотипа (поз. 3 Рис. 3.7.1). По умолчанию отсутствует. Можно прикрепить только один файл. И сам логотип, и его описание будут отображаться в левой части подвала страницы.

• Размер логотипа (поз. 4 Рис. 3.7.1). Доступны значения от 1 до 12.  По умолчанию установлено значение «3».

• Текст описания к логотипу (поз. 5 Рис. 3.7.1). Текст может быть добавлен в виде гиперссылки или кликабельного номера телефона.

• Социальные кнопки (поз. 6 Рис. 3.7.1). В текстовое поле добавляются ссылки на страницы в соцсетях. После сохранения они принимают вид кликабельных кнопок с логотипами соцсетей.

• Текст в подвале (поз. 7 Рис. 3.7.1). Внесенный в это поле текст будет отображаться в центральной части подвала. Также может быть в виде гиперссылок.

• Текст копирайта (поз. 8 Рис. 3.7.1). В это поле можно внести как текст, так и изображение (как в примере). Будет отображаться в правой части подвала страницы. 

 При сохранении настроек, представленных на рисунке 3.7.1, подвал страницы будет отображаться следующим образом (Рис. 3.7.2):

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

3.8. Страница «Цветовая схема»

На странице «Цветовая схема» (Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Цветовая схема) доступны настройки, позволяющие изменить для выбранного профиля цвет текста,  фона,  рамок, ссылок и т. п. (Рис. 3.8.1).

Настройки сгруппированы по разделам, в зависимости от области применения цвета или элемента интерфейса. Для каждой настройки отображается название параметра, цветовая палитра и окно значения цвета (см. Рис. 3.8.1). Выбрать требуемый цвет можно курсором на цветовой палитре или ввести в поле вручную HEX-код цвета (в диапазоне от #000000 до #ffffff). Чтобы применить прозрачный цвет, нужно ввести значение «transparent».

3.8.1. Раздел настроек «Основные цвета темы»

К основным цветам относятся следующие:

• Первичный (Рис. 3.8.1.б). Задает цвет основным элементам системы таким как, например, заголовки таблиц (поз. 2 Рис. 3.8.1.б), основные кнопки интерфейсов (поз. 3 Рис. 3.8.1.б), ссылки в хлебных крошках (поз. 4 Рис. 3.8.1.б), рамки активированных кнопок (поз. 1 Рис. 3.8.1.б).

• Вторичный (Рис. 3.8.1.в). Задает цвет второстепенным элементам системы таким как, например, кнопка виджета служебной информации (поз. 1 Рис. 3.8.1.в), второстепенные кнопки интерфейсов (поз. 2 Рис. 3.8.1.в).

• Успех (Рис. 3.8.1.г). Задает цвет элементам системы, которые сигнализируют об успешном выполнении действий или заданий.

• Опасность (Рис. 3.8.1.д). Задает цвет элементам системы, которые сигнализируют о неуспешном выполнении действий или заданий.

• Предупреждение (Рис. 3.8.1.е). Задает цвет элементам системы, которые предупреждают об условиях отображения элементов курса.

• Информация (Рис. 3.8.1.ж). Задает цвет элементам интерфейса, которые сигнализируют о наличии справочной информации.

• Светлый цвет (Рис. 3.8.1.з). Задает цвет фона для некоторых элементов интерфейса (поз. 1 Рис. 3.8.1.з) и для пояснения о критериях завершения элемента курса (поз. 2 Рис. 3.8.1.з).

• Цвет рамки поля ввода (Рис. 3.8.1.и). Задает цвет для всех рамок полей ввода в системе.

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

3.8.2. Разделы настроек цветовых схем областей и элементов интерфейса

На странице доступны настройки цветов для следующих областей и элементов интерфейса:

Возможности изменения цвета для каждого раздела настроек стандартизированы и позволяют настроить (Рис. 3.8.2.а):

• Цвет фона (см. поз. 1 Рис. 3.8.2.а) для области или элемента интерфейса (Рис. 3.8.2.б).

• Цвет текста (см. поз. 2 Рис. 3.8.2.а) для области или элемента интерфейса (Рис. 2.8.2.в). На Рис. 3.8.2.в данная настройка задает цвет только для кнопки вызова панели инструментов для слабовидящих, т. к. иконка в данной кнопке задана текстовым символом.

• Фильтр цвета изображений (см. поз. 3 Рис. 3.8.2.а). Выпадающий список в поле «Фильтр цвета изображений» позволяет определить цвет изображений в градации серого:

• автоматическое определение – цвет изображений определяется автоматически, в зависимости от цвета фона;
• сильное затемнение (поз. 1 Рис. 3.8.2.г);
• затемнение (поз. 2 Рис. 3.8.2.г);
• без изменений (поз. 3 Рис. 3.8.2.г);
• осветвление (поз. 4 Рис. 3.8.2.г);
• сильное осветвление (поз. 5 Рис. 3.8.2.г).

• Цвет рамки (см. поз. 4 Рис. 3.8.2.а) для области или элемента интерфейса (Рис. 3.8.2.д).

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

3.9. Страница «Фоны основных областей»

На странице (Администрирование -> Внешний вид -> Темы -> СЭО 3KL -> Нужный профиль -> Фоны основных областей) находятся настройки, отвечающие за внешний вид и оформление основных областей страницы сайта: цвет, текстура, изображение и т. п.:

Настройки, доступные для той или иной области сайта, стандартизированы и позволяют задать:

• Цвет фона (см. поз. 1 Рис. 3.9.1). Инструмент выбора цвета фона аналогичен описанному в разделе «Цветовая схема» и  позволяет определить цвет для области сайта.

• Изображение фона (см. поз. 2 Рис. 3.9.1). Позволяет загрузить и использовать в качестве фона (подложки) изображение.

Настройки «Цвет фона» и «Изображение фона» могут быть доступны в двух вариантах:

• по ширине сайта — цвет фона (Рис. 3.9.2) или изображение фона (Рис. 3.9.3) применяется без учета без боковых областей;

• на всю ширину — цвет фона (Рис. 3.9.4) или изображение фона (Рис. 3.9.5) применяется на всю ширину экрана, включая боковые области;

Настройки «Цвет фона» и «Изображение фона» можно комбинировать между собой: например, добавить текстуру в качестве фонового изображения по ширине сайта и залить фон одним цветом во всю ширину, закрасив, таким образом, боковые поля (Рис. 3.9.6).

• Опция «Ширина без ограничений» — позволяет «растянуть» содержание области на всю ширину экрана, не ограничиваясь шириной сайта (Рис. 3.9.7).

Настройки, описанные ниже, доступны только для области «Основной слой верстки сайта»:

• Повторение по горизонтали изображения фона (на всю ширину) (см. поз. 3 Рис. 3.9.1). Доступные варианты повторения фонового изображения:
  • не повторять – по горизонтали изображение будет отображаться в единичном экземпляре;
  • повторять – изображение будет повторяться без отступов, полностью заполняя фон страницы по горизонтали;
  • повторять с отступами, чтобы влезло целиком – изображение будет повторяться целиком с отступами по краям, чтобы полностью заполнить фон страницы по горизонтали;
  • повторять, масштабируя, чтобы влезло целиком – изображение будет повторяться целиком, изменяя масштаб, чтобы полностью заполнить фон страницы по горизонтали.

• Повторение по вертикали изображения фона (на всю ширину) (см. поз. 4 Рис. 3.9.1). Доступные варианты повторения аналогичны предыдущей настройке.

• Размер изображения фона (на всю ширину) (см. поз. 5 Рис. 3.9.1). Доступные варианты настройки:
  • растягивать на всю ширину, сохраняя пропорции – изображение будет растянуто так, что оно будет занимать весь экран пользователя по горизонтали, при этом пропорции изображения будут сохраняться;
  • исходный – изображение будет отображаться в своем исходном размере по центру экрана;
  • вписать – изображение будет растянуто так, что оно будет занимать всю область страницы по горизонтали и по вертикали, при этом пропорции изображения будут сохраняться;
  • заполнить – изображение будет растянуто так, что оно будет заполнять весь экран пользователя по горизонтали, при этом возможны искажения.
• Позиционирование по горизонтали изображения фона (на всю ширину) (см. поз. 6 Рис. 3.9.1). Если изображение отображается в единственном экземпляре, то настройка позволяет определить, как будет выровнено изображение по горизонтали: по левому краю страницы, по правому краю страницы или по центру.

• Позиционирование по вертикали изображения фона (на всю ширину) (см. поз. 7 Рис. 3.9.1). Если изображение отображается в единственном экземпляре, то настройка позволяет определить, как будет выровнено изображение по вертикали: по верхнему краю страницы, по нижнему краю страницы или по центру.

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

3.10. Страница «Шрифты»

Настройки страницы «Шрифты» позволяют загрузить в систему пользовательские шрифты и настроить их отображение в системе. Чтобы добавить новый шрифт, нужно загрузить его через файловый менеджер в настройке «Загрузка пользовательских шрифтов» (поз. 1 Рис. 3.10.1) и нажать на кнопку «Сохранить изменения» внизу страницы. После этого для каждого загруженного шрифта появятся настройки, которые необходимо задать (поз. 2, 3, 4 Рис. 3.10.1):

• Наименование семейства шрифтов (см. поз. 2 Рис. 3.10.1). В поле настройки необходимо ввести название шрифта. Под этим названием шрифт будет доступен для выбора в текстовом редакторе на страницах системы.
• Насыщенность (толщина) символов в тексте (см. поз. 3 Рис. 3.10.1). В настройке можно выбрать из значение насыщенности для шрифта от 100 (сверхсветлое начертание) до 900 (сверхжирное начертание). Насыщенность стандартного шрифта = 400, полужирного = 700.
• Начертание шрифта (см. поз. 4 Рис. 3.10.1). В настройке можно выбрать начертание шрифта, normal – для обычного, italic – для курсивного.

Чтобы переопределить стандартные шрифты в системе, необходимо загрузить 5 новых файлов шрифтов и задать им название «DefaultFont». Для загруженных шрифтов должны быть заданы следующие значения насыщенности и начертания: 300 normal, 300 italic, 400 normal, 600 normal, 700 normal (шрифты с таким настройками используются на страницах системы). 

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

3.11. Страница «Настройки регионов»

Регионы – это определенные зоны страницы, в которых можно размещать блоки и другую информацию.

Настройки, расположенные по пути Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Настройки регионов (Рис. 3.11.1), позволяют определять поведение блоков на страницах СЭО 3KL: например, можно настроить, чтобы на главной странице СЭО блоки были всегда свернуты в док-панель, а в курсе развернуты и зафиксированы в правой боковой панели.

Настройки регионов сгруппированы по страницам системы, к которым они относятся. Настройка регионов доступна для следующих страниц:

• стандартная страница с блоками;
• страница курса;
• страница описания курса;
• страница категории курса;
• модуль курса;
• главная страница;
• страница администрирования;
• страница Мои курсы;
• Мой кабинет;
• Моя публичная страница;
• страница отчетов;
• страница защищенного просмотра.

Регионы в системе подразделяются на стандартные (обозначены красным на Рис. 3.11.2) и кастомные (обозначены синим на Рис. 3.11.2). Стандартные регионы доступны в Moodle по умолчанию, кастомные можно добавить в СЭО 3KL отдельно.

Далее, рассмотрим возможности настройки регионов на примере страницы личного кабинета пользователя.

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

3.11.1. Стандартные регионы

Для стандартных регионов доступны следующие варианты отображения (Рис. 3.11.1.а):

• отображать блоки на своих позициях — блоки будут отображаться в выбранном регионе (см. поз. 1 Рис. 3.11.1.б – блок, расположенный в контентной области);
• отображать блоки в доке — блоки региона будут перенесены в док-панель (см. поз. 2 Рис. 3.11.1.б);
• отображать блоки в выдвижной панели — блоки региона будут перенесены в выдвижную панель (см. поз. 3 Рис. 3.11.1.б).

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

3.11.2. Кастомные регионы (сворачиваемые секции)

Кастомные регионы сворачиваются в полосу с дальнейшей возможностью их развернуть. В развернутом режиме на верхнем и нижнем крае региона будут отображаться кнопки, с помощью которых регион можно свернуть (поз. 1, 2 Рис. 3.11.2.а). Свернутый блок отображается в виде горизонтальной полосы с кнопкой, с помощью которой регион можно развернуть (поз. 3 Рис. 3.11.2.а).

Для сворачиваемой секции (кастомного региона) доступны следующие варианты отображения (выбираются в настройке на поз. 1 Рис. 3.11.2.б):

• по умолчанию свернута — при первой загрузке страницы секция будет отображаться свернутой, при последующих загрузках система запомнит состояние секции, которое выберет пользователь;
• по умолчанию развернута — при первой загрузке страницы секция будет отображаться развернутой, при последующих загрузках система запомнит состояние секции, которое выберет пользователь;
• всегда свернута — каждый раз при новой загрузке страницы секция будет отображаться свернутой;
• всегда развернута — каждый раз при новой загрузке страницы секция будет отображаться развернутой;
• отображение отключено — секция не будет отображаться;
• нельзя свернуть — секция всегда будет отображаться развернутой, при этом кнопки сворачивания/разворачивания не будут отображаться.

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

Создание сетки состоит из двух этапов:

1. Добавление строк

Нажатие на кнопку «+» (поз. 1 Рис. 3.11.2.в) добавит строку, внутри которой можно сделать разбиение на нужное количество областей (сегментов). Нажатие на кнопку «-» (поз. 2 Рис. 3.11.2.в) удалит ранее созданную строку. Количество создаваемых строк не ограничено, каждая новая строка в секции будет располагаться под предыдущей.

2. Наполнение строк.

Нажатие на кнопку «+» (см. поз. 3 Рис. 3.11.2.в) добавит в строку сегмент шириной в 1 условную единицу. 1 условная единица равна 1/12 части ширины экрана, а одна строка, соответственно, состоит из 12 условных единиц, которые можно использовать при разбиении строки на сегменты. Определить ширину каждого сегмента можно, увеличивая его (кнопка «+» внутри сегмента (поз. 1 Рис. 3.11.2.г) или уменьшая (кнопка «-» внутри сегмента (поз. 2. Рис. 3.11.2.г). Удалить созданный сегмент можно, нажав на кнопку «Х» внутри него (поз. 3 Рис. 3.11.2.г).

Таким образом можно создавать различные структуры сетки для сворачиваемой секции (Рис. 3.11.2.д).

После создания сетки для кастомного региона он станет доступен для выбора в качестве области размещения блока. На странице настроек блока кастомные регионы отображаются особым образом. Например, если блок должен быть размещен во втором сегменте первой строки региона «Над контентом», то он будет отображаться следующим образом: cs-ctop-1-2, где ctop – техническое название кастомного региона (в примере – «Над контентом»), 1 – порядковый номер строки, в которой размещен блок, 2 – порядковый номер сегмента строки, в котором размещен блок (Рис. 3.11.2.е).

Технические названия кастомных регионов на странице настроек блока:

Блок, помещенный во второй сегмент строки области «Над контентом», будет выглядеть следующим образом (Рис. 3.11.2.ж):

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

3.11.3 Настройки сворачивания блоков в регионах

Настройки сворачивания позволяют реализовать удобный внешний вид системы и различные сценарии взаимодействия пользователя с материалами курса:

• если необходимо, чтобы курс выглядел лаконично и пользователи не могли изменить его дизайн, то сворачивание блоков на главной странице курса или на описательной странице можно запретить;
• в курсе рекомендуется полностью убирать левую колонку, то есть поставить настройку, что все блоки, помещенные в неё, автоматически сворачиваются и фиксируются в док-панели;
• правую колонку рекомендуется настраивать так, чтобы она была всегда видна и блоки из неё могли быть свёрнуты в док-панель или развёрнуты обратно.

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

3.12. Страница «Безопасность»

Страница содержит настройки, отвечающие за сохранение целостности контента. С помощью этих настроек можно защитить контент от копирования: отключить всплывающее меню, перетаскивание, выделение текста и т. п. (Рис. 3.12.1).

• Текст при отключенном js.  В настройке можно ввести текст сообщения, который будет отображаться пользователю, если у него отключен JavaScript.

• Запрет перетаскивания. При включенной настройке (= Включено) в курсах будет запрещено перетаскивание контента пользователям, у которых отсутствует право theme/opentechnology:security_copy_draganddrop (по умолчанию все пользователи, кроме полного администратора).

• Запрет контекстного меню. При включенной настройке (= Включено) в курсах будет запрещено вызывать контекстное меню пользователям, у которых отсутствует право theme/opentechnology:security_copy_contextmenu (по умолчанию все пользователи, кроме полного администратора).

• Запрет копирования текста. При включенной настройке (= Включено) в курсах будет запрещено копировать текст пользователям, у которых отсутствует право theme/opentechnology:security_copy_copy (по умолчанию все пользователи, кроме полного администратора).

• Запрет доступа без JavaScript. При включенной настройке (= Включено) в курсах будет запрещен просмотр сайта пользователям, у которых отсутствует право theme/opentechnology:security_copy_nojsaccess (по умолчанию все пользователи, кроме полного администратора).

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

3.13. Страница «Страница авторизации»

Настройка «Тип страницы авторизации» (Рис. 3.13.1) позволяет определить внешний вид страницы авторизации. В зависимости от выбранного на данный момент типа, в интерфейсе страницы могут быть доступны дополнительные параметры настройки.

Доступны к выбору следующие типы страницы авторизации:

• стандартная (3.13.2);

Дополнительных настроек для страницы авторизации типа «стандартная» не предусмотрено.

• слайдер (3.13.3);

Для страницы авторизации типа «Слайдер» доступны следующие дополнительные настройки оформления (Рис. 3.13.4):

• Изображения слайдера (см. поз. 1 Рис. 3.13.4). Позволяет загрузить несколько изображений для фона страницы, которые будут отображаться в виде карусели.

• Текст в шапке (см. поз. 2 Рис. 3.13.4). Позволяет добавить текст справа от логотипа, который будет отображаться только на странице авторизации.

При добавлении текста в шапке следует учитывать некоторые рекомендации:

• Если в шапку уже добавили текстовый блок через настройки шапки страницы (см. раздел «Страница «Шапка страницы»), то текст, добавленный через настройки страницы авторизации, будет отображаться под уже имеющимся текстовым блоком.
• Цвет текста в шапке должен контрастировать с цветами изображений в слайдере так, чтобы его было комфортно читать.
• Логотип, который можно добавить через поле «Текст в шапке», также должен сочетаться по цвету с изображениями слайдера.

• Отступы текста в шапке (см. поз. 3 Рис. 3.13.4). В поле настройки можно ввести, разделяя пробелом, значения отступов сверху/справа/снизу/слева (в пикселах) для текста в шапке. Например: «15px 0 0 0».

Цветовые решения кнопок в панели авторизации наследуются из цветовой схемы профиля темы. Используются те же цвета, что и для кнопок в контентной области, которые определяются в разделе «Контент страницы» настроек цветовой схемы (см. раздел Страница «Цветовая схема»).

• боковая панель (3.13.5).

Для страницы авторизации типа «Боковая панель» доступны следующие дополнительные настройки (Рис. 3.13.6):

• Логотип для страницы «Боковая панель» (см. поз. 1 Рис. 3.13.6). Позволяет загрузить логотип, который будет отображаться только на странице авторизации.

• Изображение страницы авторизации (см. поз. 2 Рис. 3.13.6). Позволяет загрузить фоновое изображение для страницы авторизации.

• Элементы шапки (см. поз. 3 Рис. 3.13.6). Если опции настройки установлены, то соответствующие панели будут отображаться на странице авторизации.

Если установлена опция «Панель навигации пользователя», то в шапке страницы авторизации будут отображаться те инструменты панели навигации пользователя, которые доступны для неавторизованных пользователей: иконки витрины курсов, поиска и кнопка вызова панели инструментов для слабовидящих (опционально) (поз. 1 Рис. 3.13.7).

Если установлена опция «Панель первичной навигации», то на странице авторизации будет отображаться панель первичной навигации (поз. 2 Рис. 3.13.7).

• Текст страницы авторизации (см. поз. 4 Рис. 3.13.7). В поле настройки можно ввести текст, который будет расположен по центру изображения страницы авторизации.

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

3.14. Страница «Шаблоны электронной почты»

На странице доступны следующие настройки:

• Использовать переопредёленный шаблон для писем с форума (см. поз. 1 Рис. 3.14.1). При отмеченной опции ко всем сообщениям, рассылаемым с форума на почту, будут применены настройки, заданные в поз. 2 и 3 Рис. 3.14.1.
• Заголовок электронной почты (см. поз. 2 Рис. 3.14.1). В поле настройки можно ввести текст, который будет расположен в верхней части сообщения с рассылкой с форума.
• Подвал электронной почты (см. поз. 3 Рис. 3.14.1). В поле настройки можно ввести текст, который будет расположен в нижней части сообщения с рассылкой с форума.

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

4. Примеры и решения

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