Свой CSS и JS школы

Свой CSS и JS — для всей школы сразу: страниц школы и кабинета ученика. Пишутся в «Настройки → Оформление», карточка «Свой CSS и JS школы».

Если вы дошли сюда потому, что уже сломали страницу, — вам нужен Аварийный выключатель: адрес ?theme=off открывает любую страницу без своего кода.

Кто может #

Владелец школы, администраторы и те, кому владелец открыл право «добавлять свой код» — то же право, что у блоков кода в конструкторе. Остальным карточка видна только для чтения.

Где действует, а где нет #

Админка и вход — без своего кода намеренно: опечатка в CSS не должна закрывать дорогу к месту, где её чинят, а JS школы не должен исполняться там, где работают сотрудники. Если страница школы, где исполнился ваш JS, открывает админку переходом внутри сайта, админка загружается заново — уже без него.

JS выполняется у каждого, кто открыл страницу школы, — с его входом. Ставьте только код, которому доверяете, как себе: счётчик, чат поддержки, свой виджет. Рубильник «Выключить весь код» в «Настройки → Код школы» гасит и его.

Что писать #

В большинстве случаев — переопределение переменных. Одна строка перекрашивает школу:

:root { --brand: #C2185B; }

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

Для конкретного элемента — якоря, стабильные атрибуты data-lms, которые мы обязуемся не менять:

[data-lms="course-card"] { box-shadow: none; border-radius: 0; }
[data-lms="lesson-body"] { font-size: 18px; }

Полный перечень переменных — Переменные оформления. Разобранная до конца задача — рецепт Перекрасить школу под фирменный стиль.

Чего писать не стоит #

Селекторов по нашей вёрстке. Классы вроде .text-body не являются контрактом: правило по ним сломается при первой же перевёрстке — молча, при обновлении, без ошибки в журнале. Для «уберите тень у карточки курса» есть якоря.

Переменных с пометкой «внутренняя». Их мы меняем свободно и без предупреждения.

Цветов состояний. Зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах: иначе ученик и куратор перестают понимать экран с первого взгляда.

Что проверяется при сохранении #

Только то, что спасает страницу, а не вкус:

• размер — CSS и JS до 1 МБ каждый; шрифты и картинки загружайте в «Файлы» и подключайте ссылкой. Код уходит на страницы отдельными файлами (/theme/school.css, /theme/school.js) с отметкой правки: браузер скачивает их один раз и берёт из памяти, пока код не поменяют (правка 20 сентября — раньше код вшивался в каждую страницу, и предел был 64 КБ и 32 КБ);
• «» в CSS и «» в JS — они закрыли бы свой тег посреди кода, и страница открылась бы чужой разметке;
• фигурные скобки CSS сходятся — несходящаяся скобка тихо съедает все правила после неё.

Ошибку синтаксиса JS покажет консоль браузера: она не пускает дальше своего тега и странице не мешает.

Как проверить и откатить #

Сохранили — откройте страницу школы или кабинет в соседней вкладке и обновите. Сломалось — та же страница с ?theme=off в конце адреса откроется без своего кода.

Прежние редакции — в журнале школы («Настройки → Журнал»): каждая запись хранит, кто поменял, что было и что стало. Вернуть — скопировать прежний текст в поле и сохранить.

Граница с блоками кода #

Свой CSS и JS школы оформляет всю школу. Блок CSS в конструкторе оформляет свою страницу или урок. Разные инструменты, разные места.

Агент свой код школы не правит: исполняемый код ставит человек с этим правом, руками.