Habillage:Timeless

Cet habillage est fourni avec MediaWiki 1.31 et supérieur. Ainsi vous n'avez pas besoin de la télécharger à nouveau. Néanmoins, vous devez encore suivre les autres instructions fournies.

Manuel des habillages MediaWiki - catégorie

Timeless État de la version : stable
Auteur(s)	Isarra
Compatibility policy	Snapshots releases along with MediaWiki. Master is not backwards compatible.
MediaWiki	1.31+
Licence	Licence publique générale GNU v2.0 ou supérieur
Téléchargement	Téléchargez l'habillage Git [?]: Télécharger la branche master de Git parcourir le dépôt (GitHub) historique des validations repository contributors (GitHub) revue de code
Exemple	mediawiki.org This article
Paramètres $wgTimelessBackdropImage
Traduisez l'habillage Timeless sur translatewiki.net
Vérifiez la matrice des utilisations et des versions.
Vagrant role	timeless
Problèmes :	Tâches ouvertes · Signaler un bogue

La page d’accueil de Wikipédia en anglais avec l’habillage Timeless vu sur un téléphone mobile.

Timeless prend en charge fermement la conception web réactive et est optimisé pour une multitude de largeurs d’écrans allant des écrans étroits de téléphones mobiles aux moniteurs larges.

L’habillage est basé sur Winter en tenant d’y intégrer les suggestions de cette discussion de 2015.

Installation

• Si vous utilisez Vagrant , utilisez le code vagrant roles enable timeless -p

Installation manuelle

• Téléchargez et placez le(s) fichiers (s) dans un répertoire appelé Timeless dans votre dossier skins/.
• Ajoutez le code suivant à votre LocalSettings.php (en bas):

wfLoadSkin( 'Timeless' );

• Configurer comme nécessaire.
•  Fait - Naviguer vers Special:Version sur votre wiki pour vérifier l'installation correcte de l'habillage.

Fonctionnalités

Au contraire de l’habillage minimaliste Minerva , qui est celui par défaut pour les téléphones mobiles, Timeless incorpore la fonctionnalité d’un thème qui vise le bureau, tel que l’habillage Habillage:Vector par défaut pour le bureau, pour toutes les tailles d’écran.

De plus, Timelesss offre un raccourci pratique pour la liste des contributions de l’utilisateur dans la barre supérieure, près des boutons « Modifier » et « Voir l’historique ».

Le but général est de faire un habillage possédant l’ensemble des fonctionnalités à la fois sur le contenu et les outils de modification, avec plusieurs modes de lecture pour tout afficher, en se concentrant sur le contenu (comme Winter), avec la possibilité d’activer une vue sombre ou nocturne. Un jour il fera réellement tout cela.

Au contraire de MobileFrontend ou Minerva, Timeless ne redéfinit pas de force le style des tables pour les résolutions mobiles, mais plutôt attend et encourage les utilisateurs à créer des tables et modèles eux-mêmes réactifs, optimisés pour leur utilisation particulière.

Avec Skin:Timeless-DarkCSS , les utilisateurs peuvent manuellement activer un thème sombre pour réduire la fatigue occulaire et économiser l’énergie sur les affichages AMOLED. Les instructions sont disponibles sur cette page.

The future goal is to create a fully featured skin that:

1. emphasizes both content and editing tools,
2. with multiple view modes for showing everything, focusing only on content (winter), or
3. switching to dark/night viewing.

Responsive website design details

This section is based on the default configuration.

≥1340 pixels

Above a simulated screen width of 1340 pixels, the site is visible in three columns. Some site navigation sections are on the left side of the content area (e.g. "Navigation", "Outils") while some are on the right side ("Plus", "Imprimer / exporter", "Dans d’autres projets", "Dans d’autres langues", "Catégories") are on the right side.

Starting at a simulated browser viewport width of around 1900 pixels, the width of the center column with the content is fixed to 1261 pixels, while on the earlier skins Habillage:Vector and Habillage:MonoBook , it is able to extend indefinitely with screen width.

An indefinite content width can be achieved with this skin using this CSS code snippet.

With this CSS code, users can optionally display the navigation sections from the third (right-side) column in the first (left-side) column, like already done at 1339 to 1100 pixels of browser width.

1339 to 1100 pixels

The site is visible in two columns. The site navigation sections on the right side of the content area move to the left side below the existing sections.

Less than 1100 pixels

The site is visible on one column. The content area fills the entire screen space. Categories appear at to the bottom of the page, where they are on Habillage:Vector and Monobook .

The site navigation sections are collapsed into a top navigation bar with text labels, and currently shown and hidden using JavaScript, rather than pure CSS, as implemented in the Skin:MinervaNeue using :checked.

Less than 851 pixels

Below 851 pixels, the responsive design of Timeless adapts to mobile phone screens.

The text labels on the navigation elements above the content area (e.g. "Page", "Discussion", "Modifier", "Modifier le wikicode", "Voir l’historique") are not shown to save horizontal space; only the icons are shown instead of both.

The site navigation sections are collapsed into a top navigation bar with icon labels.

CSS snippets

