Skin:Lakeus/nl

This page is a translated version of the page Skin:Lakeus and the translation is 100% complete.
Handleiding MediaWiki skins - categorie
Lakeus
Release status: stabiel
Auteur(s)
Laatste versie 1.4.0 (2025-02-13)
Compatibiliteit beleid Snapshots releases samen met MediaWiki. Master is niet achterwaarts compatibel.
MediaWiki 1.36+
Licentie GNU General Public Licentie 3.0 of hoger
Download
Voorbeeld
Parameters
  • $wgLakeusShowRepositoryLink
  • $wgLakeusSiteNoticeHasBorder
  • $wgLakeusShouldAnimatePortlets
  • $wgLakeusShowStickyTOC
  • $LakeusCustomIndicators
Publieke wiki's die het gebruiken 3 (Ranked 212nd)
Publieke wiki's die het standaard skin gebruiken 0
Vertaal de Lakeus skin indien beschikbaar op translatewiki.net

Lakeus is een skin die een eenvoudige maar volledig functionele ervaring biedt. Het is vernoemd naar een personage in het roman van een van de auteurs, Lakejason0.

Installatie

  • Download en plaats de bestanden in een map met de naam Lakeus in de map skins/.
  • Voeg de volgende code toe onderaan aan uw bestand LocalSettings.php  :
    wfLoadSkin( 'Lakeus' );
    
  •   Klaar - Navigeer naar Special:Version op de wiki om te controleren dat de vormgeving succesvol is geïnstalleerd.

Functies

  • Eenvoudig maar volledig functioneel (de meeste functies zouden in ieder geval moeten werken).
  • Werkt wanneer JavaScript uitgeschakeld is.
  • Aanpassing via CSS-variabelen.
  • Responsive design. Het zou moeten werken met desktop en tablet.
  • Sticky inhoudsopgave. Kan instabiel zijn.
  • Een thema ontwerper. Door het in uw voorkeuren in te schakelen, kunt u het thema realtime wijzigen en bekijken. Meestal zijn slechts een paar aanpassingen op basisvariabelen nodig en het zal automatisch een thema voor u produceren.
    • Het is misschien een beetje buggy en instabiel, dus als u iets tegenkomt, geef het dan door aan mij. U kunt altijd de automatische bepaling uitschakelen als u niet tevreden bent.

