Skin:Timeless/nl

Deze skin wordt meegeleverd met MediaWiki 1.31 en nieuwer. Het is dus niet nodig om deze opnieuw te downloaden. De andere instructies hier beneden moeten nog wel gevolgd worden.

Handleiding MediaWiki skins - categorie

Timeless Release status: stabiel
Auteur(s)	Isarra
Compatibiliteit beleid	Snapshots releases samen met MediaWiki. Master is niet achterwaarts compatibel.
MediaWiki	1.31+
Licentie	GNU General Public Licentie 2.0 of hoger
Download	Download skin Git [?]: Download Git master blader door de repository (Phabricator · GitHub) commit geschiedenis repository beheerders (GitHub) code review
Voorbeeld	mediawiki.org This article
Parameters $wgTimelessBackdropImage
Downloads kwartaal	138 (Ranked 3rd)
Publieke wiki's die het gebruiken	2,938 (Ranked 13th)
Publieke wiki's die het standaard skin gebruiken	165
Vertaal de Timeless skin indien beschikbaar op translatewiki.net
Vagrant rol	timeless
Problemen :	Open taken · Rapporteer een bug

Engelstalige Wikipedia homepage in deze skin bekeken op een mobiele telefoon

Timeless ondersteunt het responsieve webontwerp en is geoptimaliseerd voor een groot aantal schermbreedtes, variërend van smalle schermen voor mobiele telefoons tot brede monitoren.

De skin is gebaseerd op Winter en een poging om suggesties in deze discussie uit 2015 in een skin te verwerken.

Installatie

• Wanneer Vagrant gebruikt wordt, installeer door middel van vagrant roles enable timeless -p

Handmatige installatie

• Download en plaats de bestanden in de map Timeless in de map skins/.
• Voeg de volgende code onderaan aan je bestand LocalSettings.php toe:

  wfLoadSkin( 'Timeless' );
  

• Configureer naar vereiste.
•  Klaar - Navigeer naar Special:Version op de wiki om te controleren dat de vormgeving succesvol is geïnstalleerd.

Functies

In tegenstelling tot de minimalistische skin Minerva , de standaardskin voor mobiele telefoons, bevat Timeless de functionaliteit van een desktopgericht thema zoals Skin:Vector/nl , de standaard desktop-skin, op alle schermformaten.

Bovendien biedt Timeless een duidelijke handige snelkoppeling naar de lijst met gebruikersbijdragen in de bovenste balk, naast de knoppen "Bewerken" en "Geschiedenis weergeven".

Het algemene doel is om een volledig functionele skin te maken die zowel inhoud als bewerkingsmiddelen benadrukt, met meerdere weergavemodus om alles te tonen, met de focus alleen op inhoud (winter) of overstappen naar donker/nacht-weergave. Dit is het einddoel.

In tegenstelling tot MobileFrontend/Minerva, zet Timeless geen tabelstijl op voor mobiele resoluties, maar verwacht en moedigt gebruikers er in plaats daarvan aan om zelf responsieve tabellen en sjablonen te maken, geoptimaliseerd voor hun specifieke gebruik.

Met Skin:Timeless-DarkCSS kunnen gebruikers handmatig een donkere achtergrond inschakelen om vermoeide ogen te verminderen en energie te besparen op AMOLED-schermen. Op die pagina staan de instructies.

Het toekomstige doel is om een volledig functionele skin te creëren die:

1. benadrukt zowel de inhoud als de bewerkingshulpmiddelen,
2. met meerdere weergavemodi voor het weergeven van alles, waarbij alleen de inhoud (winter) wordt gefocust, of
3. overschakelen naar weergave donker/nacht.

Details responsieve website ontwerp

Dit gedeelte is gebaseerd op de standaardconfiguratie.

Minstens 1340 pixels

Boven een gesimuleerde schermbreedte van 1340 pixels is de site zichtbaar in drie kolommen. Enkele navigatie-delen van de site staan aan de linkerkant van de inhoud (bijv. "Navigatie" en "Hulpmiddelen") en enkele staan aan de rechterkant ("Meer", "Afdrukken/exporteren", "In andere projecten", "In andere talen" en "Categorieën").

