Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Below is a screenshot of a basic resulting button :

The full syntax is :

[[{namespace:image|extra css}wiki page|**Title** of the link]]

Where :

• namespace:image is the location of the image to use in the media manager
• extra css is some css code to add to the button, or the name of a style defined with conf.styles (see below)
• wiki page is the targetted id page
• Title of the link is the name that will be displayed on the button, with formatting support ('\\' will break the line in the button, '**' for bold, etc.)

All fields are optional, so the minimal syntax is :

[[{}Simple button without image]]

You may configure some styles to use in your buttons without repeating all the css :

[[{conf.styles}style|css]]

Where :

• conf.styles is the keyword to set the styles
• style is the name of the style you want to set ; if ‘default’, it will be added to all buttons
• css is the css code you will assign to that style

You may then use the style in your button, example :

Style declaration :
[[{conf.styles}default|font-family: "Times New Roman", Times, serif;]]
[[{conf.styles}mystyle|color:green; width:15em;]]

Style use :
[[{|mystyle}Button in times new roman]]
[[{}Button in green and in times new roman]]

You may also add styles that will be available for all pages in the plugin section of the configuration page. You will have to add one line per style :

default|font-family: "Times New Roman", Times, serif;
mystyle|color:green; width:15em;

Note that the CSS part is a bit tricky due to the selectors used in the template CSS and the layout needed for the button. By default, the style of the links is not repeated (just external links icon). See comments in style.css file for more information.

You may also configure the target of the link with the use of conf.target :

[[{conf.target}style|target]]

Example:

[[{conf.target}default|_blank]]

A button is added to the toolbar to add the template button. Compatible with move plugin.

• If you experience display problems with Internet Explorer, please check the “Compatibility Mode” setting.

Feel free to contribute to this plugin: source on GitHub: https://github.com/rpeyron/plugin-button

Thank you to :

• Xavier Decuyper (toolbar button)
• lisps (global config, internal media link support, escaping of userinput)
• ThisNameIsNotAllowed (support for move plugin)

• 19/05/2013: Initial release
• 20/04/2014: Added target support (feature request from Andrew St Hilaire)
• 07/06/2014: Added formatting support in description link text (but not in page link section) (feature request from Willi Lethert)
• 30/08/2014: Added toolbar button (contribution from Xavier Decuyper) and fixed local anchor (bug reported by Andreas Kuzma)
• 06/09/2014: Refactored to add backlinks support (feature request from Schümmer Hans-Jürgen); you will need to update cache
• 28/04/2015: Refactored global config handling, add internal media link support, add escaping of userinput (contribution from lisps https://github.com/lisps/plugin-button)
• 05/08/2015: Merged lisps default style option and added french translation
• 12/09/2015 : Fixed PHP error with some versions
• 07/02/2016 : Applied PHP7 patch
• 19/11/2016 : Merged pull request from ThisNameIsNotAllowed adding support for move plugin
• 05/03/2017 : Merged PR form lisps fixing some move plugin bugs
• 28/07/2018 : Fixed bug with move plugin (Issue #5)
• 10/01/2019 : Documentation update (Issue #6)
• 07/03/2020 : Fixed PHP warning (Issue #9)
• 11/05/2020 : Improved CSS configurability & regex (Issue #10 and #12)

If you have any request, please add an issue to https://github.com/rpeyron/plugin-button/issues

You may also add requests below ; but note that I do not track changes on this page, so you should notify me by mail if you need a quick answer.

Older requests :

• For the plugin to recognize white space so buttons can all be the same size
  → The best way to do that is to add a 'width' in the style section : [[{buttons:fbreader.png|width: 25em}vlc|Bouton vlc]] ; if you want all your buttons with the same size, you may also want to modify default style : [[{conf.styles}default|color:green; width:15em;]]
• Button Color can be changed with a hex code
  → This can already be done by specifying the color in the style section : [[{buttons:fbreader.png|width: 25em; color: #20FE55; background-color: #7780F0;}color|Button with specific colors]]