Как сделать темную тему в школьном портале

Обновлено: 07.07.2024

Microsoft Office включает темно-серую тему. Системный темный режим Windows 10 не повлияет на приложения Office, но Вы можете выбрать темную тему для приложений Office, таких как Microsoft Word, Excel, Outlook и PowerPoint.

Это работает в Office 365, Office 2016 и Office 2013. Он работает с любой версией Windows, включая Windows 7, 8 или 10. Тем не менее темные темы в настоящее время недоступны для Office на Mac.

Эти настройки темы и фона влияют на все приложения Microsoft Office в Вашей системе. Они даже влияют на приложения Office на других ПК с Windows, предполагая, что Вы входите в них с той же учетной записью Microsoft.

К сожалению, создаваемые Вами документы по-прежнему будут иметь белый фон и черный текст по умолчанию. Вы можете изменить свои документы на черный фон и белый текст, но эти цвета будут частью каждого сохраненного Вами документа.

Итак, если Вы отправили такой документ Word кому-то другому, они увидели бы черный фон с белым текстом, когда они его открыли. Это потребует большого количества чернил или тонера, если кто-то напечатает такой документ.

Все больше приложений и сайтов дополняют свой интерфейс темной темой. Она не только стильно выглядит, но и снижает нагрузку на глаза. В гаджетах с OLED темная тема также экономит заряд батареи. Мы расскажем подробнее, как включить темное оформление в популярных приложениях, а также какие возможности предоставляют браузеры.

Темная тема в мобильных мессенджерах

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

Темная тема в браузере: стандартные настройки

Многие из пользователей проводят львиную долю времени, работая за ноутбуком или ПК. Если вас раздражает яркое оформление, то темную тему можно выставить и в браузере. Это касается именно интерфейса, а не оформления конкретных сайтов. О последнем мы поговорим позже.

Google Chrome. Стандартно в настройках Chrome нельзя менять темы оформления, поэтому их придется устанавливать в качестве дополнений через фирменный магазин. Команда разработчиков предлагает несколько вариантов, в числе которых JustBlack, а также нечто среднее между светлой и темной темой — Slate.

В браузере автоматически включится темная тема, которая также коснется и стартовой страницы Google.

Opera. Далеко ходить в этом браузере не придется — достаточно открыть настройки в правой части окна. Выбор темы находится в самом верху и затрагивает весь интерфейс браузера.

К сожалению, темы не изменяют внутренние окна настроек браузера.

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

Как включить темную тему для всех сайтов

Что делать, если вы хотите затемнить интерфейс различных сайтов? В случае с некоторыми мессенджерами, это можно сделать через стандартные настройки. Например, сменить тему можно в браузерных версиях Discord, Telegram и не только.

Однако для остальных сайтов таких настроек нет. Здесь на помощь приходят расширения и плагины.

DarkReader

Это самое популярное и эффективное расширение для браузера, которое позволяет включить темную тему практически для любого сайта. Плагин редактирует HTML-код, меняя цвет фона и шрифта для каждого интернет-ресурса. Дополнение распространяется для Chrome, Firefox, Safari и Edge.

В 99 % случаев плагин корректно подбирает цвет шрифтов, но на некоторых ресурсах могут попадаться надписи, которые теряются на сером фоне.

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

Единственный условный недостаток — страницы могут подгружаться с небольшой задержкой в 1-2 секунды, поскольку Dark Reader изменяет их код.

NightEye — Темный режим

Если предыдущий плагин по каким-то причинам работает некорректно, можете скачать расширение NightEye. Как и предыдущее, оно изменяет цвет фона и шрифта для каждого сайта, фактически включая ночную тему. Ключевое преимущество — поддержка более широкого списка браузеров: Google Chrome, Opera, Firefox, Safari, Edge, Yandex, UCBrowser и не только. Ссылка на скачивание для каждого браузера располагается на официальной странице.

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

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

SuperDarkMode

