Vorlage:Button/Doku

Aus Cowboy's Wiki
Wechseln zu: Navigation, Suche
Dokumentations-Unterseite Diese Seite ist die Dokumentations-Unterseite der Vorlage:Button.

Diese Vorlage erlaubt es auf einfache Weise (ohne HTML- oder CSS-Kenntnisse) 600X WIKIPEDIA LOGO.svgButtons zu erstellen, welche die Verlinkung beliebiger Inhalte in Cowboy's Wiki, 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 600X WIKIPEDIA LOGO.svgWikitext 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 = Cowboy's Wiki" um zum Artikel Cowboy's Wiki 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 600X WIKIPEDIA LOGO.svgWikitext 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]] für Checkmark.svg).
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=Cowboy's Wiki|Text=Link zum Artikel Cowboy's Wiki}}
    [Cowboy's Wiki Link zum Artikel Cowboy's Wiki]
    {{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|Cowboy's Wiki|Link zum Artikel Cowboy's Wiki}} oder
    {{Button|1=Cowboy's Wiki|2=Link zum Artikel Cowboy's Wiki}} oder
    {{Button|Link=Cowboy's Wiki|Text=Link zum Artikel Cowboy's Wiki}}
    [Cowboy's Wiki Link zur Cowboy's Wiki]
  • Tooltips:
    {{Button|Link=Cowboy's Wiki|Text=Cowboy's Wiki|Titel=Link zum Artikel Cowboy's Wiki in Cowboy's Wiki}}
    [Cowboy's Wiki Cowboy's Wiki] (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

Über den ersten Parameter von {{fullurl}} können URL Parameter and die URL angehängt werden:

Damit lässt sich nun einfach ein Button erstellen der den Server-Cache der aktuellen Seite löscht:
{{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 600X WIKIPEDIA LOGO.svgHilfe: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}}}  ]

    <div style="clear:both;" />

  • Bilder

    {{Button|…|Bild=[[File:checkmark.svg|18px]]}}
    [{{{1}}} {{#invoke:FileUtil|replaceParameter|1=Checkmark.svg|2=link|3=}}Button]

    {{Button|…|Text=|Bild=[[File:checkmark.svg|18px]]}}
    [{{{1}}} {{#invoke:FileUtil|replaceParameter|1=Checkmark.svg|2=link|3=}}]

    <div style="clear:both;" />

Gestaltung

  • Padding:

    {{Button|…|Padding=0px}}
    {{Button|…|Padding=10px}}
    {{Button|…|Padding=20px}}
    [Cowboy's Wiki Button] [Cowboy's Wiki Button] [Cowboy's Wiki Button]

    {{Button|…|Padding=20px 0px}}
    {{Button|…|Padding=0px 20px}}
    [Cowboy's Wiki Button] [Cowboy's Wiki 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}}
    [Cowboy's Wiki Button] [Cowboy's Wiki Button] [Cowboy's Wiki Button] [Cowboy's Wiki Button]

    <div style="clear:both;" />

  • 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