imported>Lómelinde: kl. Anpassung für WP:Dark Mode möglichst Farbklassen verwenden + CodexIcon

2025-12-16T16:37:41Z

kl. Anpassung für WP:Dark Mode möglichst Farbklassen verwenden + CodexIcon

Neue Seite

{{../../!header
|Text=Benutzeroberfläche}}
Diese Seite stellt Möglichkeiten vor, sich seine Benutzeroberfläche mit aktiven Bedienelementen (Knöpfchen, [[Hilfe:Menüpunkte|Menüpunkte]]) selbst zu programmieren und zu gestalten.

__TOC__

== {{Anker|Selektor|Seitenaufbau}} Aufbau einer Wiki-Seite ==
Grundsätzlich kann man seine eigenen Schaltflächen überall auf der Standard-Seite zwischen den vorhandenen Bedienelementen einfügen oder auch uninteressante Menüfelder entfernen, mindestens unsichtbar machen.

Eine klassische Wiki-Seite („Desktop“, also stationärer PC) ist aufgeteilt in drei Bereiche:
# Inhalt: [[#content]]
# Portal-Rahmen:
#* Kopfbereich; meist oben horizontal: [[#mw-head]]
#* Panel; meist links vertikal: [[#mw-panel]]
# Fußbereich: [[#footer]]
Die Skins sind jedoch frei darin, die Seite optisch anders aufzuteilen und die Elemente den Bereichen zuzuweisen.

Auf einem Mobilgerät kann kein solches Portal angezeigt werden; hier werden die Strukturen völlig anders organisiert und teilweise auf gesonderte Seiten ausgelagert.