Это расширение создано только для Google Chrome, но входит в список наиболее популярных. Позволяет сменить цвета сайта на более темные и в большинстве случаев делает это максимально корректно. В правой части окна появляется соответствующая иконка, нажимая на которую вы можете включать или отключать темный режим.

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

Эти расширения включают ночной режим независимо от того, поддерживает ли сайт темную тему или нет, однако потребляют небольшой ресурс ОЗУ и дают дополнительную нагрузку на процессор.

Александр Кузнецов | 14 Сентября, 2016 - 19:30

Тёмная тема в настройках Windows

Тёмная тема в Microsoft Office

Если вы пользуетесь офисными приложениями Microsoft, зайдите в настройки любого из них и в разделе порсонализации выберите тёмную тему. Эти настройки влияют на все установленные приложения Microsoft Office.

Тёмная тема в Microsoft Edge

Точно так же поменять оформление интерфейса можно в некоторых других стандартных приложениях Windows, на которые не повлияла глобальная установка тёмной темы в системных параметрах.

Тёмная тема в Chrome или Firefox

Зайдите в магазин тем оформления для браузера Chrome или Firefox и выберите подходящую тему. В Chrome можно использовать, к примеру, Morpheon Dark, а High Contrast для Chrome позволяет модифицировать даже сайты: инверсировать цвета или менять оформление в них на монохромное.

Тёмная тема в десктопных программах

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

Темы устроены очень просто: это набор html-файлов, на основе которых CMS отображает страницы сайта.

Чтобы наглядно представить себе, как устроены темы оформления, рассматривайте тему sp-default. Эта тема содержит в html-тексте комментарии и весь набор необходимых html-файлов. В других темах некоторые html-файлы могут отсутствовать. В этом случае портал использует шаблоны из темы sp-default.

Также рекомендуем посмотреть, как устроена тема sp-blog (предназначенная только для блогов).

Содержание

Краткое руководство по редактированию темы

Войдите в портал.

В меню "Сайт" выберите пункт "Темы оформления".

Распакуйте архив и переименуйте полученную папку. Переименование папки необходимо, так как название папки = название темы.

Измените файлы темы с помощью HTML/CSS или графических редакторов в зависимости от задачи и запакуйте папку в zip-архив.

На той же странице со списком тем оформления в портале кликните ссылку "Установить новую тему…".

Появится страница с предложением загрузить zip-архив с темой.

Загрузите созданный только что zip-архив.

Например, вы скачали тему "sp-silver".

Её новогоднюю вариацию вы назвали "sp-silver-newyear2016". То есть папка с темой у вас называется также "sp-silver-newyear2016" и архив с этой папкой соответственно — "sp-silver-newyear2016.zip".

После загрузки такого архива на сервер кроме исходной темы "sp-silver" вы увидите новую (вашу) "sp-silver-newyear2016".

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

Собственные темы можно (точно также как и встроенные) скачать для редактирования.

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

Видеоуроки

Из чего сделаны темы

Есть 4 типа файлов:

HTML-шаблоны: *.html
(опционально) Стили: style.css
(опционально) Настройки иерархического меню: menu-settings.js
(опционально) Картинки

Для изменения темы достаточно просто отредактировать файлы, из которых она состоят.

HTML-шаблоны

index.html — единственный жизненно необходимый для работоспособности темы глобальный шаблон для каждой страницы. Он должен содержать хотябы одну переменную из списка: $top, $left, $center, $right . При выводе страницы сайта компоненты выводятся последовательно согласно порядку сортировки в одноимённые блоки. Именно их представляют вышеназванные переменные. Их можно разместить в макетной таблице или в DIV-ах с разными id для DIV-ной вёрстки. Переменная $HEAD должна располагаться в теге , она нужна для вывода служебных строк (например, вставка JavaScript-кода для иерархического меню, ключевые слова конкретной страницы и т. п.) Другие переменные: $sitedate — текущая дата, $ou_name — название образовательного учреждения, $ou_num — номер образовательного учреждения.
остальные файлы *.html Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS. О назначении каждого блока и допустимых переменных в нём смотрите в архиве с шаблоном темы.

