Jump to content

Skin:Lakeus/nl

From mediawiki.org
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.1 (2025-07-19)
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
  • $wgLakeusCustomIndicators
  • $wgLakeusWikiDefaultColorScheme
Publieke wiki's die het gebruiken 3 (Ranked 251st)
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 een 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' );
    
  • Yes 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.
  • Binnenkort: Ondersteuning voor donkere modus, vergelijkbaar met Vector .

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 gaat de donkere modus ondersteunen in nieuwere versies!
Lees eerst dit gedeelte voordat u de aanpassing maakt, of de donkere modus zal niet werken en er raar uitzien. Voor sitebeheerders en gebruikers die eerder aanpassingen hebben gedaan via CSS-variabelen, ZORG ervoor om uw CSS dienovereenkomstig aan te passen na het upgraden van Lakeus naar versies nieuwer dan 1.4.1.

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

Thema-ontwerp is nog niet klaar voor de donkere modus! Hoewel Thema-ontwerp al ondersteuning biedt voor het genereren van kleuren met een donker thema, wordt het resultaatformaat niet gewijzigd. Lees eerst dit gedeelte en wijzig het resultaat dat hierdoor wordt gegenereerd op dezelfde wijze.

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. Deze worden ontraden in nieuwere versies van MediaWiki omdat in plaats daarvan nu Codex wordt gebruikt.
  • Sticky inhoudsopgave. De knop voor sticky inhoudsopgave verschijnt alleen op pagina's waarop de inhoudsopgave wordt gegenereerd. Als uw site bijvoorbeeld een meer geavanceerde hoofdpagina heeft (en dus geen standaardkoppen bevat), wordt de knop niet weergegeven.

Vooraf ingestelde thema's

Deze vooraf ingestelde thema's zijn waarschijnlijk verouderd, lees dus Migratie naar donkere modus om ze in donkere modus te laten werken.

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

De standaardinstelling van CSS-variabelen is beschikbaar in de map Skins (resources/skins.lakeus.styles/variables.less); De gerelateerde instellingen beginnen met :root { en elke variabele eindigt op -light of -dark, dus u kunt de twee codeblokken wijzigen (een voor een licht thema, een andere voor een donker thema) en het resultaat in uw Lakeus.css zetten.

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

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

Migratie naar donkere modus

Hoewel het ondersteunen van de donkere modus eenvoudig klinkt, zal het uiteindelijk gaan om uw on-site door gebruikers gegenereerde content (on-site stylesheets, sjablonen en inline styles). Dit deel zal zich richten op de skin zelf, met name op de CSS-variabelen. We zullen proberen te voldoen aan de standaarden in Wikimedia-wiki's, dus voor inhoud op de site of extra styles van donkere modus, zie Recommendations for night mode compatibility on Wikimedia wikis . Gebruik twee blokken CSS, een met de selector html.skin-theme-clientpref-night, een andere met zowel de media query @media screen and (prefers-color-scheme: dark) als de selector html.skin-theme-clientpref-os erin.

Omdat deze skin het gebruik van on-site CSS (bijv. MediaWiki:Lakeus.css) aanmoedigt om de variabelen van de skin te overschrijven, konden we het niet schoon maken zoals andere skins; In plaats daarvan zijn eerder geïntroduceerde variabelen er nog steeds, maar worden de werkelijke waarden nu overgebracht naar de variabelen met een achtervoegsel. Als u bijvoorbeeld styles als deze had, van Theme Designer of eerder geschreven:

:root {
    --color-primary: #0077bb;
    --color-secondary: #ffffff;
    --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;
    /* ... */
}

Voeg achtervoegsel -light of -dark toe aan elke variabele, afhankelijk van de actuele inhoud van uw code. Hoewel Lakeus voorheen de donkere modus niet ondersteunde, kon Theme Designer goede resultaten opleveren bij het genereren van een thema met een donkere achtergrondkleur; als u klaar bent met het gebruik van Theme Designer om een donker thema te produceren, gebruik dan het achtervoegsel -dark, anders gebruikt u het achtervoegsel -light. In het voorbeeld wordt het achtervoegsel -light gebruikt en het zou er als volgt uit moeten zien na het toevoegen van het achtervoegsel:

:root {
    --color-primary-light: #0077bb;
    --color-secondary-light: #ffffff;
    --color-header-light: #333333;
    --color-link-light: #0077bb;
    --elevation-light: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base-light: #f6f9fc;
    --color-link--visited-light: #004c8a;
    --color-link--active-light: #57a6ee;
    --color-link-new-light: #bb4400;
    --color-link-new--visited-light: #840f00;
    --color-link-new--active-light: #f47334;
    --color-link-external-light: #006eb1;
    --color-link-external--visited-light: #004481;
    --color-link-external--active-light: #559ce3;
    /* ... */
}

Als u uw variabelen voor beide thema's wilt schrijven (vooral variabelen voor 'font family' omdat ze eigenlijk niet gescheiden zouden moeten worden?), schrijf dan twee blokken van deze variabelen, een met achtervoegsel -light en een andere met -dark.

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.
$wgLakeusWikiDefaultColorScheme String 'light' Bepaal het standaard kleurenschema van de wiki bij het kiezen van "Gebruik wiki standaard" in Voorkeuren. Beschikbare waarden:
  • 'light': Gebruik standaard een licht thema.
  • 'dark': Gebruik standaard een donker thema.
  • 'os': Gebruik standaard de browserinstellingen van de gebruiker.

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