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

Полина Андреева
09.23.24
Статья посвящена настройкам фирменной темы оформления «СЭО 3КL», в частности, настройкам шапки и подвала сайта, цветовой схемы, регионов, шрифтов, привязки профиля темы, адаптивности, навигации и др.
Описываемые ниже возможности в полном объеме доступны в СЭО 3КL, начиная с версии 4.1.12a.
Если вы используете более раннюю версию системы — обратитесь с заявкой на проведение обновления в службу технической поддержки ООО «Открытые технологии».
В данной статье описаны настройки темы оформления «СЭО 3КL» версии 4.1.х.
Практические вопросы по настройке внешнего вида СЭО 3КL рассмотрены в статье «Настройка внешнего вида СЭО 3КL».
Содержание:
1. Профили темы оформления «СЭО 3КL». Общая информациятребуются права Администратора
2. Основные области и элементы страницы
3. Страницы настроек профиля темы оформлениятребуются права Администратора
  3.1. Страница «Редактирование профиля темы»
  3.2. Страница «Привязки профиля темы»
  3.3. Страница «Общие настройки»
  3.4. Страница «Адаптивность»
  3.5. Страница «Навигация»
  3.6. Страница «Шапка страницы»
    3.6.1. Особенности оформления шапки страницы
    3.6.2. Настройка панели навигации пользователя и панели первичной навигации
  3.7. Страница «Подвал страницы»      
   3.8. Страница «Цветовая схема»       
     3.8.1. Раздел настроек «Основные цвета темы»
     3.8.2. Разделы настроек цветовых схем областей и элементов интерфейса
     3.8.3. Настройки фильтров цвета изображений
   3.9. Страница «Фоны основных областей»      
    3.10. Страница «Шрифты»
    3.11. Страница «Настройки регионов»
       3.11.1. Стандартные регионы
       3.11.2. Кастомные регионы (сворачиваемые секции)
       3.11.3. Настройки сворачивания блоков в регионах
    3.12. Страница «Безопасность»
    3.13. Страница «Страница авторизации»
    3.14. Страница «Шаблоны электронной почты»
4. Примеры и решения

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

Действия в данной инструкции с пометкой требуются права администратора могут быть выполнены только при наличии доступа «Полный Администратор». Начиная с 2022 года для вновь заключаемых договоров такой набор прав предоставляется роли «Диспетчер-администратор» по умолчанию. Если ваш договор был заключен раньше, вы можете обратиться в техподдержку с соответствующей заявкой на расширение набора прав диспетчера-администратора.
Важно! Неосторожные действия полного администратора могут повредить систему и контент таким образом, что исправление последствий вмешательства выйдет за рамки гарантийной технической поддержки. В случае внесения правок в глобальные настройки рекомендуем вам убедиться в том, что вы полностью понимаете, за что отвечают данные настройки. Если у вас возникают сомнения в назначении глобальных настроек, обратитесь за помощью в техническую поддержку.
Подробная информация в статье «Полный административный доступ».

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

Рис. 1.1. Перечень  профилей темы оформления «СЭО 3КL». Страницы настроек профиля «Курс рисования».

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

Рис. 1.2. Страница «Профили тем».

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

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

Рис. 1.3. Страница создания нового профиля темы оформления «СЭО 3КL».

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

  • Кнопка «Экспорт настроек профиля» (см. поз. 2 Рис. 1.2). Нажав эту кнопку на плашке произвольного профиля, пользователь имеет возможность сохранить на своем компьютере настройки этого профиля в виде архивного файла.
Дополнительная информация о выгрузке/загрузке файлов из/в СЭО 3КL в статье «Работа с файлами в СЭО 3КL. Файловый контент».
  • Кнопка «Импорт настроек профиля» (см. поз. 3 Рис. 1.2). Позволяет загрузить в выбранный профиль ранее выгруженные настройки.

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

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

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

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

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

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

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

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

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

Рис. 2.2. Раскрытый виджет служебной информации.

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

Рис. 2.3. Текст верха шапки и полоса над подвалом.

Рис. 2.4. Блок «Навигация», раскрытый из док-панели.

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

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

Рис. 2.5. Боковые фоны слайдера.

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

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

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

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