Описание шаблонов модулей:

Файл style.css — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле.

Имя файла должно быть строго таким. В разработке функциональность, которая потребует от тем оформления именно этого имени файла со стилями.

Изображения можно располагать произвольно либо рядом, как в теме xp, либо в подпапке. В этом нет никаких правил, делайте как вам удобно.

Внешний вид меню

Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.

Как создать свою тему

Есть два способа:

Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Большинство пользователей поступают именно так.

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

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

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

Шаблон темы

предназначен для создания темы оформления с нуля. Вёрстка там либо отсутствет полностью, либо представлена в минимальном объёме. В каждом HTML-файле есть комментарии о назначении блока и каждой возможной переменной. Присутствует пример настройки иерархического меню и чуток CSS.

Экономьте время: не оформляйте те модули, которыми вы не собираетесь пользоваться. HTML-файлы блоков неиспользуемых модулей могут даже отсутствовать в вашей теме. Сравните, например, наборы файлов тем sp-default и sp-blog.

Чем редактировать файлы тем

Одного единственного рекомендуемого набора инструментов нет. Есть множество редакторов. И чтобы начать пользоваться чем-то с удобством, с удовольствием, лучше всего посмотреть разыне редакторы и выбрать самый подходящий лично вам.

Редакторы для HTML, CSS, JavaScript:

IntelliJ IDEA
Komodo IDE
Brackets
Microsoft Expression Web 4 (Free Version)
WebStorm
Aptana
Dreamweaver

Sublime Text (о нём же на русском)
Notepad++
TopStyle
Far Manager с плагинами Colorer и Web Editor

HTML-редакторов много, мы приводим только те, что пробовали и понравилось.

Как видеть результаты во время разработки

Есть два пути первоначального размещения темы на сервере. В любом случае сначала войдите в портал. Далее возможны два варианта:

Через Веб-интерфейс. Запакуйте папку с темой в zip-архив, и выберите в меню Сайт → Темы оформления → Установить. Выберите полученный zip-архив и подтвердите закачку. Вы увидите, что новая тема появилась в списке.
Через доступ к файловой системе. Любым удобным способом закачайте папку со своей темой на сервер по пути /var/www/html/sp/cms/themes/ . Затем в веб-интерфейсе выберите в меню Сайт → Темы оформления. Новая тема оформления появилась в списке.

Дальше после включения темы и захода на школьный сайт в любимом браузере цикл доработки выглядит так: вы отредактировали файлы темы, нажали F5 (или что у вас там за кнопка обновление странички делает?) и увидели результат. И так повторяете, пока не достигните запланированной цели.

Материалы, инструменты

Коллекции бесплатных шаблонов сайтов.

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

Тестирование и отладка

После того, как тема была сделана и работает в вашем любимом браузере, необходимо проверить её работоспособность в нескольких популярных браузерах.

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

Firefox
Opera
Chrome
Internet Explorer

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

С последним всё чуть сложнее. Дело в том, что многие пользователи Internet Explorer сегодня не обновляют его, работают с тем, что досталось им при установке Windows. Это означает, что без обновления в разных версиях Windows встречаются старые версии Internet Explorer, соответственно:

Windows XP идёт с IE 6, доступно обновление до IE 8
Windows Vista идёт с IE 7, доступно обновление до IE 9
Windows 7 идёт с IE 8, доступно обновление до IE 9
Windows 8, вероятно, разойдётся с IE 9

Весной 2012 года по нашим наблюдениям на компьютерах пользователей IE больше всего распространена версия 8, набирает обороты 9. Стремятся к нулю, но всё ещё есть 6 и 7. Выходит, что следует посмотреть в первую очередь на работу сайта в IE 8.

Читайте также: