Тема оформления:Timeless

Эта тема оформления поставляется с MediaWiki 1.31 и выше. Таким образом, вам не нужно загружать его снова. Тем не менее, вы всё равно должны следовать другим инструкциям.

MediaWiki skins manual - category

Timeless Release status: stable
Author(s)	Isarra
Compatibility policy	Snapshots releases along with MediaWiki. Master is not backwards compatible.
MediaWiki	1.31+
License	GNU General Public License 2.0 or later
Download	Download skin Git [?]: Download Git master browse repository (Phabricator · GitHub) commit history repository contributors (GitHub) code review
Example	mediawiki.org This article
Parameters $wgTimelessBackdropImage
Quarterly downloads	148 (Ranked 3rd)
Public wikis using	2,938 (Ranked 13th)
Public wikis using as default skin	165
Translate the Timeless skin if it is available at translatewiki.net
Vagrant role	timeless
Issues :	Open tasks · Report a bug

Домашняя страница английской Википедии в скине Timeless, просмотр на мобильном телефоне

Timeless полностью поддерживает адаптивный веб-дизайн и оптимизирована для множества значений ширины экрана - от узких экранов мобильных телефонов до широких мониторов.

Тема основана на Winter и является попыткой включить в тему предложения по обсуждению этого деревенского насоса 2015 года.

Установка

• Если используется Vagrant , установите с помощью vagrant roles enable timeless -p

Ручная установка

• Скачайте и распакуйте файл(ы) в папку с именем «Timeless» в папке skins/ вашего сайта.
• Добавьте следующий код в ваш файл LocalSettings.php :

  wfLoadSkin( 'Timeless' );
  

• Настройте, как вам требуется.
•  Готово - Перейдите на страницу Special:Version на своей вики, чтобы удостовериться в том, что тема оформления успешно установлена.

Возможности

В отличие от минималистичной темы оформления Minerva , которая является темой оформления по умолчанию для мобильных устройств, Timeless включает в себя функциональность темы, сфокусированной на настольных устройствах, такой как Тема оформления:Векторное , темы для настольных устройств по умолчанию, и всех размеров экрана.

Кроме того, Timeless предлагает отличный и удобный ярлык для списка вклада пользователей в верхней панели, рядом с кнопками “Править” и “История”.

Главная цель — это создание полнофункциональной темы, которая подчёркивает как контент, так и инструменты редактирования, обладает несколькими режимами, такими как полная фокусировка на контент (winter) или переключение на тёмную тему.

В отличие от MobileFrontend/Minerva, Timeless не изменяет принудительно стиль таблиц для мобильных разрешений, а вместо этого ожидает и поощряет пользователей делать таблицы и шаблоны адаптивными, оптимизированными для их конкретного использования.

С помощью Skin:Timeless-DarkCSS , пользователи могут вручную включить тёмный фон для уменьшения напряжения глаза и энергосбережения на дисплеях AMOLED. Инструкции доступны на этой странице.

Будущая цель — создать полнофункциональный скин, который:

1. акцентирует внимание как на содержании, так и на инструментах редактирования,
2. с несколькими режимами просмотра для показа всего, фокусируясь только на содержимом (зима), или
3. переключение в режим темного/ночного просмотра.

Детали адаптивного дизайна сайта

Этот раздел основан на конфигурации по умолчанию.

≥1340 пикселей

На смоделированной ширине экрана 1340 пикселей сайт виден в трёх колонках. Некоторые разделы навигации по сайту находятся слева от области содержимого (например, "Навигация", "Инструменты"), а некоторые — справа ("Ещё", "Печать/экспорт", "В других проектах", " На других языках", "Категории").

Начиная с ширины смоделированного окна просмотра браузера около 1900 пикселей, ширина центрального столбца с содержимым фиксируется на уровне 1261 пикселя, в то время как в более ранних скинах Тема оформления:Векторное и Тема оформления:MonoBook она может неограниченно расширяться с шириной экрана.

С помощью этого скина можно добиться неограниченной ширины содержимого, используя этот фрагмент кода CSS.

С помощью этого кода CSS пользователи могут дополнительно отображать разделы навигации из третьего (правого) столбца в первом (левом) столбце, как это уже было сделано при ширине браузера от 1339 до 1100 пикселей.

от 1339 до 1100 пикселей

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

Менее 1100 пикселей

Сайт виден на одной колонке. Область содержимого заполняет все пространство экрана. Категории отображаются внизу страницы, также, как и в Тема оформления:Векторное и Monobook .

Разделы навигации по сайту свернуты в верхнюю панель навигации с текстовыми метками и в настоящее время отображаются и скрываются с помощью JavaScript, а не в чистом виде CSS, как это реализовано в Skin:MinervaNeue с использованием :checked.

Менее 851 пикселя

При разрешении менее 851 пикселя Timeless адаптируется к экранам мобильных телефонов.

Текстовые метки на элементах навигации над областью содержимого (например, "Статья", "Обсуждение", "Править", "Править код", "История") не отображаются для экономии места по горизонтали; вместо обоих отображаются только значки.

Разделы навигации по сайту свернуты в верхнюю панель навигации с подписями к значкам.

Фрагменты CSS

Эти фрагменты кода можно использовать для настройки внешнего вида скина, вставив их в MediaWiki:Timeless.css в качестве администратора MediaWiki, в своё собственное пользовательское пространство CSS в качестве обычного пользователя или в пользовательский скин расширения браузера в качестве посетителя.