Действия в данной инструкции с пометкой требуются права администратора могут быть выполнены только при наличии доступа «Полный Администратор». Начиная с 2022 года для вновь заключаемых договоров такой набор прав предоставляется роли «Диспетчер-администратор» по умолчанию. Если ваш договор был заключен раньше, вы можете обратиться в техподдержку с соответствующей заявкой на расширение набора прав диспетчера-администратора.
Важно! Неосторожные действия полного администратора могут повредить систему и контент таким образом, что исправление последствий вмешательства выйдет за рамки гарантийной технической поддержки. В случае внесения правок в глобальные настройки рекомендуем вам убедиться в том, что вы полностью понимаете, за что отвечают данные настройки. Если у вас возникают сомнения в назначении глобальных настроек, обратитесь за помощью в техническую поддержку.
Подробная информация в статье «Полный административный доступ».

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

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

Рис. 3.1. Перечень  профилей темы оформления «СЭО 3КL». Страницы настроек профиля «Курс рисования».

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

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

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

Рис. 3.1.1. Страница редактирования профиля «Курс рисования».

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

Рис. 3.1.2. В теме оформления «СЭО 3КL» установлен по умолчанию профиль «Курс рисования».
Обратите внимание: стандартный профиль темы оформления содержит «заводские» настройки и его редактирование невозможно. Для того, чтобы снова установить его по умолчанию, необходимо перейти на страницу редактирования того профиля темы оформления, который в данный момент является активным, и, в поле «Профиль по умолчанию», установить «Нет».

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 3.3.2. Favicon сайта.
  • Добавить файлы в публичную зону (см. поз. 2 Рис. 3.3.1). Позволяет добавить файлы для дальнейшего использования на других страницах системы. После загрузки файлов и сохранения изменений под настройкой появятся ссылки на файлы (см. поз. 3 Рис. 3.3.1), которые можно будет указать при выполнении других настроек внешнего вида системы.
Подробная информация о хранении и использовании файлов из публичной зоны темы оформления изложена в соответствующем разделе статьи «Работа с файлами в СЭО 3КL. Файловый контент».
  • Отображение док-панели (см. поз. 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).

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

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

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

Рис. 3.3.4. Страница «Настройки отчета по оценкам».

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

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

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

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

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

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

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

Рис. 3.5.6. Хлебные крошки в док-панели.

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

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

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

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

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

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

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

Рис. 3.6.3. Закрепление шапки, док-панели с хлебными крошками.

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

Рис. 3.6.5. Отображение текста в вверху шапки.

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

Рис. 3.6.6. Настройки логотипа.
  • Логотип (см. поз. 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):

Рис. 3.6.7. Отображение логотипа с выполненными настройками.

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

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

Рис. 3.6.9. Отображение блока описания в шапке страницы.

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

Рис. 3.6.11. Кнопка меню пользователя.

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

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

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

Рис. 3.6.1.а. Опция «Ширина без ограничений».

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

Рис. 3.6.1.б. Внешний вид шапки сайта на мобильном устройстве.

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

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

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

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

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

Рис. 3.6.2.а. Панель навигации пользователя.

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

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

Рис. 3.6.2.б. Панель первичной навигации.

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

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

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

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

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

Рис. 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.7.2. Пример внешнего вида подвала страницы.
Для подстановки текущего года (поле «Текст описания к логотипу») можно использовать подстановку {CURRENTYEAR}.
Список доступных соцсетей: vkontakte; google; odnoklassniki; youtube.

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

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

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

Рис. 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.б. Пример первичного цвета.
  • Вторичный (Рис. 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.д. Цвет «Опасность».
  • Предупреждение (Рис. 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.1.и). Задает цвет для всех рамок полей ввода в системе.

Рис. 3.8.1.и. Цвет рамки поля ввода.

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

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

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

Область, элемент интерфейса Разделы настроек
Шапка страницы
  • задний план
  • заголовки
  • ссылки
  • ссылки при наведении
  • основные кнопки
  • основные кнопки при наведении
  • дополнительные кнопки
  • дополнительные кнопки при наведении
  • верхняя полоса с текстом в шапке
  • переключатель выпадающего списка меню пользователя
  • переключатель выпадающего списка меню пользователя при наведении
  • выпадающий список меню пользователя
  • выпадающий список меню пользователя при наведении
  • пункт меню первичной навигации
  • пункт меню первичной навигации при наведении
  • переключатель выпадающего списка меню первичной навигации
  • переключатель выпадающего списка меню первичной навигации при наведении
  • выпадающий список меню первичной навигации
  • выпадающий список меню первичной навигации при наведении
  • кнопки общедоступности
  • кнопки общедоступности при наведении
Контент
  • задний план
  • заголовки
  • ссылки
  • ссылки при наведении
  • основные кнопки
  • основные кнопки при наведении
  • дополнительные кнопки
  • дополнительные кнопки при наведении
  • подзаголовок элемента курса
Блоки
  • задний план
  • заголовки
  • ссылки
  • ссылки при наведении
  • основные кнопки
  • основные кнопки при наведении
  • дополнительные кнопки
  • дополнительные кнопки при наведении
Подвал страницы
  • задний план
  • заголовки
  • ссылки
  • ссылки при наведении
  • основные кнопки
  • основные кнопки при наведении
  • дополнительные кнопки
  • дополнительные кнопки при наведении
Виджет служебной информации в подвале
  • задний план
  • ссылки
  • ссылки при наведении
  • кнопки
  • кнопки при наведении
Сворачиваемые секции
  • задний план
  • заголовки
  • ссылки
  • ссылки при наведении
  • основные кнопки
  • основные кнопки при наведении
  • дополнительные кнопки
  • дополнительные кнопки при наведении
Док
  • задний план
  • элемент док-панели в виде текста
  • элемент док-панели в виде текста при наведении
  • элемент док-панели в виде текста
  • элемент док-панели в виде иконки
  • элемент док-панели в виде иконки при наведении
Секция курса
  • заголовки
  • ссылки в заголовке
  • ссылки в заголовке при наведении
Глоссарий
  • ссылки автоматического связывания
  • ссылки автоматического связывания при наведении

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

Рис. 3.8.2.а. Раздел настроек «Шапка страницы, основные кнопки».
  • Цвет фона (см. поз. 1 Рис. 3.8.2.а) для области или элемента интерфейса (Рис. 3.8.2.б).

Рис. 3.8.2.б. Пример настройки синего цвета фона для основных кнопок шапки страницы.
  • Цвет текста (см. поз. 2 Рис. 3.8.2.а) для области или элемента интерфейса (Рис. 2.8.2.в). На Рис. 3.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.г).

Рис. 3.8.2.г. Различные варианты фильтра цвета изображений на примере основных кнопок шапки страницы.
  • Цвет рамки (см. поз. 4 Рис. 3.8.2.а) для области или элемента интерфейса (Рис. 3.8.2.д).

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

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

3.8.3. Настройки фильтров цвета изображений

В большинстве разделов настроек цветовой схемы доступны настройки фильтров цвета изображений. Эти настройки накладывают на изображения фильтр, который окрашивает изображения в градации серого. При значении настройки «Без изменений» фильтр на изображения не будет накладываться.

К наиболее часто используемым настройкам фильтров цвета изображений относятся:

  • Шапка страницы, задний план, фильтр цвета изображений. Задает цвет иконок возле меню пользователя (Рис. 3.8.3.а).

Рис. 3.8.3.а. Иконки возле меню пользователя.
  • Шапка страницы, основные кнопки, фильтр цвета изображений. Задает цвет иконок в кнопках в меню пользователя (Рис. 3.8.3.б).

 

Рис. 3.8.3.б. Кнопки в меню пользователя.
  • Шапка страницы, основные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок в кнопках в меню пользователя при наведении (Рис. 3.8.3.в).

Рис. 3.8.3.в. Кнопка в меню пользователя при наведении.
  • Шапка страницы, дополнительные кнопки, фильтр цвета изображений. Задает цвет иконок в кнопках, добавленных в разделе «Шапка страницы», например, в настройке «Текст в шапке» (Рис. 3.8.3.г).