Opmerkingen

  • De skin moet bruikbaar zijn, zelfs als JavaScript niet ingeschakeld is. Er zijn echter verschillende handige functies die dan mogelijk niet beschikbaar zijn.
  • De skin maakte een speciaal menu voor een site die een taal met LanguageConverter varianten gebruikt (bijvoorbeeld Chinees (zh) en Servisch). Wanneer er geen varianten beschikbaar zijn, moet het menu onzichtbaar zijn.
  • RTL-ondersteuning is niet goed getest, maar de belangrijkste functies zijn bevestigd RTL-compatibel (bijv. menu's in de zijbalk).

Aanpassen

CSS-variabelen

Het kan zijn dat uw CSS niet werkt op verschillende speciale pagina's (zoals Voorkeuren); het is een beoogd gedrag van MediaWiki kern vanwege beveiligingsproblemen, maar sitebeheerders kunnen $wgAllowSiteCSSOnRestrictedPages op true instellen om het te omzeilen nadat ze de risico's hebben begrepen.

Lakeus ondersteunt het doen van aanpassingen via CSS-variabelen. Hieronder staan verschillende methoden om een thema te genereren, en om het resultaat toe te passen (dat moet CSS-code zijn), u moet het kopiëren naar Lakeus.css, die voor alle wiki-gebruikers in MediaWiki:Lakeus.css en voor uzelf in Special:MyPage/Lakeus.css.

Thema ontwerp

Ik hoop dat het voor iedereen gemakkelijker is om de 'theme designer' te gebruiken. U hoeft alleen de basisvariabelen te veranderen en de rest wordt automatisch bepaald. U kunt de automatische bepaling van elke variabele uitschakelen en handmatig aanpassen als u dat wilt doen.

Ga naar de Voorkeuren, selecteer "Uiterlijk", en u kunt de optie vinden wanneer de skin Lakeus is geselecteerd. Eenmaal ingeschakeld, wordt het op elke pagina geladen.

In principe doen alle knoppen en invoervelden wat het letterlijk betekent; Probeer ze gewoon uit als u een beetje in de war bent. Er zijn enkele variabelen die niet op elke pagina voorkomen, en ze zouden hieronder moeten zijn vermeld:

  • Interface berichtenbox. Deze elementen verschijnen in situaties zoals een gebruikersgroepinstelling met succes worden toegepast wanneer JavaScript is uitgeschakeld, een bericht van vertaling van paginabewerking, MediaWiki-uitzonderingen die op paginabewerking verschijnen, gebruikerspagina-berichten zonder Echo of andere extenties voor kennisgeving zijn geïnstalleerd, enzovoort.

Vooraf ingestelde thema's

Er zal een vooraf ingesteld thema zijn dat u hier al kunt gebruiken. U kunt ook uw eigen thema delen op de overlegpagina. Kom later terug als er geen is.

Vintage

Een vintage thema, voor het laatst geëxporteerd op 1.1.7.

Uitgevouwen inhoud
:root {
    --color-primary: #8e860a;
    --color-secondary: #eeebe7;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: rgba(238,235,231,0);
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secoundary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #eeebe7;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: unset;
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #eeebe7;
    --border-color-search-suggestions: #8c8985;
    --background-color-search-suggestions-current: #8e860a;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #eeebe7;
    --border-color-search-bar: #8c8985;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #8e860a;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,0,0,0.1);
    --text-color-toggle-list-item-hover: #000000;
    --background-color-toggle-list-item-focus: rgba(0,0,0,0.2);
    --text-color-toggle-list-item-focus: #000000;
    --border-color-toggle-list: #9b9b9b;
    --subheader-color-toggle-list: #6a6a6a;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #eeebe7;
    --text-color-content: #24220a;
    --background-color-body: #eeebe7;
    --text-color-body: #000000;
    --border-color-content: #bcb9b5;
    --color-accent-header-tab: #8e860a;
    --color-accent-header-tab-selected: #8e860a;
    --color-accent-header-tab-new: #8e860a;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.5);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #e4e1dd;
    --border-color-toc: #b2afab;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #e9e6e2;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #9e9c98;
    --background-color-wikitable-table-head: #dfdcd8;
    --background-color-portlet-body: #ffffff;
    --background-color-portlet-item-hover: rgba(0,0,0,0.1);
    --background-color-portlet-item-focus: rgba(44,44,44,0.1);
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dad7d3;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
}
Ocean

Een thema met lichtblauw kleur, laatste keer geëxporteerd op 1.1.15.

Uitgevouwen inhoud
:root {
    --color-primary: #3366cc;
    --color-secondary: #f4fcff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #e2f4fe;
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secondary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f4fcff;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: var(--elevation);
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #f4fcff;
    --border-color-search-suggestions: #91989b;
    --background-color-search-suggestions-current: #3366cc;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #f4fcff;
    --border-color-search-bar: #91989b;
    --background-color-toggle-list: #f4fcff;
    --background-color-toggle-list-card: #3366cc;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(51,102,204,0.1);
    --text-color-toggle-list-item-hover: #3366cc;
    --background-color-toggle-list-item-focus: rgba(35,93,194,0.2);
    --text-color-toggle-list-item-focus: #3366cc;
    --border-color-toggle-list: #91989b;
    --subheader-color-toggle-list: #0955b8;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #f4fcff;
    --text-color-content: #000000;
    --background-color-body: #f4fcff;
    --text-color-body: #000000;
    --border-color-content: #c1c9cc;
    --font-family-action-bar: var(--font-family);
    --color-accent-header-tab: #3366cc;
    --color-accent-header-tab-selected: #3366cc;
    --color-accent-header-tab-new: #3366cc;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.7);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #eaf2f5;
    --border-color-toc: #b7bfc2;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #eff7fa;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #a4abae;
    --background-color-wikitable-table-head: #e5ecef;
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #3366cc;
    --background-color-portlet-item-hover: rgba(51,102,204,0.1);
    --text-color-portlet-item-hover: #3366cc;
    --background-color-portlet-item-focus: rgba(112,147,255,0.1);
    --text-color-portlet-item-focus: #3366cc;
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dfe7ea;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
    --background-color-toc-button: #f4fcff;
    --icon-filter-toc-button: unset;
    --text-color-sticky-toc-number: rgba(51,102,204,0.7);
}
ArchWiki

Een thema dat ArchWiki nabootst, laatste keer geëxporteerd op versie 1.1.18.r11.gdf47be3.

Uitgevouwen inhoud
:root {
    --color-primary: #0077bb;
    --color-secondary: #ffffff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #333333;
    --color-link: #0077bb;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f6f9fc;
    --color-link--visited: #004c8a;
    --color-link--active: #57a6ee;
    --color-link-new: #bb4400;
    --color-link-new--visited: #840f00;
    --color-link-new--active: #f47334;
    --color-link-external: #006eb1;
    --color-link-external--visited: #004481;
    --color-link-external--active: #559ce3;
    --header-elevation: inset 0px -5px 0px 0px #08c;
    --text-color-header: #ffffff;
    --icon-filter-header: invert(1) hue-rotate(180deg);
    --background-color-search-suggestions-current: #0077bb;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #0077bb;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,119,187,0.1);
    --text-color-toggle-list-item-hover: #0077bb;
    --background-color-toggle-list-item-focus: rgba(0,110,177,0.2);
    --text-color-toggle-list-item-focus: #0077bb;
    --subheader-color-toggle-list: #0065a7;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #ffffff;
    --text-color-content: #000000;
    --background-color-body: #f6f9fc;
    --text-color-body: #000000;
    --color-accent-header-tab: #0077bb;
    --color-accent-header-tab-selected: #0077bb;
    --color-accent-header-tab-new: #0077bb;
    --color-tagline: rgba(0,0,0,0.7);
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #000000;
    --background-color-portlet-item-hover: rgba(0,119,187,0.1);
    --text-color-portlet-item-hover: #0077bb;
    --background-color-portlet-item-focus: rgba(87,166,238,0.1);
    --text-color-portlet-item-focus: #0077bb;
    --background-color-footer: #f6f9fc;
    --text-color-footer: #000000;
    --color-footer-link: #0077bb;
    --color-footer-link--visited: #004c8a;
    --background-color-toc-button: #ffffff;
    --icon-filter-toc-button: unset;
    --text-color-sticky-toc-number: rgba(0,0,0,0.7);
}


#content {
    border: 1px solid var(--border-color-content);
}