These code snippets can be used to customize the skin's appearance, by pasting them into MediaWiki:Timeless.css as a MediaWiki administrator, into one's own user space CSS as a regular user, or into a user skin browser extension as a visitor.

Indefinite content width

Regarding criticism of limited content widths, using this CSS code snippet, the width of the center (content) column and the blue middle line of the colour bar above it extends indefinitely with screen width.

/* Indefinite content width */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

One-sided navigation menu

Using this code snippet, the elements of the right-side navigation menu (#mw-related-navigation) will continue to be displayed in the left column (under #mw-site-navigation) like they do on 1100 to 1330 pixels of browser width even beyond 1340 pixels of browser width, for users who prefer a one-sided navigation menu as known from the skins Habillage:Vector and Habillage:MonoBook .

The code also works in combination with the limitless content width code from above.

/* One-sided navigation menu */
@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;
  }
}

/* Align top colour bar with page columns */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Re-aligning bottom logos */
#footer { padding-right: 1em; }

Modernized fonts in top bar

The following CSS code adds a set of modern font types (including fallback fonts) to the currently unformatted fonts of the user name and top-bar navigation menus displayed between 852 and 1100 pixels of browser width.

/* Top bar font modernization */
#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  }

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

Highlight section title upon navigation

This CSS code snippet highlights the last section header upon navigation to facilitate returning to it when scrolling through a long document.

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

Corrections de Legacy

Users and remote interface administrators of older MediaWiki installations with an early and lesser mature version of this skin can retrofit these patches of code to counter shortcomings in appearance in the mean time:

/* Width optimization: Prevents too narrow appearance on mobile phones */
@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; }
}

/* Table of contents indentation patch (retrofits header level indentations if missing) */
#toc ul ul {
  margin: 0 0 0 2em;
}

Configuration

Ce qui suit n’est pris en charge qu’à partir de la version 1.34 de MediaWiki.

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

Initialisez-le de la même manière que $wgLogo en utilisant une image appropriée pour le fond. Nous vous recommandons d’utiliser une image SVG de 500 à 750px de largeur : le SVG permet la prise en charge de HiDPI ; la taille peut normalement être quelconque, et dans ce cas l’image viendra se placer derrière le contenu, comme pour le chat par défaut.

Pour que l’arrière-plan fonctionne également sans modification avec d’autres thèmes de couleur d’arrière-plan que l’on choisira ultérieurement, une image monochrome transparente est recommandée, avec une opacité de 20 à 50% du noir sur blanc, où les valeurs alpha du rapport noir sur blanc sont également autour de 10 à 50 sur 255, car cela devrait permettre le fonctionnement avec presque tout ce qui n’est pas du pur blanc sur noir.

Exemples (qui ne suivent pas actuellement la recommandation ci-dessus et qui ne fonctionneront donc probablement pas sur des fonds sombres) : Timeless backdrop (wiktionary).svg et Timeless backdrop (metawiki).svg

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

Rendu de logo spécial, permettant de créer des logos personnalisés pour Timeless en particulier (par exemple, une version de logo carré sans le mot de marque afin d’éviter la duplication avec l’entête). Fournit également une prise en charge de HiDPI légèrement meilleure que l’utilisation de $wgLogoHD, dans la mesure où cela ne fonctionne que pour les logos 135x135 pixels, et qui réduit tous les logos haute résolution à cette taille.

Peut être utilisé pour pointer Timeless sur un fichier téléversé du wiki (n’oubliez pas de protéger le fichier si vous l’utilisez) en fournissant simplement le nom du fichier, ou vous pouvez spécifier les détails du chemin du logo manuellement à l’aide d’un tableau.

Pour réutiliser un $wgLogo et un $wgLogoHD déjà définis en tant que logo nominal 160 × 160 pixels, mais où les versions HD sont aussi à la bonne taille :

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

Pour utiliser File:Cows.svg téléversé sur le wiki :

$wgTimelessLogo = 'Cows.svg';

• Notez que les logos téléversés fonctionnent mieux en tant que fichiers SVG ou en images matricielles dont la hauteur est doublée ou plus, ils seront réduits pour chaque résolution de la cible. Bien sûr cette manière nécessite que le téléversement des fichiers et la génération des vignettes soient activés.
• Les tailles nominales recommandées sont probablement aux environs de 135 à 165 pixels.

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

Pour utiliser une image à la place du texte par défaut en police Linux Libertine avec sérif pour le nom de marque de la bannière d’entête. Même utilisation que $wgTimelessLogo.

Ainsi, sur la Wikipédia anglophone on peut utiliser Wikipedia wordmark.svg de cette manière :

$wgTimelessWordmark = 'Wikipedia wordmark.svg';

Ou précisez un tableau de chaque version de résolution, plus les dimensions, comme ci-dessus (plus vraisemblablement avec elles, franchement).

• Si vous n’utilisez pas de fichier téléversé sur le wiki, vous devez spécifier les dimensions.
• La taille nominale recommandée est jusqu’à 200 pixels pour la largeur et 38 pixels pour la hauteur.

Note that Timeless supports wordmark and HiDPI logos set in Manuel:$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