Vanaf een gesimuleerde breedte van de browserviewport van ongeveer 1900 pixels is de breedte van de middelste kolom met de inhoud vastgesteld op 1261 pixels, terwijl op de eerdere skins Vector/nl en Monobook/nl , het onbepaald kan worden uitgebreid met schermbreedte.

Een onbeperkte inhoudsbreedte kan met deze skin worden bereikt met behulp van dit stukje code.

Met deze CSS-code kunnen gebruikers optioneel de navigatie-delen uit de derde (rechter) kolom in de eerste (linkse) kolom weergeven, zoals al is gedaan bij 1339 tot 1100 pixels browserbreedte.

1339 tot 1100 pixels

De site is dan in twee kolommen. De navigatie-delen de rechterzijde van het inhoudsgebied verplaatsen zich naar de linkerkant onder de bestaande delen.

Minder dan 1100 pixels

De site is dan in één kolom. Het inhoudsgebied vult de hele schermruimte. De categorieën verschijnen onderaan de pagina, waar ze op Vector/nl en Monobook staan.

De navigatie-delen zijn samengevouwen in een bovenste navigatiebalk met tekstlabels en worden nu weergegeven en verborgen met behulp van JavaScript, in plaats van puur CSS, zoals geïmplementeerd in Skin:MinervaNeue met :checked.

Minder dan 851 pixels

Onder de 851 pixels past het responsieve ontwerp van Timeless zich aan als voor de schermen van mobiele telefoons.

De tekstlabels op de navigatie-elementen boven het inhoudsgebied (bijv. "Pagina", "Overleg", "Bewerken", "Brontekst bewerken" en "Geschiedenis weergeven") worden niet weergegeven om horizontale ruimte te besparen; Alleen de pictogrammen worden weergegeven in plaats van beide.

De navigatie-delen de site worden in een bovenste navigatiebalk met pictogramlabels ingevouwen.

Stukjes CSS-code

Deze stukjes code kunnen worden gebruikt om het uiterlijk van de skin aan te passen, door ze te plakken in MediaWiki:Timeless.css als een MediaWiki-beheerder, in uw eigen gebruikersruimte CSS als een gewone gebruiker, of in een gebruikersskin browser extensie als een bezoeker.

Onbepaalde inhoudsbreedte

Met betrekking tot kritiek op beperkte inhoudsbreedtes, met behulp van dit CSS codefragment, de breedte van de middelste inhoudskolom en de blauwe middelste lijn van de kleurenbalk erboven strekt zich voor onbepaalde afstand uit tot de breedte van het scherm.

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

Eenzijdig navigatiemenu

Met behulp van dit stukje code worden de elementen van het navigatiemenu aan de rechterkant (#mw-related-navigation) nog steeds weergegeven in de linkerkolom (minder dan #mw-site-navigation) zoals ze dat doen op 1100 tot 1330 pixels browserbreedte zelfs meer dan 1340 pixels van browserbreedte, voor gebruikers die de voorkeur geven aan een eenzijdig navigatiemenu zoals bekend van de skins Vector/nl en Monobook/nl .

De code werkt ook in combinatie met de onbeperkte inhoud breedte code van bovenaf.

/* Eenzijdig navigatiemenu */
@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;
  }
}

/* De bovenste kleurenbalk uitlijnen met paginakolommen */
.ts-inner {
  padding: 0 0 0 1em;
}

/* De onderkant van de logo's opnieuw uitlijnen */
#footer { padding-right: 1em; }

Gemoderniseerde lettertypen in de bovenste balk

De volgende CSS-code voegt een set moderne sans serif lettertypen (inclusief fallback-lettertypen) toe aan de momenteel serif-lettertypen (Linux Libertine, Times New Roman, enz.) van de gebruikersnaam en navigatiemenu's in de bovenste balk weergegeven tussen 852 en 1100 pixels browserbreedte.

/* Modernisering van het lettertype in de bovenste balk */
#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;
}

/* Vermijd het afsnijden van letters met 'descenders': g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

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

Titel van de sectie markeren bij navigatie

Dit CSS-codefragment markeert de kop van de laatste sectie op navigatie om het gemakkelijker te maken om ernaar terug te keren bij het scrollen door een lang document.

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

Verouderde patches

Gebruikers en remote-interface-beheerders van oudere MediaWiki-installaties met een vroege en minder volwassen versie van deze skin kunnen deze patches aanpassen om in de tussentijd tekortkomingen in het uiterlijk tegen te gaan:

/* Breedte optimaliseren: voorkomt dat het op mobiele telefoons te smal is */
@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; }
}