@media screen and ( max-width: 720px ) {
    #content {
    	border-left: none; // no left and right border when #content is as wide as viewport; adjust the value if not appropriate
    	border-right: none;
    }
}

#ca-uls .uls-trigger {
    background-image: none;
    padding-left: 0;
}

De variabelen handmatig wijzigen

Hieronder is de standaardinstelling van CSS-variabelen; wijzig deze instellingen en zet het resultaat in uw Lakeus.css:

Uitgevouwen inhoud
:root {
  --color-primary: #3366cc;
  --color-secondary: #ffffff;
  --color-neutral: #a2a9b1;
  --color-error: #d33;
  --color-warning: #fc3;
  --color-success: #14866d;
  --background-color-base: var(--color-secondary);
  --background-color-body: var(--color-secondary);
  --background-color-content: var(--color-secondary);
  --background-color-footer: #eee;
  --background-color-toggle-list: var(--color-secondary);
  --background-color-portlet-body: var(--color-secondary);
  --background-color-toggle-list-card: #eee;
  --background-color-toggle-list-item-hover: rgba(0, 0, 0, 0.1);
  --background-color-toggle-list-item-focus: rgba(0, 0, 0, 0.2);
  --background-color-portlet-item-hover: rgba(0, 0, 0, 0.1);
  --background-color-portlet-item-focus: rgba(0, 0, 0, 0.2);
  --background-color-edit-options: #eee;
  --background-color-search-suggestions: var(--color-secondary);
  --background-color-search-suggestions-current: var(--color-primary);
  --background-color-search-input: var(--color-secondary);
  --background-color-toc: #f8f9fa;
  --background-color-interface-message-box-neutral: #eaecf0;
  --background-color-interface-message-box-error: #fee7e6;
  --background-color-interface-message-box-warning: #fef6e7;
  --background-color-interface-message-box-success: #d5fdf4;
  --background-color-user-message: #ffce7b;
  --background-color-wikitable: #f8f9fa;
  --background-color-wikitable-table-head: #eaecf0;
  --background-color-toc-button: #fff;
  --border-color-edit-options: #c8ccd1;
  --border-color-content: #ccc;
  --border-color-toggle-list: #ddd;
  --border-color-search-suggestions: #c8ccd1;
  --border-color-search-bar: var(--color-gray-2);
  --border-color-portlet-body: var(--color-gray);
  --border-color-header-tab: var(--color-gray-2);
  --border-color-toc: #a2a9b1;
  --border-color-interface-message-box-neutral: var(--color-neutral);
  --border-color-interface-message-box-error: var(--color-error);
  --border-color-interface-message-box-warning: var(--color-warning);
  --border-color-interface-message-box-success: var(--color-success);
  --border-color-user-message: #ffa500;
  --border-color-wikitable: #a2a9b1;
  --subheader-color-toggle-list: #6a6a6a;
  --logo-text-color-toggle-list: #000000;
  --text-color-toggle-list-item: #1c1c1c;
  --text-color-toggle-list-item-hover: #3a3a3a;
  --text-color-toggle-list-item-focus: #3a3a3a;
  --text-color-portlet-item: #1c1c1c;
  --text-color-portlet-item-hover: #3a3a3a;
  --text-color-portlet-item-focus: #3a3a3a;
  --text-color-content: #000000;
  --text-color-header: #000000;
  --text-color-body: #000000;
  --text-color-footer: #000000;
  --text-color-interface-message-box-neutral: #000000;
  --text-color-interface-message-box-error: #000000;
  --text-color-interface-message-box-warning: #000000;
  --text-color-interface-message-box-success: #000000;
  --text-color-user-message: #000000;
  --text-color-wikitable: #202122;
  --text-color-sticky-toc-number: #888;
  --icon-filter-header: unset;
  --icon-filter-ooui-icon: unset;
  --icon-filter-toc-button: unset;
  --color-search-suggestions-text: #000;
  --color-search-suggestions-text-current: #fff;
  --color-tagline: var(--color-base);
  --color-accent-header-tab: var(--color-base);
  --color-accent-header-tab-selected: #54595d;
  --color-accent-header-tab-new: #54595d;
  --color-header: white;
  --color-base: #54595d;
  --color-gray: #a2a9b1;
  --color-gray-2: #eaecf0;
  --color-link: #0645ad;
  --color-link--visited: #0b0080;
  --color-link--active: #faa700;
  --color-link-new: #d33;
  --color-link-new--visited: #a55858;
  --color-link-new--active: #faa700;
  --color-link-external: #36b;
  --color-link-external--visited: #636;
  --color-link-external--active: #b63;
  --color-footer-link: var(--color-link);
  --color-footer-link--visited: var(--color-link--visited);
  --color-footer-link--active: var(--color-link--active);
  --color-toc-number: #202122;
  --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
  --font-family-headings: var(--font-family-serif);
  --font-family-action-bar: var(--font-family);
  --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
  --header-elevation: var(--elevation);
  --mask-background: rgba( 0, 0, 0, 0.8 );
}