Неопределенная ширина контента

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

/* Неопределенная ширина контента */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

Одностороннее навигационное меню

Используя этот фрагмент кода, элементы правого меню навигации (#mw-related-navigation) будут по-прежнему отображаться в левом столбце (ниже #mw-site-navigation), как и при ширине браузера от 1100 до 1330 пикселей даже за пределами 1340 пикселей ширины браузера для пользователей, предпочитающих одностороннее навигационное меню, известное из скинов Тема оформления:Векторное и Тема оформления:MonoBook .

Код также работает в сочетании с кодом неограниченной ширины контента, указанным выше.

/* Одностороннее навигационное меню */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
  .mw-wiki-logo {
  	display: inline-block;
  }
}

/* Выравнивание верхней цветной полосы со столбцами страницы */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Повторное выравнивание нижних логотипов */
#footer { padding-right: 1em; }

Модернизированные шрифты в верхней панели

Следующий код CSS добавляет набор современных типов шрифтов без засечек (включая резервные шрифты) к текущим шрифтам с засечками (Linux Libertine, Times New Roman и т. д.) имени пользователя и меню навигации верхней панели отображается между 852 и 1100 пикселями ширины браузера.

/* Модернизация шрифта верхней панели */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}

/* Избегаем обрезание букв с нижними выносными элементами: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Патч положения треугольника */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

Выделение заголовка раздела при навигации

Этот фрагмент кода CSS выделяет заголовок последнего раздела при навигации, чтобы упростить возврат к нему при прокрутке длинного документа.

.mw-headline:target {
  background-color: gold;
}

Устаревшие патчи

Пользователи и администраторы удаленного интерфейса старых установок MediaWiki с ранней и менее зрелой версией этого скина могут модифицировать эти патчи кода, чтобы тем временем устранить недостатки внешнего вида:

/* Оптимизация ширины: предотвращает слишком узкий вид на мобильных телефонах */
@media (max-width:850px) {
  #mw-content  { padding: 0.5em 0.5em 3em; }
  #firstHeading { width: 100%; }
  #mw-header-container { padding: 3.75em 0.5em 0.35em; }
  #site-navigation h2 { left: 0.5em; }
  #p-logo-text { left: 3em; }
  #user-tools h2 { right: 1em; }
  #site-tools h2 { right: 4em; }
}

/* Исправление отступа оглавления (изменение отступов на уровне заголовка, если они отсутствуют) */
#toc ul ul {
  margin: 0 0 0 2em;
}

Настройка

Следующее поддерживается только в MediaWiki 1.34+

$wgTimelessBackdropImage (string, default 'cat.svg')

Установите его так же, как $wgLogo для соответствующего фонового изображения. Рекомендован svg шириной 500-750px: svg для поддержки HiDPI; размер действительно может быть любым, но это приведет к такому же внешнему виду содержимого, как и в случае с cat по умолчанию.

Чтобы фон потенциально работал без изменений с другими темами фонового цвета, когда они будут позже реализованы, рекомендуется прозрачное одноцветное изображение с непрозрачностью 20-50% черно-белое, где альфа-значения ч/б части также составляют около 10-50/255, так как это должно позволить ему работать практически со всем, что не является чисто белым/черным.

Примеры (которые на самом деле не соответствуют приведенной выше рекомендации и поэтому, вероятно, не будут работать на темном фоне): Timeless backdrop (wiktionary).svg и Timeless backdrop (metawiki).svg.

$wgTimelessLogo (null|string|array, default null)

Special logo rendering, allowing for custom logos for Timeless specifically (such as a square logo version without the wordmark in order to avoid duplication with the header). Also provides slightly better HiDPI support than using $wgLogoHD, as that only works for 135x135px logos, and scales all high-res logos down to this size.

Can be used to point Timeless at a File uploaded onwiki (remember to protect the file if using this) simply by providing the file name, or you can specify the logo path details manually using an array.

To reuse a $wgLogo and $wgLogoHD already set for a nominally 160x160px logo, but where the HD versions also come out the right size:

$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];

To use File:Cows.svg uploaded onwiki:

$wgTimelessLogo = 'Cows.svg';

• Note that uploaded logos work best as svgs or as 2x- or higher-sized rasters, and will be scaled down for each target resolution. Obviously this approach requires file uploads and thumbnailing to be enabled.
• Recommended nominal sizes probably around 135px to 165px.

$wgTimelessWordmark (null|string|array, default null)

To use an image instead of the default Linux Libertine serif text for the header banner wordmark. Same usage approach as $wgTimelessLogo.

So the English Wikipedia might use Wikipedia wordmark.svg, like so:

$wgTimelessWordmark = 'Wikipedia wordmark.svg';

Or specify an array of each resolution version, plus the dimensions, per above (more likely with them, frankly).

• If not using an uploaded file onwiki, specifying the dimensions is required.
• Recommended nominal size up to 200px wide by 38px tall.

Note that Timeless supports wordmark and HiDPI logos set in Руководство:$wgLogos , so just using that is recommended if you have no particular reason not to. In particular the site title rendering may or may not require a wordmark image to render correctly, as the styles for the text title are basically just guesses that will not always work. Other options to make the wordmark render correctly include:

• Setting some custom css in the wiki's Timeless.css, such as no-wrap or a different font-size value
• Setting a different display string via changing the contents of the timeless-sitetitle message