Рис. 3.8.3.г. Дополнительная кнопка в шапке страницы.
  • Шапка страницы, дополнительные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок в кнопках при наведении, добавленных в разделе «Шапка страницы», например, в настройке «Текст в шапке» (Рис. 3.8.3.д)

Рис. 3.8.3.д. Дополнительная кнопка при наведении в шапке страницы.
  • Контент, заголовки, фильтр цвета изображений. Задает цвет иконки в заголовке блока (Рис. 3.8.3.е).

Рис. 3.8.3.е. Иконка в заголовке блока.
  • Контент, основные кнопки, фильтр цвета изображений. Задает цвет иконок в контенте, например, в текстовом редакторе ATTO (Рис. 3.8.3.ж).

Рис. 3.8.3.ж. Иконки в текстовом редакторе ATTO.
  • Контент, основные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок в контенте при наведении, например, в текстовом редакторе ATTO (Рис. 3.8.3.з).

Рис. 3.8.3.з. Иконка в текстовом редакторе ATTO при наведении.
  • Контент, дополнительные кнопки, фильтр цвета изображений. Задает цвет иконок в контенте, например, в интерфейсах загрузки файлов (Рис. 3.8.3.и).

Рис. 3.8.3.и. Иконки в интерфейсе загрузки файлов.
  • Контент, дополнительные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок в контенте при наведении, например, в интерфейсах загрузки файлов (Рис. 3.8.3.к).

Рис. 3.8.3.к. Иконка в интерфейсе загрузки файлов при наведении.
  • Блоки, основные кнопки, фильтр цвета изображений. Задает цвет иконок для основных кнопок в блоках (Рис. 3.8.3.л).

Рис. 3.8.3.л. Основные кнопки в блоке.
  • Блоки, основные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок при наведении для основных кнопок в блоках (Рис. 3.8.3.м).

Рис. 3.8.3.м. Основная кнопка в блоке при наведении.
  • Подвал страницы, основные кнопки, фильтр цвета изображений. Задает цвет для иконок в кнопках социальной сети в подвале сайта (Рис. 3.8.3.н).

Рис 3.8.3.н. Кнопки социальной сети в подвале сайта.
  • Подвал страницы, основные кнопки при наведении, фильтр цвета изображений. Задает цвет при наведении для иконок в кнопках социальной сети в подвале сайта (Рис. 3.8.3.о).

Рис. 3.8.3.о. Кнопка социальной сети в подвале сайта при наведении.
  • Подвал страницы, дополнительные кнопки, фильтр цвета изображений. Задает цвет иконок в кнопках, добавленных в разделе «Подвал страницы», например, в настройке «Текст описания к логотипу» (Рис. 3.8.3.п).

Рис. 3.8.3.п. Дополнительная кнопка в подвале страницы.
  • Подвал страницы, дополнительные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок в кнопках при наведении, добавленных в разделе «Подвал страницы», например, в настройке «Текст описания к логотипу» (Рис. 3.8.3.р).

Рис. 3.8.3.р. Дополнительная кнопка при наведении в подвале страницы.
  • Виджет служебной информации в подвале, кнопки, фильтр цвета изображений. Задает цвет для иконки в кнопке виджета служебной информации в подвале сайта (Рис. 3.8.3.с).

Рис. 3.8.3.с. Кнопка виджета служебной информации.
  • Виджет служебной информации в подвале, кнопки при наведении, фильтр цвета изображений. Задает цвет при наведении для иконки в кнопке виджета служебной информации в подвале сайта (Рис. 3.8.3.т).

Рис. 3.8.3.т. Кнопка виджета служебной информации при наведении.
  • Сворачиваемые секции, основные кнопки, фильтр цвета изображений. Задает цвет иконок для основных кнопок блоков сворачиваемых секций (Рис. 3.8.3.у).

Рис. 3.8.3.у. Основные кнопки в блоке сворачиваемой секции.
  • Сворачиваемые секции, основные кнопки при наведении, фильтр цвета изображений. Задает цвет при наведении иконок для основных кнопок блоков сворачиваемых секций (Рис. 3.8.3.ф).

 Рис. 3.8.3.ф. Основная кнопка в блоке сворачиваемой секции при наведении.
  • Сворачиваемые секции, дополнительные кнопки, фильтр цвета изображений. Задает цвет иконок в дополнительных кнопках, добавленных в сворачиваемых секциях, например, в области «Над шапкой» (Рис. 3.8.3.х).

