Benutzer:Patrick87/Button
[{{{1}}} ]
Diese Vorlage erlaubt es auf einfache Weise (ohne HTML- oder CSS-Kenntnisse) Buttons zu erstellen, welche die Verlinkung beliebiger Inhalte auf Wikipedia, sowie auf externen Seiten erlauben. Damit können z.B. Projekt- und Benutzerseiten visuell ansprechend präsentiert werden.
Zur grafischen Gestaltung stehen viele vordefinierte Icons zur Verfügung, alternativ können beliebige lokal gespeicherte oder auf Commons verfügbare Grafiken eingebunden werden. Weiterhin stellt die Vorlage drei verschiedene Farbschemata in mehreren Variationen zur Verfügung. Der Linktext kann beliebig mit Wikitext und/oder HTML/CSS gestaltet werden.
Parameter
[Bearbeiten | Quelltext bearbeiten]| Name | Erklärung |
|---|---|
| Link bzw. 1 | Gibt das Linkziel an. Erlaubt ist
|
| Text bzw. 2 | Der Text, den der Button enthalten soll. Der Linktext kann beliebig mit Wikitext und/oder HTML/CSS gestaltet werden. Es ist auch eine leere Angabe Text= möglich, wenn der Button nur ein Icon oder Bild enthalten soll.
|
| Titel (optional) |
Der Text, welcher als Tooltip erscheinen soll. Standardmäßig wird der Seitentitel (Wikilink) bzw. die URL (externer Link) angezeigt. |
| Icon (optional) |
Der Name eines vordefinierten Icons, welches auf dem Button erscheinen soll (z.B. "Icon = refresh" für )→ Liste der Icons |
| Bild (optional) |
Ein lokal oder auf Commons vorhandenes Bild, welches auf dem Button angezeigt werden soll. Die Einbindung erfolgt mit Wikisyntax (z.B. Bild = [[Datei:checkmark.svg|16px|link=]] für  ).Achtung: "link=" nicht vergessen, sonst kollidiert der zusätzliche Link mit dem Linkziel des Buttons!
|
| Farbe (optional) |
Gibt ein Farbschema für den Button vor (z.B. "Farbe = blau").Mögliche Werte sind rot/blau/grün, rot2/blau2/grün2, sowie rot3/blau3/grün3 (siehe Beispiele).
|
| Padding (optional) |
Gibt den Abstand zwischen Inhalt (Text, Bild, Icon) und dem Rand des Buttons an."Padding = 5px" ergibt fünf Pixel breite Ränder auf allen Seiten. Werden zwei Werte angegeben ("Padding = 5px 5px") gelten diese für oben/unten bzw. links/rechts, Werden vier Werte angegeben ("Padding = 5px 5px 5px 5px") gelten diese für oben, rechts, unten bzw. links
|
Beispiele
[Bearbeiten | Quelltext bearbeiten]Weitere Beispiele finden sich auf der Testseite.
Grundlegende Verwendung
[Bearbeiten | Quelltext bearbeiten]-
Wikilinks, Interwikilinks und externe Links:
{{Button|Link=Wikipedia|Text=Link zum Artikel Wikipedia}}
[Wikipedia ]
{{Button|Link=en:Wikipedia|Text=Link zum Artikel Wikipedia in der englischen Wikipedia}}
[en:Wikipedia ]
{{Button|Link=http://test.de|Text=Link auf http://test.de}}
-
Standardparameter
"Link"und"Text"können benannt und unbenannt sein:
{{Button|Wikipedia|Link zum Artikel Wikipedia}}oder
{{Button|1=Wikipedia|2=Link zum Artikel Wikipedia}}oder
{{Button|Link=Wikipedia|Text=Link zum Artikel Wikipedia}}
[Wikipedia ] -
Tooltips:
{{Button|Link=Wikipedia|Text=Wikipedia|Titel=Link zum Artikel Wikipedia in der deutschen Wikipedia}}
[Wikipedia ] (bitte über den Button hovern)
Fortgeschrittene Verwendung (URL-Parameter)
[Bearbeiten | Quelltext bearbeiten]Um URL-Parameter angeben zu können müssen auch Wikilinks in "externe" URLs umgewandelt werden. Diese können von Hand "zusammengebaut" werden, einfacher und zuverlässiger geht es aber mit der Parserfunktion {{fullurl}}.
Beispielsweise liefert
{{fullurl:Hauptseite}}die volle URL der Hauptseite://de.wikipedia.org/wiki/Hauptseite{{fullurl:{{FULLPAGENAME}}}}die volle URL der aktuellen Seite://de.wikipedia.org/wiki/Benutzer:Patrick87/Button
Über den ersten Parameter von {{fullurl}} können URL Parameter and die URL angehängt werden:
{{fullurl:Hauptseite|action=purge}}liefert//de.wikipedia.org/w/index.php?title=Hauptseite&action=purge{{fullurl:{{FULLPAGENAME}}|action=purge}}liefert//de.wikipedia.org/w/index.php?title=Benutzer:Patrick87/Button&action=purge
Damit lässt sich nun einfach ein Button erstellen der den Server-Cache der aktuellen Seite löscht:
{{Benutzer:Patrick87/Button|Link={{fullurl:{{FULLPAGENAME}}|action=purge}}|Text=Cache leeren|Icon=refresh}}
← dieser Button leert den Cache der aktuellen Seite
Weitere hilfreiche URL-Parameter die auf diese Weise mit Hilfe eines Buttons einfach zur Verfügung gestellt werden können sind auf Hilfe:URL-Parameter erklärt. Es ist zu beachten, dass URL-Parameter die Leerzeichen oder andere geschützte Zeichen wie & oder ? enthalten mit der Parserfunktion {{urlencode}} encodiert werden müssen!
Icons und Bilder
[Bearbeiten | Quelltext bearbeiten]-
Icons
{{Button|…|Icon=mail-closed}}
[{{{1}}} ]{{Button|…|Text=|Icon=mail-closed}}
[{{{1}}} ] -
Bilder
{{Button|…|Bild=[[File:checkmark.svg|18px|link=]]}}
[{{{1}}}
Button]
{{Button|…|Text=|Bild=[[File:checkmark.svg|18px|link=]]}}
[{{{1}}}]
Gestaltung
[Bearbeiten | Quelltext bearbeiten]-
Padding:
{{Button|…|Padding=0px}}
{{Button|…|Padding=10px}}
{{Button|…|Padding=20px}}
[Wikipedia ] [Wikipedia ] [Wikipedia ]{{Button|…|Padding=20px 0px}}
{{Button|…|Padding=0px 20px}}
[Wikipedia ] [Wikipedia ]{{Button|…|Padding=10px 0 0 0}}
{{Button|…|Padding=0 0 10px 0}}
{{Button|…|Padding=0 10px 0 0}}
{{Button|…|Padding=0 0 0 10px}}
[Wikipedia ] [Wikipedia ] [Wikipedia ] [Wikipedia ] -
Farbschemata:
{{Button|…|Farbe=(Farbname)}}
[{{{1}}} ] [{{{1}}} ] [{{{1}}} ]
[{{{1}}} ] [{{{1}}} ] [{{{1}}} ]
[{{{1}}} ] [{{{1}}} ] [{{{1}}} ]
Icons
[Bearbeiten | Quelltext bearbeiten]Mögliche Werte für den Parameter Icon:
- carat-1-n
- carat-1-ne
- carat-1-e
- carat-1-se
- carat-1-s
- carat-1-sw
- carat-1-w
- carat-1-nw
- carat-2-n-s
- carat-2-e-w
- triangle-1-n
- triangle-1-ne
- triangle-1-e
- triangle-1-se
- triangle-1-s
- triangle-1-sw
- triangle-1-w
- triangle-1-nw
- triangle-2-n-s
- triangle-2-e-w
- arrow-1-n
- arrow-1-ne
- arrow-1-e
- arrow-1-se
- arrow-1-s
- arrow-1-sw
- arrow-1-w
- arrow-1-nw
- arrow-2-n-s
- arrow-2-ne-sw
- arrow-2-e-w
- arrow-2-se-nw
- arrowstop-1-n
- arrowstop-1-e
- arrowstop-1-s
- arrowstop-1-w
- arrowthick-1-n
- arrowthick-1-ne
- arrowthick-1-e
- arrowthick-1-se
- arrowthick-1-s
- arrowthick-1-sw
- arrowthick-1-w
- arrowthick-1-nw
- arrowthick-2-n-s
- arrowthick-2-ne-sw
- arrowthick-2-e-w
- arrowthick-2-se-nw
- arrowthickstop-1-n
- arrowthickstop-1-e
- arrowthickstop-1-s
- arrowthickstop-1-w
- arrowreturnthick-1-w
- arrowreturnthick-1-n
- arrowreturnthick-1-e
- arrowreturnthick-1-s
- arrowreturn-1-w
- arrowreturn-1-n
- arrowreturn-1-e
- arrowreturn-1-s
- arrowrefresh-1-w
- arrowrefresh-1-n
- arrowrefresh-1-e
- arrowrefresh-1-s
- arrow-4
- arrow-4-diag
- extlink
- newwin
- refresh
- shuffle
- transfer-e-w
- transferthick-e-w
- folder-collapsed
- folder-open
- document
- document-b
- note
- mail-closed
- mail-open
- suitcase
- comment
- person
- trash
- locked
- unlocked
- bookmark
- tag
- home
- flag
- calculator
- cart
- pencil
- clock
- disk
- calendar
- zoomin
- zoomout
- search
- wrench
- gear
- heart
- star
- link
- cancel
- plus
- plusthick
- minus
- minusthick
- close
- closethick
- key
- lightbulb
- scissors
- clipboard
- copy
- contact
- image
- video
- script
- alert
- info
- notice
- help
- check
- bullet
- radio-off
- radio-on
- pin-w
- pin-s
- play
- pause
- seek-next
- seek-prev
- seek-end
- seek-first
- stop
- eject
- volume-off
- volume-on
- power
- signal-diag
- signal
- battery-0
- battery-1
- battery-2
- battery-3
- circle-plus
- circle-minus
- circle-close
- circle-triangle-e
- circle-triangle-s
- circle-triangle-w
- circle-triangle-n
- circle-arrow-e
- circle-arrow-s
- circle-arrow-w
- circle-arrow-n
- circle-zoomin
- circle-zoomout
- circle-check
- circlesmall-plus
- circlesmall-minus
- circlesmall-close
- squaresmall-plus
- squaresmall-minus
- squaresmall-close
- grip-dotted-vertical
- grip-dotted-horizontal
- grip-solid-vertical
- grip-solid-horizontal
- gripsmall-diagonal-se
- grip-diagonal-se