Die wesentlichen Klassen (<code>.class</code>) und Identifikatoren (<code>#id</code>) einer Wiki-Seite auf dem Desktop, die mit Schaltflächen in Verbindung stehen, sind:

{| class="wikitable"
|-
! colspan="2"| [[../CSS#CSS-Notation|Selektor]] !! Deutsch !! Englisch
|-
|colspan="2"| {{Hilfe/tt|1=p-}} || || portlet
|-
|colspan="2"| {{Hilfe/tt|1=n-}} || || navigation
|- id="id:p-personal"
|rowspan="10" style="background:#FF82FF; color:#202122;"|
|style="background:#FF82FF; color:#202122;"| {{Hilfe/tt|1=#p-personal}}
| ''Angemeldeter Benutzer'' (ggf. [[Hilfe:Temporäres Benutzerkonto|TK]])
|rowspan="10"| personal toolbar
|-
| {{Hilfe/tt|1=#pt-userpage}} || Benutzer
|-
| {{Hilfe/tt|1=#pt-notifications}} || [[Hilfe:Echo#badge|Echo-Zählerfeld]]
|-
| {{Hilfe/tt|1=#pt-mytalk}} || Eigene Diskussion
|-
| {{Hilfe/tt|1=#pt-sandbox}} || Artikelentwurf 
|-
| {{Hilfe/tt|1=#pt-preferences}} || Einstellungen
|-
| {{Hilfe/tt|1=#pt-betafeatures}} || {{int:betafeatures-toplink}}
|-
| {{Hilfe/tt|1=#pt-watchlist}} || Beobachtungsliste
|-
| {{Hilfe/tt|1=#pt-mycontris}} || Eigene Beiträge
|-
| {{Hilfe/tt|1=#pt-logout}} || Abmelden
|- id="id:p-cactions"
|rowspan="8" class="hintergrundfarbe9"|
|class="hintergrundfarbe9"| {{Hilfe/tt|1=#p-cactions}}
| ''Seitenbezogene Aktionen''{{FN|(*)}}
|rowspan="8"| content action
|-
| {{Hilfe/tt|1=#ca-nstab-main -project, -template}} || Artikel, Seite etc.
|-
| {{Hilfe/tt|1=#ca-talk}} || Seiten-Diskussion
|-
| {{Hilfe/tt|1=#ca-ve-edit}} || Bearbeiten mit VisualEditor
|-
| {{Hilfe/tt|1=#ca-edit #ca-view}} || Quelltext bearbeiten/ansehen
|-
| {{Hilfe/tt|1=#ca-history}} || Versionsgeschichte
|-
| {{Hilfe/tt|1=#ca-move}} || Verschieben
|-
| {{Hilfe/tt|1=#ca-watch #ca-unwatch}} || Beobachten Nicht beobachten
|-
|rowspan="2"|
| {{Hilfe/tt|1=#p-search}}
| Suche
|rowspan="2"|
|-
| {{Hilfe/tt|1=#searchform}} || Suchformular
|- id="id:p-navigation"
|rowspan="7" style="background:#B0E0E6; color:#202122;"|
|style="background:#B0E0E6; color:#202122;"| {{Hilfe/tt|1=#p-navigation}}
| ''[[MediaWiki:Sidebar|Navigation]]''
|rowspan="7"|
|-
| {{Hilfe/tt|1=#n-mainpage-description}} || Hauptseite
|-
| {{Hilfe/tt|1=#n-aboutsite}} || Über Wikipedia
|-
| {{Hilfe/tt|1=#n-topics}} || Themenportale
|-
| {{Hilfe/tt|1=#n-alphindex}} || Von A bis Z
|-
| {{Hilfe/tt|1=#n-randompage}} || Zufälliger Artikel
|-
| {{Hilfe/tt|1=#n-specialpages}} || [[Spezial:Spezialseiten|Spezialseiten]] 
|- id="id:p-Mitmachen"
|rowspan="6" class="hintergrundfarbe7"|
|class="hintergrundfarbe7"| {{Hilfe/tt|1=#p-Mitmachen}}
| ''[[MediaWiki:Sidebar|Mitmachen]]''
|rowspan="6"|
|-
| {{Hilfe/tt|1=#n-help}} || Hilfe
|-
| {{Hilfe/tt|1=#n-portal}} || Autorenportal
|-
| {{Hilfe/tt|1=#n-recentchanges}} || Letzte Änderungen
|-
| {{Hilfe/tt|1=#n-contact}} || Kontakt
|-
| {{Hilfe/tt|1=#n-sitesupport}} || Spenden
|- id="id:p-tb"
|rowspan="12" class="hintergrundfarbe8"|
|class="hintergrundfarbe8"| {{Hilfe/tt|1=#p-tb}}
| ''Werkzeuge; auch Seitentyp-bezogene Möglichkeiten, etwa auf Benutzerseiten''
|rowspan="12"| toolbox
|-
| {{Hilfe/tt|1=#t-whatlinkshere}} || Links auf diese Seite
|-
| {{Hilfe/tt|1=#t-recentchangeslinked}} || Änderungen an verlinkten Seiten
|-
| {{Hilfe/tt|1=#t-contributions}} || Benutzerbeiträge ''(nur auf Benutzer-bezogenen Seiten)''
|-
| {{Hilfe/tt|1=#t-upload}} || Hochladen
|-
| #''t-specialpages'' || <s>Spezialseiten</s> (bis Anfang 2025)
|-
| {{Hilfe/tt|1=#t-permalink}} || Permanenter Link
|-
| {{Hilfe/tt|1=#t-info}} || Seiteninformationen
|-
| {{Hilfe/tt|1=#t-urlshortener}} || Kurzlink
|-
| {{Hilfe/tt|1=#t-urlshortener-qrcode}} || QR-Code herunterladen
|-
| {{Hilfe/tt|1=#t-wikibase}} || Wikidata-Datenobjekt
|-
|colspan="2"| <code>TOOLBOX</code> in [[#sidebar|MediaWiki:Sidebar]] – lokale Konfiguration weiterer Menüpunkte
|-
|
| {{Hilfe/tt|1=#p-sisterprojects}} || ''Schwesterprojekte'' (z. B.: [[Wikipedia:Fragen zur Wikipedia]])
|
|- id="id:p-coll-print_export"
|rowspan="4"|
| {{Hilfe/tt|1=#p-coll-print_export}}
| ''Drucken / Exportieren'' ({{Hilfe/tt|1=#collectionPortletList}})
|rowspan="4"|
|-
| {{Hilfe/tt|1=#coll-create_a_book}} || Buch erstellen ''(nur Artikel)''
|-
| {{Hilfe/tt|1=#coll-download-as-rl}} || PDF-Version ''(nur Artikel)''
|-
| {{Hilfe/tt|1=#t-print}} || Druckansicht
|- id="id:p-lang"
|rowspan="2"|
| {{Hilfe/tt|1=#p-lang}}
| ''[[Hilfe:Internationalisierung|Interlanguages]]''
|rowspan="2"| languages
|-
| {{Hilfe/tt|1=.interwiki-ar}}, {{Hilfe/tt|1=.interwiki-bar}}, … || Die einzelnen Sprachlinks haben Klassen, die den jeweiligen Sprachcode enthalten
|-
|colspan="2" class="hintergrundfarbe-basis"| {{Hilfe/tt|1=div#bodyContent}} u. a.
| ''Artikelansicht / Bearbeitungsfeld'' (“content”)
|
|}
Zu einer anderen Liste siehe [[meta:Help:User style/de #Referenz]] und deren englischsprachige Version. Diese vereinfachte Darstellung soll nur einen Überblick zur ersten groben Orientierung geben.

''Anmerkungen:''
{{FNZ|(*)|2=Im Vector-Skin wird der Bereich <code>p-cactions</code> je nach der aktuellen Breite des Browserfensters aufgeteilt. Die horizontale Leiste <code>#p-views</code> enthält so viele Tabs wie momentan sichtbar sein können; ein Element bleibt in der dropdown-Liste. Alle anderen Elemente sind als <code>#p-cactions</code> unter Mehr ▼ auszuklappen. Siehe auch unten: [[#Vector-Leiste|Vector-Leiste]]}}

=== Skins ===

{{Hilfe/desktop|Anker=desktop}}

{| class="wikitable" id="vector"
|+ Vector-Skin (klassisch [2010, „Legacy“])[[#Vector-Leiste|(*)]]
|-
| <div class="hintergrundfarbe2" style="width:fit-content;">[[Datei:Wikipedia-logo-v2-de.png|20px|alt=|Logo]]</div>
|colspan="2" style="background:#FF82FF; color:#202122;"| [[#id:p-personal|{{Hilfe/tt|1=pt-}}]]   Benutzer und benutzerspezifisch
|-
|style="background:#B0E0E6; color:#202122;"| [[#id:p-navigation|{{Hilfe/tt|1=nav}}]]
|class="hintergrundfarbe9"| [[#id:p-cactions|{{Hilfe/tt|1=ca-}}]] (Seitenbezogene Aktionen)
| Suchfeld
|-
|class="hintergrundfarbe7"| [[#id:p-Mitmachen|{{Hilfe/tt|1=Mit}}]]
|colspan="2" style="text-align: center"| '''Seitentitel''' {{Hilfe/tt|1=#firstHeading}}
|-
|class="hintergrundfarbe8"| [[#id:p-tb|{{Hilfe/tt|1=tb}}]]
|rowspan="2" colspan="2" class="hintergrundfarbe-basis"| Artikelansicht / Bearbeitungsfeld {{Hilfe/tt|1=div#bodyContent}} Textarea
|-
| IL
|}

{| class="wikitable" id="monobook"
|+ Monobook-Skin
|colspan="2" style="background:#FF82FF; color:#202122;"| [[#id:p-personal|{{Hilfe/tt|1=pt-}}]]   Benutzer und benutzerspezifisch
|-
| <div class="hintergrundfarbe2" style="width:fit-content;">[[Datei:Wikipedia-logo-v2-de.png|20px|alt=|Logo]]</div>
|class="hintergrundfarbe9"| [[#id:p-cactions|{{Hilfe/tt|1=ca-}}]] (Seitenbezogene Aktionen)
|-
| Suche
|style="text-align: center"| '''Seitentitel''' {{Hilfe/tt|1=#firstHeading}}
|-
|style="background:#B0E0E6; color:#202122;"| [[#id:p-navigation|{{Hilfe/tt|1=nav}}]]
|rowspan="4" class="hintergrundfarbe-basis"| Artikelansicht / Bearbeitungsfeld {{Hilfe/tt|1=div#bodyContent}} Textarea
|-
|class="hintergrundfarbe7"| [[#id:p-Mitmachen|{{Hilfe/tt|1=Mit}}]]
|-
|class="hintergrundfarbe8"| [[#id:p-tb|{{Hilfe/tt|1=tb}}]]
|-
| IL
|}
Die Selektoren galten auch für '''MySkin''' (April 2013 abgeschaltet).

{| class="wikitable" id="timeless"
|+ Timeless
|-
| 
WikipediA
| 
Suche
|style="background:#FF82FF; color:#202122;"| {{CodexIcon|bell|px=16|text=Glocke}}
|-
|colspan="3" style="white-space:nowrap;"| Navigation   Wikiwerkzeuge   Seitenwerkzeuge   Weitere Projekte
|-
|colspan="3" style="border-top-color:#B32424; border-top-width:3px; border-bottom-color:#3366CC; border-bottom-width:3px; white-space:nowrap;"| '''Seitentitel''' <code style="font-size:smaller">.mw-first-heading</code>
|-
|colspan="3"| Artikelansicht / Bearbeitungsfeld {{Hilfe/tt|1=div#bodyContent}} Textarea
|}

{| class="wikitable" id="modern"
|+ Modern-Skin
|colspan="2" style="text-align: left"| '''Seitentitel''' {{Hilfe/tt|1=#firstHeading}}
|-
|colspan="2" style="background:#FF82FF; color:#202122;"| [[#id:p-personal|{{Hilfe/tt|1=pt-}}]]   Benutzer und benutzerspezifisch
|-
| Suche
|class="hintergrundfarbe9"| [[#id:p-cactions|{{Hilfe/tt|1=ca-}}]] (Seitenbezogene Aktionen)
|-
|style="background:#B0E0E6; color:#202122;"| [[#id:p-navigation|{{Hilfe/tt|1=nav}}]]
| {{Hilfe/tt|1=#contentSub}}
|-
|class="hintergrundfarbe7"| [[#id:p-Mitmachen|{{Hilfe/tt|1=Mit}}]]
|rowspan="3" class="hintergrundfarbe-basis"| Artikelansicht / Bearbeitungsfeld {{Hilfe/tt|1=div#mw_contentholder}} Textarea
|-
|class="hintergrundfarbe8"| [[#id:p-tb|{{Hilfe/tt|1=tb}}]]
|-
| IL
|}

{| class="wikitable"
|+ Kölnisch Blau (<code>cologneblue</code>)
|-
|style="background:#B0E0E6; color:#202122;"| Wikipedia
|style="background:#B0E0E6; color:#202122;"|
|style="background:#B0E0E6; color:#202122;"| [[#id:p-navigation|{{Hilfe/tt|1=nav}}]]
|-
| Suche
|colspan="2" style="text-align:left"| Interlanguages
|-
|class="hintergrundfarbe7"| [[#id:p-Mitmachen|{{Hilfe/tt|1=Mit}}]]
|colspan="2" style="text-align:left"| '''Seitentitel'''
|-
| Drucken
|rowspan="3" colspan="2" class="hintergrundfarbe-basis"| Artikelansicht / Bearbeitungsfeld {{Hilfe/tt|1=div}} Textarea
|-
|class="hintergrundfarbe9"| [[#id:p-cactions|{{Hilfe/tt|1=ca-}}]]
|-
|style="background:#FF82FF; color:#202122;"| [[#id:p-personal|{{Hilfe/tt|1=pt-}}]]
|}

{{Hilfe/mobil|Anker=mobile}}

{| class="wikitable"
|+ Mobil
|-
|colspan="2" style="border-right:transparent; padding-right:10em;"| <code style="font-size:smaller">.header</code> {{CodexIcon|menu|px=16|text=Menü}} Suche
|style="border-left:transparent; max-width:2em; text-align:right;"| {{CodexIcon|bell|px=16|text=Glocke}}
|-
|colspan="2" style="border-right:transparent"|
<code style="font-size:smaller">.pre-content .heading-holder</code> '''Seitentitel''' <code>.subpages</code>
|style="border-left:transparent; text-align:right;"| <code>#page-actions</code> {{CodexIcon|language|px=|text=Sprachen}} #ca-watch {{CodexIcon|star|px=16|text=Beo}} #ca-edit {{CodexIcon|edit|px=16|text=Bearbeiten}}
|-
|colspan="3" class="hintergrundfarbe-basis"| {{Hilfe/tt|1=#mw-content-text}} Artikelansicht / Bearbeitungsfeld Textarea 
|-
|colspan="3"|
<code style="font-size:smaller">#page-secondary-actions</code>
Diskussion 
Versionsgeschichte
|-
|colspan="3"| <div class="hintergrundfarbe2" style="width:fit-content;">[[Datei:Wikipedia wordmark.svg|40px]]</div>
|-
|colspan="3"| footer
|}

==== Vector-Leiste ====
{{Info}} 2020 wird zur Ablösung des „klassischen Vector“ von 2010 („Legacy“) ein Nachfolger entwickelt.

Bei Vector ist die horizontale Navigation oben wie folgt gegliedert:
* <code>#left-navigation</code>
** <code>#p-namespaces</code> .vectorTabs
*** <code>#ca-nstab-main</code>
*** <code>#ca-talk</code>
* <code>#right-navigation</code>
** <code>#p-views</code> .vectorTabs
*** <code>#ca-view</code>
*** <code>#ca-edit</code>
*** <code>#ca-history</code>
*** <code>#ca-watch</code> (Stern)
*** <code>#ca-move</code>
** <code>#p-cactions</code> .vectorMenu ''Ausklappen'' Mehr ▼
** <code>#p-search</code>
Mindestens ein Element von <code>#p-views</code> (das auch benutzerdefiniert hinzugefügt sein kann) ist zum Ausklappen in <code>#p-cactions</code> enthalten; auch alle außer <code>#ca-watch</code> aus der horizontalen Leiste <code>#p-views</code>, die dort nicht mehr hinpassen. Die anderen Elemente von <code>#p-views</code> werden rechtsbündig dargestellt.

=== Gesamtseite ===
Weitgehend einheitlich für [[#desktop|Desktop]] und [[#mobile|Mobil]] haben Wiki-Seiten folgenden Aufbau:
* <code><body></code>
** Desktop: <code>#content</code> class="mw-body" role="main"
*** <code>#top</code>
*** Mobil: Banner-Bereich
*** Mobil: <code><form></code> – Kopfbereich
*** <code>#mw-body</code>
**** Desktop: Banner-Bereich <code>#siteNotice</code>
**** Seitentitel
***** Desktop: <code>#firstHeading</code>
***** Mobil: <code>#section_0</code>
**** <code>#mw-content-text</code> wesentlicher Inhaltsbereich
***** <code>.mw-parser-output</code> – nur wenn aus Wikitext generiert
***** (ggf. eingebettet) Inhaltsverzeichnis
****** Desktop: <code>#toc</code>
****** Mobil: <code>.toc-mobile</code>
***** Desktop: <code>#catlinks</code> – Kategorien
** Desktop: <code>#mw-navigation</code>
*** <code>#mw-head</code> – Kopfbereich; meist oben horizontal
*** <code>#mw-panel</code> – [[#sidebar|Sidebar]]; meist links vertikal
** Fußbereich
*** Desktop: <code>#footer</code> <code style="white-space:nowrap">.mw-footer</code>
*** Mobil: <code><footer></code> <code style="white-space:nowrap">.mw-footer</code>

Die bisher nur in der Mobildarstellung verwendeten semantischen [[HTML5]]-Elemente <code><header></code>, <code><main></code>, <code><nav></code> und <code><footer></code> werden ab 2020 zunehmend auch in die Desktop-Skins eingearbeitet. Die Selektoren sollen dabei ungestört weiter funktionieren, sollten jedoch nicht überspezifisch mittels vorangestelltes <code>div</code> sein.

=== {{Anker|sidebar}} Randbereich ===
Der „linke Rand“ der Desktop-Oberflächen wird durch [[MediaWiki:Sidebar]] konfiguriert.
* Auf Endgeräten mit kleinem Display (Mobil) kann er unterschiedlich angeordnet sein.
* Skins mit dynamischen Navigationselementen verwenden die Elemente ggf. individuell.

Diese [[../MediaWiki/Systemnachrichten|Systemnachricht]] ist eine <code>*</code>-Aufzählung mit:
* <code>*</code> Überschrift
* <code>**</code> Einzelner Eintrag.
Jede <code>*</code>-Überschrift ist der Bezeichner einer existierenden Systemnachricht, die ihrerseits zum (ggf. sprachabhängigen) Text expandiert.
* TOOLBOX und LANGUAGES und ggf. SEARCH sind vorgegebene Standard-Überschriften. Deren Text definiert sich über [[MediaWiki:toolbox]] bzw. [[MediaWiki:otherlanguages]].
* Jede <code>*</code>-Überschrift generiert einen Abschnitt, eine Box usw.
Jeder <code>**</code>-Eintrag hat das Format: ''Linkziel'' <code></code> ''Beschriftung''
* ''Linkziel'' kann eine von drei Formen haben:
** URL
** Wiki-Seite mit Namensraum
** Systemnachricht, die ihrerseits zu URL oder Seitenname expandiert.
''Beschriftung'' kann eine von zwei Formen haben:
* Bezeichner einer existierenden Systemnachricht, die ihrerseits zum (ggf. sprachabhängigen) Text expandiert.
* Unmitelbarer Text.

Siehe dazu auch: [[Wikipedia:WikiProjekt Benutzerfreundlichkeit/Sidebar]] und [[mw:Manual:Interface/Sidebar]].

=== {{Anker|contentarea}} Inhaltsbereich ===
Die „Nutzfläche“ innerhalb der Portalseite enthält etwa den Artikelinhalt; auch den [[#Bearbeitungsbereich|Bearbeitungsbereich]] oder eine Auflistung der Benutzerbeiträge.

Der Selektor ist bei verschiedenen Skins sehr unterschiedlich. Die Eigenschaft <code>mw.util.$content</code> des [[../JS#mediaWiki Objekt|Objektes mediaWiki]] (keine Funktion, deshalb keine Klammern) enthält ein [[#jQuery|jQuery]]-Objekt, das diesen Inhaltsbereich repräsentiert.<ref>Ab Herbst 2012 mit 1.20wmf11 umfasst dies auch den Titel ([[Gerrit:19008]]).</ref> Von dort aus sind die weiteren Selektoren weitgehend gleich. <code>$content</code> ist erst dann nutzbar, wenn das Dokument geladen wurde ([[#document ready|document ready]]). Im Übrigen lässt sich eine Tausendstelsekunde sparen, wenn mit [[../JS/jQuery#.find()|<code>.find()</code>]] Elemente des Inhaltsbereichs in <code>$content</code> gesucht werden und nicht im gesamten <code>document</code>.

=== Bearbeitungsbereich ===
Wenn eine Seite zur Bearbeitung geöffnet wird, entstehen weitere Schaltflächen und Werkzeugleisten:
{| class="wikitable" class="hintergrundfarbe-basis"
| Standard-[[#WikiEditor|Bearbeitungswerkzeugleiste]] (inklusive [[Wikipedia:Helferlein/Extra-Editbuttons|Extra-Editbuttons]], falls aktiviert)
|-
| ''ggf.'' [[../../Text/Edit/wikEd|wikEd]]-Werkzeugleiste ([[:en:User:Cacycle/wikEd customization#Custom buttons|Anpassung]])
|-
|style="text-align: center"| Bearbeitungsfeld: Seitentext {{Hilfe/tt|1=textarea#wpTextbox1}} 
|-
| [[Hilfe:Symbolleisten#Edittools|„Edittools“]] (Sonderzeichenleiste)
|}
Auch die Sonderzeichenleiste kann durch benutzerdefinierte Listenelemente und Links ergänzt werden; beispielsweise zum Einfügen von Vorlagen.

==== HTML-Formular ====
Der Bearbeitungsbereich ist HTML-technisch Teile eines Formulars <code><form></code>. Folgende Identifizierer sind dort vorhanden:
* form<code>#editform</code>
** textarea<code>#wpTextbox1</code>
** div<code>.editOptions</code>
*** input<code>#wpSummary</code>
*** div<code>.editCheckboxes</code>
**** input<code>#wpMinoredit</code>
**** input<code>#wpWatchthis</code>
** div<code>.editButtons</code>
*** input<code>#wpSave</code>
*** input<code>#wpPreview</code>
*** input<code>#wpDiff</code>
** ''versteckte Elemente:''
*** input<code>#wpEditToken</code>
*** input<code>#baseRevId</code>
*** input<code>#undidRev</code>
*** input<code>#wpStarttime</code>
*** input<code>#wpEdittime</code>
*** input<code>#oldid</code>
*** input<code>#wpSection</code>
*** input<code>#wpAutoSummary</code>

== Aktive Bedienelemente verändern ==
Grundsätzlich benötigt man für jedes Bedienelement
* ein Link <code>href</code> zur Angabe der Aktion
* einen Titel, also Linktext
Außerdem können Stileigenschaften definiert werden (CSS).

Vor allen Manipulationen an der Portalseite muss sichergestellt sein, dass die Seite bereits aufgebaut wurde. Wenn man interaktiv tätig wird, kann man sie sehen und das ist immer der Fall. Anders verhält es sich, wenn man Skripte schreibt, die beim Laden der Seite automatisch tätig werden; vor allem wenn aus [[Special:Mypage/common.js|common.js]] heraus Funktionen aufgerufen werden, existieren die Elemente wahrscheinlich noch gar nicht und das Skript könnte abstürzen, zumindest nicht wirksam werden. Besser ist es, eine Funktion <code>MeineFunktion</code> erstmal nur zu definieren, aber noch nicht auszuführen. Dies erfolgt erst anschließend [[#document ready|im richtigen Moment]] durch den [[#jQuery|jQuery]]-Aufruf
<syntaxhighlight lang="javascript">
jQuery( document ).ready( MeineFunktion );
</syntaxhighlight>
und in <code>MeineFunktion</code> stehen alle wirksamen Aktivitäten.

Grundsätzlich ist es eine gute Idee, zunächst den Aufbau der für Anwender sichtbaren Seitenelemente abzuwarten und erst danach, wenn der Mensch eine halbwegs sortierte Seite präsentiert bekam, diskret im Hintergrund Kleinigkeiten zu verbessern, unsichtbare Details an unsichtbaren Untermenüs zu justieren. Besonderes Know-How ist allerdings erforderlich, wenn man das Layout der Skin-Seite völlig umschmeißen möchte, weil beim Betrachten zunächst das Standard-Layout angezeigt wird, dann ein Weilchen blockiert ist und dann auf das umgemodelte Layout springt.

=== Ausblenden mit CSS ===
Wer der Meinung ist, nun genug Arbeitskraft und Nerven beigetragen zu haben, und nicht auch noch Schecks hinterherschmeißen möchte, kann in seine [[Special:Mypage/common.css|common.css]] einfügen:
<syntaxhighlight lang="css">
#n-sitesupport {
display: none;
}
</syntaxhighlight>
blendet die „Spenden“ aus.

[[../CSS#hints|Mehr Anregungen]].

=== {{Anker|addPortletLink}} addPortletLink() ===
Den komfortabelsten Zugang zur Gestaltung eigener Bedienelemente bietet diese Standardfunktion, die ein neues Bedienelement hinzufügt:
{| class="wikitable"
|+ [[../JS/mw#.util|mw.util.addPortletLink()]]
! colspan="2"|addPortletLink(Container, Aktion, Titel, ID, Tooltip, Hotkey, Vor)
|-
| Container <code>portlet</code>
| Elementgruppe, zu der hinzugefügt werden soll. <code>p-cactions</code> oder <code>p-tb</code> oder andere (ohne <code>#</code> des CSS-Selektors)
|-
| Aktion <code>href</code>
| Meist URL; beginnend also etwa mit <code>http://</code> oder auch nur beginnend mit <code>/</code> der relative Pfad auf dem Server oder aber mit <code>javascript:</code>
|-
| Titel <code>text</code>
| Linktitel 
|-
| ID <code>id</code>
| Eindeutiger Bezeichner des neuen Elements auf der Seite. Sollte mit dem passenden "ca-", "pt-", "n-", "t-" beginnen, um die Übersicht zu behalten. Darf keine Leerzeichen enthalten.
|-
| [[Tooltip]] <code>tooltip</code>
| Kurzer Hilfe-Text; wird angezeigt, wenn mit der Maus über dem Element schwebend.
|-
| Hotkey <code>accesskey</code>
| Möglichst eindeutiger einzelner Buchstabe (oder anderes Zeichen) zur Bildung einer [[Tastenkombination]]. <code>"g"</code> erlaubt etwa {{Taste|Alt}}+{{Taste|g}} – Großbuchstaben weniger sinnvoll. Konflikte mit [[Hilfe:Tastaturkombinationen|Standard-Tastaturkombinationen]] beachten!
|-
| Vor <code>nextnode</code>
| Bezeichner eines anderen Elements im selben Container, vor dem das neue Element eingefügt werden soll. Kann auch ein [[jQuery]]-Objekt sein. Anders als bei den anderen Bezeichnern dieser Parameterliste muss hier ein "<code>#</code>" dem Bezeichner vorangestellt werden, wenn kein jQuery-Objekt übergeben wird.<ref>Warum das so ist, frage man die Entwickler. Vielleicht baut ja jemand eine Service-Abfrage ein und ergänzt das stillschweigend, wo fehlend.</ref>
|-
|colspan="2"|
* Alle Parameter sind vom Typ <code>string</code> (Zeichenkette).
* Die ersten 3 Parameter sind Pflichtparameter; es empfiehlt sich, möglichst alle anzugeben.
|-
! Rückgabe
| DOM node des neuen Elements LI Element, bei veralteten Skins ein A, oder <code>null</code>.
|}
Die Funktion prüft nicht von sich aus, ob die Seite bereits aufgebaut wurde.  Die Benutzung muss also in einen Aufruf von [[#jQuery.ready|ready()]] eingebettet werden. Außerdem sollte sichergestellt werden, dass die Komponente <code>mw.util</code> bereit ist; [[../JS/mw#Ladezeitpunkt|Näheres dazu]].

Veraltet ist der Aufruf von <code>addPortletLink()</code> ohne vorangestelltes <code>mw.util.</code> Dies stammt aus ''wikibits'' und wird seit April 2017 nicht mehr unterstützt.

''Beispiel für einzelnen Aufruf:''
<syntaxhighlight lang="javascript">
mw.util.addPortletLink(
'p-tb',
mw.util.getUrl( 'Spezial:Präfixindex' ),
'Präfix-Suche',
't-search-prefix',
'Alle Seiten (mit Präfix)',
'g',
null
);
</syntaxhighlight>
''Anmerkungen:''
* [[../JS/mw#.util|mw.util.getUrl()]] stellt sicher, dass die URL nicht nur bei http, sondern auch bei https und verschiedenen Server-Konfigurationen richtig ist.
* Gebildet wird dabei nur ein relativer Pfad auf demselben Server, der mit <code>/</code> beginnt.
* <code>null</code> ist eine weitere Möglichkeit, um ausdrücklich zu signalisieren, dass man keine Zeichenkette anzugeben wünscht.
Im Anschluss wird intern [[../JS/jQuery#jquery.accessKeyLabel|updateTooltipAccessKeys()]] automatisch aufgerufen.

''Beispiel für eine komplexe Einbindung mit Abwarten der Vorbedingungen:''
<syntaxhighlight lang="javascript">
jQuery( document ).ready( function () {
mw.loader.using( [ "mediawiki.util" ], function () {
mw.util.addPortletLink(
"p-tb",
mw.util.getUrl( "Spezial:Präfixindex" ),
"Präfix-Suche",
"t-search-prefix",
"Alle Seiten (mit Präfix)",
"q",
null
);
} ); // .using()
} ); // .ready()
</syntaxhighlight>

=== {{Anker|addPortlet}} addPortlet() ===
Im Frühjahr 2024 wurde eine weitere Funktion eingeführt. Während bisher nur innerhalb bereits bestehender Blöcke Werkzeug-Verlinkungen eingefügt werden können, kann jetzt auch ein weiterer Block angehängt werden, in den dann Verlinkungen aufgenommen werden.

<syntaxhighlight lang="javascript">
jQuery( document ).ready( function () {
mw.loader.using( [ "mediawiki.util" ], function () {
var block = mw.util.addPortlet( "p-meinblock" );
jQuery( "#mw-panel" ).append( block );
mw.util.addPortletLink(
"p-meinblock",
mw.util.getUrl( "Spezial:Präfixindex" ),
"Präfix-Suche",
"t-search-prefix",
"Alle Seiten (mit Präfix)",
"q",
null
);
} ); // .using()
} ); // .ready()
</syntaxhighlight>

=== Testen ===
Bei der Bearbeitung des Skriptes werden die Definitionen bereits wirksam, wenn man „Vorschau“ oder „Änderungen“ anklickt. Damit lassen sie sich an den auf der Portalumgebung sichtbaren Elementen testen, ohne die Versionsgeschichte belasten zu müssen. →[[../JS#Testen vor dem Speichern|JS]]

== WikiEditor ==
WikiEditor, die [[Hilfe:Symbolleisten|Bearbeiten-Werkzeugleiste]] von 2010, besitzt eine API zum Einfügen und Entfernen von Elementen. Eine knappe Dokumentation auf Englisch ist vorhanden unter [[mw:Extension:WikiEditor/Toolbar customization]]. Modul: <code style="white-space:nowrap">wikiEditor-ui-toolbar</code>

== HTML, DOM und jQuery ==
Wenn die in [[Hypertext Markup Language|HTML]] geschriebene Seite dargestellt ist, wurde auch ein [[Document Object Model]] (DOM) aufgebaut. Es kann in seiner Struktur beliebig manipuliert werden; [[#addPortletLink|addPortletLink]] ist ein Beispiel dafür. Eine nachträgliche Veränderung am DOM zieht eine Änderung der dargestellten Seite nach sich.

''Weiterführend:''
* [[Selfhtml|SELFHTML]] (deutschsprachig)
** [http://de.selfhtml.org/javascript/objekte/document.htm document]
** [http://de.selfhtml.org/javascript/objekte/node.htm node]


=== jQuery ===
Das Arbeiten kann unterstützt werden durch die Skript-Bibliothek [[jQuery]]. Sie enthält viele Hilfsfunktionen; darunter auch solche, die Veränderungen des DOM erleichtern. Die dazu erforderlichen Basis-Funktionen sind im Allgemeinen von vornherein in [[meta:Wikimedia projects|WMF-Projekten]] geladen; nur weitergehende Module müssten durch Benutzer abgefordert werden.

Einzelheiten unter [[../JS/jQuery|JS/jQuery]].

==== {{Anker|jQuery.ready}} document ready ====
Eine der meistbenutzten Funktionen ist
<syntaxhighlight lang="javascript">
jQuery( document ).ready( MeineFunktion );
</syntaxhighlight>
oder kurz, aber leicht zu übersehen
<syntaxhighlight lang="javascript">
$( MeineFunktion );
</syntaxhighlight>
Sie bewirkt, dass <code>MeineFunktion</code> erst dann ausgeführt wird, wenn das <code>document</code> grundsätzlich geladen wurde und die Elemente der Basis-Seite bekannt sind. ''(Siehe dazu [[../JS#wait.ready|Warten, bis die Seite geladen ist]])''

== Bookmarklet ==
Ein alternativer und für manche Benutzer vielleicht einfacherer Weg ist die Verwendung von [[Bookmarklet]]s. Hier wird einer Bookmark („Favoriten“) ein [[JavaScript]]-Code zugewiesen, so dass die Verwaltung und Darstellung der Schaltflächen vom Browser übernommen wird. Siehe hierzu [[../../Browser/Bookmarklet|Technik/Browser/Bookmarklet]].

== Weitere Informationen ==
{{Hilfreiches|1=
* [[../CSS|Skin/CSS]] Stile
* [[../JS|Skin/JS]] Programmierung mit [[JavaScript]]
* [[../JS/jQuery|jQuery]]
* [[../JS/mw|mw]] MediaWiki-Objekt
* [[../Tutorial|Skin/Tutorial]] – Einstieg Skin-Programmierung
|bgh={{../../style|bgh}}
|linec={{../../style|linec}}
}}
* [[../CSS#Seinen eigenen Stil finden|CSS: Seinen eigenen Stil finden]]
* [[Hilfe:Symbolleisten]]
* [[../Tutorial|Tutorial]] – Einstieg in die Programmierung der Oberflächengestaltung
* [[mw:Manual:Gallery of user styles]] – Komplexe benutzerdefinierte Skins (englisch)
* [[:en:Wikipedia:Catalogue of CSS classes]] in der englischsprachigen Wikipedia

== Anmerkungen ==
<references />

[[Kategorie:Wikipedia:Technik/Skin|GUI]]

Wikipedia:Technik/Skin/GUI - Versionsgeschichte

imported>Lómelinde: kl. Anpassung für WP:Dark Mode möglichst Farbklassen verwenden + CodexIcon