Skin:Timeless

MediaWiki-Skins-Handbuch - Kategorie

Timeless Freigabestatus: stabil
Autor(en)	Isarra
Compatibility policy	Snapshots releases along with MediaWiki. Master is not backwards compatible.
MediaWiki	1.31+
Lizenz	GNU General Public License 2.0 oder neuer
Herunterladen	Skin herunterladen Git [?]: Git master herunterladen Repository durchsuchen (Phabricator · GitHub) Änderungsgeschichte Repository-Mitwirkende (GitHub) Code-Review
Beispiel	mediawiki.org This article
Parameter $wgTimelessBackdropImage
Quarterly downloads	0
Public wikis using	2,938 (Ranked 13th)
Public wikis using as default skin	165
Übersetze den Timeless skin wenn es auf translatewiki.net verfügbar ist
Vagrant-Rolle	timeless
Probleme :	Offene Aufgaben · Einen Fehler melden

Hauptseite der englischsprachigen Wikipedia mit der Benutzeroberfläche Timeless, auf einem Smartphone betrachtet

Timeless unterstützt das Responsive Webdesign und ist für eine Vielzahl von Bildschirmbreiten optimiert, von schmalen Mobil- bis hin zu Breitbildschirmen.

Diese Benutzeroberfläche ist von Winter inspiriert sowie ein Versuch, alle Vorschläge dieser Diskussion aus 2015 in eine Benutzeroberfläche zu integrieren.

Installation

Diese Oberfläche ist üblicherweise in MediaWiki 1.31 und darüber enthalten. The remaining configuration instructions must still be followed.

• Wenn du Vagrant verwendest, installiere mit vagrant roles enable timeless -p

Manuelle Installation

• Die Dateien herunterladen und in einem Unterverzeichnis namens Timeless zum Verzeichnis skins/ ablegen.
• Ergänze folgenden Code am Ende deiner LocalSettings.php -Datei:

  wfLoadSkin( 'Timeless' );
  

• Konfiguriere nach Bedarf.
• Erledigt - Navigiere zu Special:Version in deinem Wiki, um zu überprüfen, ob der Skin erfolgreich installiert ist.

Funktionen

Anders als die minimalistische Benutzeroberfläche Minerva , der Standard-Skin auf Mobiltelefonen, bringt "Timeless" die Funktionalitäten einer Oberfläche für den Desktop - wie z.B. Skin:Vector ., der Standard-Skin für Desktops - auf alle Bildschirmgrößen.

Darüber hinaus bietet Timeless in der oberen Leiste neben den Schaltflächen "Bearbeiten" und "Versionsgeschichte" eine praktische Verknüpfung mit der Liste der Benutzerbeiträge.

Das allgemeine Ziel besteht darin, einen vollfunktionalen Skin zur Verfügung zu stellen, der sowohl inhaltsbezogene als auch bearbeitungsbezogene Funktionalität betont und dabei mehrere Ansichten zur Verfügung stellt, um entweder alles zu zeigen oder sich nur auf den Inhalt zu konzentrieren. Darüber hinaus soll ein dunkles Theme zur Verfügung stehen. Eines Tages wird Timeless das alles tatsächlich tun.

Im Gegensatz zu MobileFrontend/Minerva passt Timeless Tabellen nicht zwangsweise an mobile Endgeräte an, sondern erwartet und ermutigt die Benutzer, Tabellen und Vorlagen selbst responsiv zu gestalten und für ihre jeweilige Verwendung zu optimieren.

Durch Skin:Timeless-DarkCSS sind Benutzer dazu in der Lage, selbstständig einen Dark Mode zur Reduzierung der Augenbelastung und zur Energieeinsparung bei AMOLED-Displays zu aktivieren. Anleitungen sind auf der verlinkten Seite verfügbar.

Das künftige Ziel ist, einen vollfunktionalen Skin zu erschaffen, der:

1. sowohl Inhalt als auch Bearbeitungswerkzeuge betont,
2. durch mehrere Ansichtsmodi alles anzeigt und sich dadurch nur auf den Inhalt konzentriert (Winter) oder
3. auf einen Dunkel-/Nachtmodus umschalten kann.

Einzelheiten zum responsiven Website-Design

Dieser Abschnitt bezieht sich auf die Standardkonfiguration.

≥1340 Pixel

Bei einer simulierten Bildschirmbreite von mehr als 1340 Pixeln wird die Website in drei Spalten angezeigt. Einige Bereiche der Website-Navigation befinden sich auf der linken Seite des Inhaltsbereichs (z. B. "Navigation", "Werkzeuge"), während andere auf der rechten Seite zu finden sind ("Mehr", "Drucken/­exportieren", "In anderen Projekten", "In anderen Sprachen", "Kategorien").

Ab einer simulierten Browser-Ansichtsfensterbreite von etwa 1900 Pixeln ist die Breite der mittleren Spalte mit dem Inhalt auf 1261 Pixel festgelegt, während sie bei den früheren Skins Vector und MonoBook unbegrenzt mit der Bildschirmbreite mitwachsen kann.

Mit diesem Skin kann eine unbegrenzte Inhaltsbreite mit diesem CSS-Code-Schnipsel erreicht werden.

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.

Zwischen 1100 und 1339 Pixel

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.

Weniger als 1100 Pixel

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

Weniger als 851 Pixel

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. Seite, Diskussion, Bearbeiten, Quelltext bearbeiten, Versionsgeschichte) 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-Ausschnitte

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

Einseitiges Navigationsmenü

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

Konfiguration

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 Handbuch:$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