/* Inhoudsopgave patch voor inspringen (past inspringingen op kopniveau aan als deze ontbreken) */
#toc ul ul {
  margin: 0 0 0 2em;
}

Configuratie

De volgende worden alleen ondersteund in MediaWiki 1.34+

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

Stel het in als u $wgLogo zou instellen op een passend achtergrondafbeelding. Aanbeveling is een svg ingesteld op 500-750px breed: svg voor HiDPI-ondersteuning; de grootte kan echt wat dan ook zijn, maar waar dat resulteert in een vergelijkbare achterinhoud uitstraling als bij de standaard kat.

Om een achtergrond mogelijk ook onveranderd te kunnen werken met andere achtergrondkleurthema's als en wanneer deze later worden geïmplementeerd, wordt een transparante eenkleurige afbeelding aanbevolen, met 20-50% opaciteit zwart/wit, waarbij de alfawaarden van de b/w-delen eveneens ongeveer 10-50/255 zijn, omdat dit het zou moeten toestaan om te werken op de meeste dingen die niet puur wit/zwart zijn.

Voorbeelden (die de bovenstaande aanbeveling niet volgen en dus waarschijnlijk niet werken op donkere achtergronden): Timeless backdrop (wiktionary).svg en Timeless backdrop (metawiki).svg

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

Speciale logoweergave, waardoor specifieke aangepaste logo's voor Timeless mogelijk zijn (zoals een vierkant logozonder het woordenmerk om duplicatie met de header te voorkomen). Het biedt ook iets betere HiDPI-ondersteuning dan het gebruik van $wgLogoHD, omdat dat alleen werkt voor 135x135px-logo's, en alle high-res-logo's schaalt tot deze grootte.

Kan worden gebruikt om Timeless te laten verwijzen naar een op wiki geüpload bestand (onthoud het bestand te beschermen als u dit gebruikt) door gewoon de bestandsnaam te geven, of u kunt de logo-paddetails handmatig met behulp van een array aanwijzen.

Om een $wgLogo en $wgLogoHD te hergebruiken die al zijn ingesteld voor een logo van 160x160px, maar waar de HD-versie ook de juiste grootte heeft:

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

Om File:Cows.svg te gebruiken die naar de wiki is geüpload:

$wgTimelessLogo = 'Cows.svg';

• Merk op dat geüploade logo's het beste werken als svgs of als 2x- of hogere rasters en omlaag worden geschaald voor elke doelresolutie. Deze aanpak vereist natuurlijk dat bestandsuploads en het maken van miniaturen zijn ingeschakeld.
• Aanbevolen nominale groottes waarschijnlijk rond 135px tot 165px.

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

Om een afbeelding in plaats van de standaard Linux Libertine serif-tekst te gebruiken voor het headersbanner-woordenmerk. Dezelfde gebruiksaanpak als $wgTimelessLogo.

De Engelse Wikipedia kan Wikipedia wordmark.svg zo gebruiken:

$wgTimelessWordmark = 'Wikipedia wordmark.svg';

Of een array specificeren voor elke resolutie versie, plus de afmetingen, per bovenstaande (meer waarschijnlijk met hen).

• Als u geen geüpload file op wiki gebruikt, moet u de afmetingen vermelden.
• Aanbevolen nominale grootte tot 200px breed en 38px hoog.

Houd er rekening mee dat Timeless woordenmerk- en HiDPI-logo's ondersteunt die zijn ingesteld op Manual:$wgLogos , dus het wordt aanbevolen om dat te gebruiken als u geen specifieke reden heeft om dat niet te doen. Vooral de rendering van de site-titel kan of niet vereisen dat een woordenmerk-afbeelding correct moet worden weergegeven, omdat de stijlen voor de teksttitel in principe slechts gokken zijn die niet altijd werken. Andere opties om het woordenmerk correct te laten weergeven zijn:

• Het instellen van een aantal aangepaste css in de Timeless.css van de wiki, zoals no-wrap of een andere waarde voor de lettergrootte
• Een andere weergave tekst instellen door de inhoud van het bericht timeless-sitetitle te veranderen