Om bijvoorbeeld de kleur van de kop te veranderen in lichtblauw (bijvoorbeeld #4FC3F7), zou het zijn:

:root {
  --color-header: #4FC3F7;
}

Parameters

Parameter Type Standaardwaarde Beschrijving
$wgLakeusShowRepositoryLink Boolean true Bepaalt of de link naar de repository van de skin in de voet moet worden weergegeven.
$wgLogos Vooralsnog worden slechts icon en wordmark herkend; keys als svg, 1x, 1.5x of 2x worden door de skin niet gebruikt. Merk op dat andere skins de afbeelding van icon EN andere keys ook kunnen gebruiken, dus vertrouw niet op de key om alleen voor deze skin een pictogram te geven.
$wgLakeusSiteNoticeHasBorder Boolean false Bepaalt of een door de skin verstrekte rand moet worden toegevoegd aan de melding op de site. Het inschakelen kan nuttig zijn voor gewone tekstberichten, maar als u al een limiet heeft in de inhoud van de site, kunt u deze uitgeschakeld laten staan.
$wgLakeusShouldAnimatePortlets Boolean false Bepaalt of portlet-animaties moeten worden ingeschakeld (bijv. in- en uitblindende effecten bij het openen of sluiten van portlets). Kan visuele artefacten veroorzaken wanneer deze geactiveerd zijn vanwege problemen met de z-index.
$wgLakeusShowStickyTOC Boolean false Besluit of er een plakkende inhoudsopgave moet worden getoond. (Die blijft dan bij het scrollen op het getoonde deel staan)
$wgLakeusCustomIndicators Array [] Experimenteel. Voegt aangepaste indicatoren toe aan de skin. Dit is WAARSCHIJNLIJK NIET hoe men paginastatusindicatoren moet toevoegen en dus experimenteel. Dit array bestaat uit indicatoren en elke vermelding moet bestaan uit 3 eigenschappen: id, class en html. Het is aan te bevelen om het formaat van de juiste indicatoren te volgen die in wikitext worden toegevoegd, wat betekent:
  • id moet een string zijn met een voorvoegsel mw-indicator- met een unieke naam van de indicator na het voorvoegsel.
    • Indicatoren in wikitext hebben voorrang, dat wil zeggen, indicatoren die door deze variabele worden toegevoegd worden genegeerd wanneer ze dezelfde id hebben als die die door wikitext zijn toegevoegd.
  • class is altijd de string mw-indicator.
  • html is een string die bestaat uit het HTML-fragment van de indicator.
    • Een tag <div> met de class mw-parser-output is altijd aanwezig als de container tag, omdat de inhoud van indicatoren normaal gesproken wordt geanalyseerd in wikitext. De containertag is niet aanwezig in indicatoren die door MediaWiki core worden toegevoegd, zoals helplinks indicatoren op speciale pagina's. Schrijf de inhoud zoals u wilt.

Zijbalk pictogrammen

Helaas is het niet eenvoudig om pictogrammen aan de skin toe te voegen zonder veel afbeeldingen op de pagina te plaatsen. Als u de laadtijd van lettertypepictogrammen kunt verdragen, kunt u dit als volgt proberen. Om te beginnen, voeg het pictogram lettertype (in dit voorbeeld, Material Icons) in uw CSS (Lakeus.css) toe. Mogelijk heeft u sommige lettertypen op andere plaatsen dan Lakeus.css geladen, in dat geval moet u ervoor zorgen dat ze niet met elkaar in conflict zijn.

/* MD Icons */
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

Vervolgens, omdat we pseudo-elementen gaan gebruiken, worden enkele paddings en extra instellingen toegepast om ruimte te creëren voor pictogrammen:

.toggle-list__list a {
    padding-left: calc(8px + 25px);
}

.toggle-list__list a::before {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 18px;
    transform: translateX(-25px) translateY(3px);
    /* Display Optimizing */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

Nu, het is tijd om de echte pictogrammen toe te voegen. U kunt Devtools (het hulpmiddel dat met de rechterklik wordt geopend en vervolgens het element inspecteren) gebruiken om de ID's van de lijstitems te zien, en we gaan eindelijk de werkelijke inhoud van de pseudo-elementen (pictogrammen) instellen:

/* Navigation */
#n-mainpage-description a::before {
    content: 'home';
}

#n-recentchanges a::before {
    content: 'auto_awesome';
}