Рис. 3.8.3.х. Дополнительная кнопка в области «Над шапкой».
  • Сворачиваемые секции, дополнительные кнопки при наведении, фильтр цвета изображений. Задает цвет иконок в дополнительных кнопках при наведении, добавленных в сворачиваемых секциях, например, в области «Над шапкой» (Рис. 3.8.3.ц).

Рис. 3.8.3.ц. Дополнительная кнопка при наведении в области «Над шапкой».
  • Док, элемент док-панели в виде иконки, фильтр цвета изображений. Задает цвет иконок элементов док-панели (Рис. 3.8.3.ч).

Рис. 3.8.3.ч. Иконки блоков в док-панели.
  • Док, элемент док-панели в виде иконки при наведении, фильтр цвета изображений. Задает цвет при наведении иконок элементов док-панели (Рис. 3.8.3.ш).

Рис. 3.8.3.ш. Иконка блока в док-панели при наведении.
  • Секция курса, заголовки, фильтр цвета изображений. Задает цвет иконки в заголовке секции курса (Рис. 3.8.3.щ).

Рис. 3.8.3.щ. Иконка в заголовке секции курса.

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

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

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

 Область сайта  Доступные настройки
Основной слой верстки сайта
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Повторение по горизонтали изображения фона (на всю ширину)
  • Повторение по вертикали изображения фона (на всю ширину)
  • Размер изображения фона (на всю ширину)
  • Позиционирование по горизонтали изображения фона (на всю ширину)
  • Позиционирование по вертикали изображения фона (на всю ширину)
Сворачиваемая секция «Над шапкой»
  • Цвет фона (по ширине сайта)
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Текст верха шапки
  • Шапка страницы, верхняя полоса с текстом в шапке, цвет фона
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Шапка
  • Шапка страницы, задний план, цвет фона
  • Фоновое изображение
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Док-панель
  • Док, задний план, цвет фона
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Область блоков «Верх страницы»
  • Цвет фона (по ширине сайта)
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Сворачиваемая секция «Над контентом»
  • Цвет фона (по ширине сайта)
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Основной контент
  • Контент, задний план, цвет фона
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Область блоков «Низ страницы»
  • Цвет фона (по ширине сайта)
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Сворачиваемая секция «Под контентом»
  • Цвет фона (по ширине сайта)
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Рамка подвала
  • Цвет фона (по ширине сайта)
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений
Подвал
  • Подвал страницы, задний план, цвет фона
  • Изображение фона (по ширине сайта)
  • Цвет фона (на всю ширину)
  • Изображение фона (на всю ширину)
  • Ширина без ограничений

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

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

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

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

Рис. 3.9.2. Для области «Область блоков «Низ страницы» применена настройка «Цвет фона (по ширине сайта)» = #6E99FC.

Рис. 3.9.3. Для области «Область блоков «Низ страницы» файл подложки загружен в настройку «Изображение фона (по ширине сайта)».
  • на всю ширину — цвет фона (Рис. 3.9.4) или изображение фона (Рис. 3.9.5) применяется на всю ширину экрана, включая боковые области;

Рис. 3.9.4. Для области «Область блоков «Низ страницы» применена настройка «Цвет фона (на всю ширину)» = #6E99FC.

Рис. 3.9.5. Для области «Область блоков «Низ страницы» файл подложки загружен в настройку «Изображение фона (на всю ширину)».

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

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

Рис. 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):

Рис. 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.1. Страница «Настройки регионов».

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

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

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

Рис. 3.11.2. Расположение регионов на странице личного кабинета пользователя.

Для каждой страницы системы, отраженной на странице «Настройки регионов», доступна настройка «Регион по умолчанию» (Рис. 3.11.3). В настройке можно определить, в какую область страницы по умолчанию будет добавляться новый блок (для выбора доступны стандартные регионы). Положение блока на странице можно изменить уже после добавления блока в регион по умолчанию.

Рис. 3.11.3. Настройка «Регион по умолчанию».

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

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

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

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

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

