Benutzer:Patrick87/Button/Doku

Diese Seite ist die Dokumentations-Unterseite der Seite Benutzer:Patrick87/Button.

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

Name	Erklärung
Link bzw. 1	Gibt das Linkziel an. Erlaubt ist entweder ein Wikilink (ohne die doppelten Klammern [[…]]), z.B. einfach "Link = Wikipedia" um zum Artikel Wikipedia zu gelangen, oder ein externer Link (ohne die einfachen Klammern […]), z.B. einfach "Link = http://test.de" um auf http://test.de zu verlinken.
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

Weitere Beispiele finden sich auf der Testseite.

Grundlegende Verwendung

• Wikilinks, Interwikilinks und externe Links:
  {{Button|Link=Wikipedia|Text=Link zum Artikel Wikipedia}}
  [Wikipedia Link zum Artikel Wikipedia]
  {{Button|Link=en:Wikipedia|Text=Link zum Artikel Wikipedia in der englischen Wikipedia}}
  [en:Wikipedia Link zum Artikel Wikipedia in der englischen Wikipedia]
  {{Button|Link=http://test.de|Text=Link auf http://test.de}}
  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 Link zur Wikipedia]
• Tooltips:
  {{Button|Link=Wikipedia|Text=Wikipedia|Titel=Link zum Artikel Wikipedia in der deutschen Wikipedia}}
  [Wikipedia Wikipedia] (bitte über den Button hovern)

Fortgeschrittene Verwendung (URL-Parameter)

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/Doku

Ü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/Doku&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}}
 Cache leeren ← 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

• Icons
  

  {{Button|…|Icon=mail-closed}}
  [{{{1}}}  Button]

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

• Padding:
  

  {{Button|…|Padding=0px}}
{{Button|…|Padding=10px}}
{{Button|…|Padding=20px}}
  [Wikipedia Button] [Wikipedia Button] [Wikipedia Button]

  {{Button|…|Padding=20px 0px}}
{{Button|…|Padding=0px 20px}}
  [Wikipedia Button] [Wikipedia Button]

  {{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 Button] [Wikipedia Button] [Wikipedia Button] [Wikipedia Button]
• Farbschemata:
  {{Button|…|Farbe=(Farbname)}}
  [{{{1}}} rot] [{{{1}}} grün] [{{{1}}} blau]
  [{{{1}}} rot2] [{{{1}}} grün2] [{{{1}}} blau2 ]
  [{{{1}}} rot3] [{{{1}}} grün3] [{{{1}}} blau3]

Icons

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
•   print
•   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