#n-randompage a::before {
    content: 'shuffle';
}

#n-portal a::before {
    content: 'forum';
}

#n-help-mediawiki a::before {
    content: 'help_center';
}

In dit voorbeeld ondersteunt 'Material Icons' bepaalde strings (hier gebruikt) en codepunten voor een bepaald pictogram. Voor welke strings of codepunten in Material Icons kunnen worden gebruikt, zie Icons - Google Fonts. Voel u vrij om meer regels toe te voegen voor uw eigen site, bijvoorbeeld een van de auteurs site kreeg een beheerders meldingenbord:

#n-adminnoticeboard a::before {
    content: 'groups';
}

Het deel #n-... komt overeen met het systeembericht dat u in uw MediaWiki:Sidebar heeft gebruikt.

Persoonlijke menu pictogrammen

Het persoonlijk menu werkt op een zelfde manier.

Uitgevouwen inhoud
/* Personal Menu */
#p-personal a {
    padding-left: calc(0.75em + 25px);
}

#p-personal a::before {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 18px;
    transform: translateX(-25px) translateY(3px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

#pt-userpage a::before {
    content: 'person';
}

#pt-mytalk a::before {
    content: 'chat_bubble';
}

#pt-adminlinks a::before {
    content: 'admin_panel_settings';
}

#pt-preferences a::before {
    content: 'settings';
}

#pt-betafeatures a::before {
    content: 'science';
}

#pt-watchlist a::before {
    content: 'star';
}

#pt-mycontris a::before {
    content: 'emoji_events';
}

#pt-logout a::before {
    content: 'logout';
}

#pt-login a::before {
    content: 'login';
}

#pt-createaccount a::before {
    content: 'person_add';
}

Galerij