Рис. 3.11.1.б. Варианты отображения блоков.

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

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

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

Рис. 3.11.2.а. Развернутый и свернутый режимы отображения региона «Над шапкой».

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

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

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

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

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

Нажатие на кнопку «+» (поз. 1 Рис. 3.11.2.в) добавит строку, внутри которой можно сделать разбиение на нужное количество областей (сегментов). Нажатие на кнопку «-» (поз. 2 Рис. 3.11.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.г. Наполнение строк в сворачиваемой секции.

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

Рис. 3.11.2.д. Сетка для сворачиваемой секции «Над контентом», состоящая из одной строки и трех сегментов.

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

Рис. 3.11.2.е. Выбор размещения блока в кастомном регионе.

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

Регион Техническое название региона
Над шапкой htop
Над контентом ctop
В контенте (под заголовком) cmid
Под контентом cbot

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

Рис. 3.11.2.ж. Блок в области «Над контентом».

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

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

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

  • если необходимо, чтобы курс выглядел лаконично и пользователи не могли изменить его дизайн, то сворачивание блоков на главной странице курса или на описательной странице можно запретить;
  • в курсе рекомендуется полностью убирать левую колонку, то есть поставить настройку, что все блоки, помещенные в неё, автоматически сворачиваются и фиксируются в док-панели;
  • правую колонку рекомендуется настраивать так, чтобы она была всегда видна и блоки из неё могли быть свёрнуты в док-панель или развёрнуты обратно.
Начиная с версии 4.1.3а в СЭО 3KL появилась выдвижная панель блоков.  Все блоки из боковых колонок по умолчанию помещаются в выдвижную панель блоков. Дополнительно для пользователей, которые предпочитают предыдущее отображение блоков в боковых панелях, доступна возможность оставить левую колонку с зафиксированными в ней блоками. Дополнительная информация в статье «Миграция СЭО 3КL с релиза 3.9 на 4.1. Вопросы и решения».

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

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

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

Рис. 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.1. Страница авторизации.

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

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

Рис. 3.13.2. Стандартная страница авторизации.

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

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

Рис. 3.13.3. Страница авторизации типа «Слайдер».

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

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

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

  • Если в шапку уже добавили текстовый блок через настройки шапки страницы (см. раздел «Страница «Шапка страницы»), то текст, добавленный через настройки страницы авторизации, будет отображаться под уже имеющимся текстовым блоком.
  • Цвет текста в шапке должен контрастировать с цветами изображений в слайдере так, чтобы его было комфортно читать.
  • Логотип, который можно добавить через поле «Текст в шапке», также должен сочетаться по цвету с изображениями слайдера.
  • Отступы текста в шапке (см. поз. 3 Рис. 3.13.4). В поле настройки можно ввести, разделяя пробелом, значения отступов сверху/справа/снизу/слева (в пикселах) для текста в шапке. Например: «15px 0 0 0».

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

Для страницы авторизации типа «Слайдер» логотип наследуется с других страниц сайта, если он был добавлен, например, в поле «Текст копирайта» в настройках подвала страницы (см. раздел Страница «Подвал страницы»).
Если логотип не сочетается с изображениями страницы авторизации, рекомендуется использовать вариант оформления «Боковая панель», в котором логотип отображается на боковой панели белого цвета.
  • боковая панель (3.13.5).

Рис. 3.13.5. Страница авторизации типа «Боковая панель».

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

Рис. 3.13.6. Дополнительные настройки страницы авторизации типа «Боковая панель».
  • Логотип для страницы «Боковая панель» (см. поз. 1 Рис. 3.13.6). Позволяет загрузить логотип, который будет отображаться только на странице авторизации.
  • Изображение страницы авторизации (см. поз. 2 Рис. 3.13.6). Позволяет загрузить фоновое изображение для страницы авторизации.
  • Элементы шапки (см. поз. 3 Рис. 3.13.6). Если опции настройки установлены, то соответствующие панели будут отображаться на странице авторизации.

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

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

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

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

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

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

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

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

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

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

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

Теги: администрирование, внешний вид
Рейтинг ответа: 0 (0 оценок)

Комментарии запрещены