Habillage:Timeless

Cet habillage est fourni avec MediaWiki 1.31 et supérieur. The remaining configuration instructions must still be followed.

Manuel des habillages MediaWiki - catégorie

Timeless État de la version : stable
Auteur(s)	Isarra
Politique de compatibilité	Versions ponctuelles alignées avec MediaWiki. Le master n'est pas compatible arrière.
MediaWiki	1.31+
Licence	Licence publique générale GNU v2.0 ou supérieur
Téléchargement	Télécharger l'habillage Git [?]: télécharger la branche master de Git parcourir le dépôt (Phabricator · GitHub) historique des validations contributeurs au dépôt (GitHub) revue de code
Exemple	mediawiki.org This article
Paramètres $wgTimelessBackdropImage
Téléchargements trimestriels	28 (Ranked 4th)
Utilisé par les wikis publics	2,938 (Ranked 13th)
Habillage par défaut des wikis publics	165
Traduisez l'habillage Timeless sur translatewiki.net
Rôle Vagrant	timeless
Problèmes :	Tâches ouvertes · Signaler un bogue

Page d’accueil de Wikipédia en anglais avec l’habillage Timeless vue 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 tentant 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) fichier(s) dans un répertoire appelé Timeless dans votre dossier skins/.
• Ajoutez le code suivant à la fin de votre fichier LocalSettings.php  :

  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 des 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 oculaire et économiser l’énergie sur les affichages AMOLED. Les instructions sont disponibles sur cette page.

Le but suivant est de créer un habillage complètement fonctionnel avec :

1. un accent mis à la fois sur le contenu et les outils d'édition,
2. plusieurs modes de visualisation pour tout montrer, en se concentrant uniquement sur le contenu (Winter), ou
3. le passage à l'affichage sombre (ou nuit).

Détails de conception des sites web réactifs

Cette section est basée sur la configuration par défaut.

≥1340 pixels

Au-dessus d'une largeur d'écran simulée de 1340 pixels, le site est visible sur trois colonnes. Certaines sections de navigation se trouvent sur le côté gauche de la zone de contenu (comme "Navigation", "Outils") alors que les autres se trouvent sur le côté droit ("Plus", "Imprimer / exporter", "Dans d’autres projets", "Dans d’autres langues", "Catégories").

En commençant par une vue simulée du navigateur d'une largeur d'environ 1900 pixels, la largeur de la colonne centrale avec son contenu est fixée à 1261 pixels, alors qu'avec les habillages précédents Vector et MonoBook , elle pouvait s'étendre indéfiniment en fonction de la largeur de l'écran.

Une largeur non définie du contenu peut être déterminée avec cet habillage en utilisant cet extrait de code CSS.

Avec ce code CSS, vous pouvez facultativement afficher les sections de navigation de la troisième colonne (côté droit) dans la première colonne (côté gauche) comme c'est déjà le cas sur les navigateurs de largeur 1339 à 1100 pixels.

1339 à 1100 pixels

Le site est visible sur deux colonnes. Les sections de navigation du site sur le côté droit de la zone de contenu sont déplacées du côté gauche en dessous des sections existantes.

Inférieurs à 1100 pixels

Le site est visible sur une colonne. La zone de contenu occupe tout l'espace de l'écran. Les catégories apparaissent en bas de la page, où elles sont sur Vector et Monobook .

Les sections de navigation du site sont repliées dans une barre de navigation supérieure avec des libellés textuels, et affichés actuellement et masqués en utilisant JavaScript, plutôt que du CSS pur, comme implémenté dans Skin:MinervaNeue en utilisant :checked.

Inférieurs à 851 pixels

En dessous de 851 pixels, la conception réactive de Timeless s'adapte aux écrans des téléphones mobiles.

Les libellés textuels sur les éléments de navigation au-dessus de la zone de contenu (tel "Page", "Discussion", "Modifier", "Modifier le wikicode", "Voir l’historique") ne sont pas affichés pour gagner de la place horizontalement; seules les icônes sont présentes au lieu des deux.

Les sections de navigation du site sont résumées dans une barre de navigation supérieure avec des étiquettes d'icônes.

Extraits CSS

Ces portions de code peuvent être utilisées pour personnaliser l'apparence de l'habillage en les ajoutant dans MediaWiki:Timeless.css si vous êtes un administrateur MediaWiki, dans l'un des CSS de votre espace utilisateur personnel si vous êtes un utilisateur standard, ou dans une extension d'habillage du navigateur si vous êtes un visiteur.

Contenu de largeur non définie

En ce qui concerne les critiques sur la limite des largeurs pour le contenu, en utilisant cette portion de code CSS, la largeur de la colonne centrale (contenu) et la ligne centrale bleue de la barre de couleur au-dessus s'agrandissent indéfiniment avec la largeur de l'écran.

/* Largeur du contenu non définie */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

Menu de navigation à un côté

En utilisant cet extrait de code, les éléments de droite du menu de navigation (#mw-related-navigation) continueront d'être affichés dans le colonne de gauche (sous #mw-site-navigation) comme c'est le cas avec les navigateurs dont la largeur va de 1100 à 1330 pixels et même au delà de 1340 pixels, pour les utilisateurs qui préfèrent avoir le menu de navigation d'un seul côté comme vu avec les habillages Vector et MonoBook .

Le code fonctionne également en combinaison avec le code de la largeur infinie ci-dessus.

/* Menu de navigation unilatéral */
@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;
  }
}

/* Aligner la barre de couleurs supérieure avec les colonnes de la  page */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Réalignement des logos inférieurs */
#footer { padding-right: 1em; }

Fontes modernisées dans la barre supérieure

Le code CSS suivant ajoute un ensemble de types de polices modernes sans sérif (avec les fontes de repli) aux fontes avec sérif actuelles (Linux Libertine, Times New Roman, etc.) pour le nom d'utilisateur et le menu de la barre de navigation supérieure des navigateurs affichant entre 852 et 1100 pixels de largeur.

/* Modernisation de la police de la barre supérieure */
#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;
}

/* éviter de couper les lettres qui possèdent une queue g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

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

Surbrillance du titre de section lors du survol avec la souris

Cet extrait de code CSS met en valeur l'entête de la dernière section durant la navigation pour permettre d'y revenir si le document que vous parcourez est long.

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

Anciennes corrections

Le utilisateurs et les administrateurs d'interface à distance des anciennes installation MediaWiki avec une version plus précoce et moins mature de cet habillage peuvent rétrofiter ces patches de code pour contrer les défauts d'apparence entre-temps :

/* Optimisation de la largeur : empêche l'affichage trop serré sur les téléphones mobiles. */
@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; }
}

/* Correctif de l'indentation de la table des matières (corrige les indentations de niveau de l'entête si elle est absente) */
#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 avec la catégorie 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 blanc pur 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 nom de la 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.

Noter que Timeless prend en charge le nom de la marque et les logos HiDPI définis dans Manuel:$wgLogos , donc cette utilisation est recommandée sauf si vous avez vos propres raisons. En particulier, le rendu du titre du site peut ou non nécessiter une image et le nom de la marque pour s'afficher correctement, car les styles du titre du texte ne sont essentiellement que des suppositions qui ne fonctionneront pas toujours. Autres options permettant au nom de la marque d'apparaître correctement :

• Définition de quelques CSS personnalisés dans le Timeless.css du wiki, comme le non-repli ou une valeur différente pour la taille de la police
• Définir une chaîne d'affichage différente en modifiant le contenu du message timeless-sitetitle