Apariencia:Timeless

This skin comes with MediaWiki 1.31 and above. Thus you do not have to download it again. However, you still need to follow the other instructions provided.

Manual de máscaras de MediaWiki - categoría

Timeless Estado de lanzamiento: estable
Autor(es)	Isarra
Política de compatibilidad	Lanzamientos de screenshots junto con MediaWiki. Master no es compatible con versiones anteriores.
MediaWiki	1.31+
Licencia	GNU Licencia Pública general 2.0 o más tarde
Descarga	Download skin Git [?]: Download Git master browse repository (Phabricator · GitHub) commit history repository contributors (GitHub) code review
Ejemplo	mediawiki.org This article
Parámetros $wgTimelessBackdropImage
Quarterly downloads	144 (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
Asuntos :	Tareas abiertas · Reportar un bug

La pagina principal de Wikipedia(en Inglés) con la skin "Timeless" vista en un teléfono celular.

Timeless soporta responsive web design y esta optimizado para una multitud de anchos de pantalla, desde las angostas pantallas de un teléfono celular hasta grandes monitores.

La máscara se basa en Winter y un intento de incorporar sugerencias sobre este debate sobre la bomba de Village 2015 en una máscara.

Instalación

• If using Vagrant , install with vagrant roles enable timeless -p

Instalación manual

• Descarga y extrae los archivos en el directorio «Timeless» dentro del directorio skins/ existente.
• Añade el siguiente código al final de tu archivo LocalSettings.php :

  wfLoadSkin( 'Timeless' );
  

• Configurar como sea necesario.
•  Hecho - Navega a Special:Version en tu wiki para verificar que la apariencia se ha instalado correctamente.

Características

A diferencia del skin minimalista Minerva , que es el skin default para teléfonos celulares, "Timeless" incorpora la funcionalidad de una skin diseñada para computadora, como el skin Apariencia:Vector , a todas las medidas de pantalla.

Además, Timeless ofrece un atajo conveniente a la lista de contribución del usuario en la barra superior, junto a los botones “Editar” y “Ver historial”.

El objetivo general es crear una piel con todas las funciones que haga hincapié tanto en el contenido como en las herramientas de edición, con múltiples modos de visualización para mostrarlo todo, centrándose sólo en el contenido (invierno), o cambiando a la visualización nocturna/oscura. Algún día lo hará.

A diferencia de MobileFrontend/Minerva, Timeless no modifica las tablas a resoluciones de teléfono celular, en su lugar espera y anima a los usuarios a hacer las tablas y plantillas ellos mismos, optimizadas para su uso particular.

With Skin:Timeless-DarkCSS , users are able to manually enable a dark background for reducing eye strain and power saving on AMOLED displays. Las instrucciones están disponibles en esa pagina.

El objetivo es crear un skin completamente caracterizado que:

1. Enfatiza el contenido y las herramientas de edición,
2. with multiple view modes for showing everything, focusing only on content (winter), or
3. switching to dark/night viewing.

Detalles del diseño de sitio web adaptativo

Esta sección esta basada en la configuración default.

≥1340 píxeles

Por encima de un ancho de pantalla de 1340 píxeles, el sitio es visible en tres columnas. Algunas secciones de navegación están al lado izquierdo del area de contenido (por ejemplo "Navegación, Herramientas") mientras que otras están al lado derecho ("Más, Imprimir/exportar, En otros proyectos, En otros idiomas, Categorías").

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 Vector and 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.

Con este CSS código, los usuarios pueden mostrar las secciones de navegación de la tercera columna (de lado derecho) en la primera columna (de lado izquierdo), como visto en 1339 a 1100 píxeles de ancho de navegador.

1339 a 1100 píxeles

El sitio es visible en 2 columnas. Las secciones de navegación del sitio en el lado derecho del area de contenido se mueven a la izquierda, debajo de las secciones ya existentes.

Menos de 1100 píxeles

El sitio es visible en una columna. El área de contenido llena todo el espacio de la pantalla. Las categorías aparecen ne la parte inferior de la pagina, donde están en Vector y 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.

Menos de 851 píxeles

Debajo de 851 pixeles, el diseño adaptativo de "Timeless" se adapta a la pantalla de teléfonos celulares.

The text labels on the navigation elements above the content area (e.g. "Página", "Discusión", "Editar", "Editar código", "Ver historial") 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 Vector and 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 sans serif font types (including fallback fonts) to the currently serif fonts (Linux Libertine, Times New Roman, etc.) 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;
}

Legacy patches

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;
}

Configuración

The following are only supported in MediaWiki 1.34+

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

Set it as you would $wgLogo to an appropriate background image. Recommendation is an svg set to 500-750px wide: svg for HiDPI support; the size can really be whatever, but where that will result in a similar behind-content look as with the default cat.

For a background to potentially also work unmodified with other background-colour themes if and when they are later implemented, a transparent single-colour image is recommended, with 20-50% opacity black/white, where the alpha values of the b/w parts are likewise around 10-50/255, as this should allow it to work on most anything that isn't pure white/black.

Examples (which actually don't follow the above recommendation and thus probably won't work on dark backgrounds): Timeless backdrop (wiktionary).svg and 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 Manual:$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