CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="utf-8" /> <title>devel:toolbar [DokuWiki]</title> <meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="devel,toolbar"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="DokuWiki"/> <link rel="start" href="/"/> <link rel="contents" href="/devel:toolbar?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns=devel"/> <link rel="edit" title="Edit this page" href="/devel:toolbar?do=edit"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/devel:toolbar"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/devel:toolbar"/> <link rel="canonical" href="https://www.dokuwiki.org/devel:toolbar"/> <link rel="stylesheet" href="/lib/exe/css.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e"/> <link rel="alternate" hreflang="x-default" href="https://www.dokuwiki.org/devel:toolbar"/> <script >var NS='devel';var JSINFO = {"plugins":{"edittable":{"default columnwidth":""}},"id":"devel:toolbar","namespace":"devel","ACT":"show","useHeadingNavigation":0,"useHeadingContent":0};(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer="defer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" defer="defer"></script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e&lang=en" defer="defer"></script> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/lib/tpl/dokuwiki/images/favicon.ico" /> <link rel="apple-touch-icon" href="/lib/tpl/dokuwiki/images/apple-touch-icon.png" /> <meta name="verify-v1" content="OVxl3gsCv2MhZqh1cBQyl0JytWXSwXMjyvwc+4w3WtA=" /> <meta name="google-site-verification" content="YhTVK69hW94ZXUtc2zSLPxTkZKbZIn0zK67mz5WQB-E" />  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83791-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83791-1', { 'anonymize_ip': true }); </script> </head> <body> <div id="dokuwiki__site"><div id="dokuwiki__top" class="site dokuwiki mode_show tpl_dokuwiki showSidebar hasSidebar">  <header id="dokuwiki__header"><div class="pad group"> <div class="headings group"> <ul class="a11y skip"> <li><a href="#dokuwiki__content">skip to content</a></li> </ul> <h1 class="logo"><a href="/start" accesskey="h" title="Home [h]"><img src="/lib/tpl/dokuwiki/images/logo.png" width="64" height="64" alt="" /><span>DokuWiki</span></a></h1> <p class="claim">It's better when it's simple</p> </div> <div class="tools group">  <div id="dokuwiki__usertools"> <h3 class="a11y">User Tools</h3> <ul> <li class="action login"><a href="/devel:toolbar?do=login&sectok=" title="Log In" rel="nofollow"><span>Log In</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 17.25V14H3v-4h7V6.75L15.25 12 10 17.25M8 2h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-4h2v4h9V4H8v4H6V4a2 2 0 0 1 2-2z"/></svg></a></li> </ul> </div>  <div id="dokuwiki__sitetools"> <h3 class="a11y">Site Tools</h3> <form action="/start" method="get" role="search" class="search doku_form" id="dw__search" accept-charset="utf-8"><input type="hidden" name="do" value="search" /><input type="hidden" name="id" value="devel:toolbar" /><div class="no"><input name="q" type="text" class="edit" title="[F]" accesskey="f" placeholder="Search" autocomplete="on" id="qsearch__in" value="" /><button value="1" type="submit" title="Search">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> <div class="mobileTools"> <form action="/doku.php" method="get" accept-charset="utf-8"><div class="no"><input type="hidden" name="id" value="devel:toolbar" /><select name="do" class="edit quickselect" title="Tools"><option value="">Tools</option><optgroup label="Page Tools"><option value="edit">Edit this page</option><option value="revisions">Old revisions</option><option value="backlink">Backlinks</option></optgroup><optgroup label="Site Tools"><option value="recent">Recent Changes</option><option value="media">Media Manager</option><option value="index">Sitemap</option></optgroup><optgroup label="User Tools"><option value="login">Log In</option></optgroup></select><button type="submit">></button></div></form> </div> <ul> <li class="action recent"><a href="/devel:toolbar?do=recent" title="Recent Changes [r]" rel="nofollow" accesskey="r">Recent Changes</a></li><li class="action media"><a href="/devel:toolbar?do=media&ns=devel" title="Media Manager" rel="nofollow">Media Manager</a></li><li class="action index"><a href="/devel:toolbar?do=index" title="Sitemap [x]" rel="nofollow" accesskey="x">Sitemap</a></li> </ul> </div> </div>  <div class="breadcrumbs"> <div class="trace"><span class="bchead">Trace:</span> <span class="bcsep">•</span> <span class="curid"><bdi><a href="/devel:toolbar" class="breadcrumbs" title="devel:toolbar">toolbar</a></bdi></span></div> </div> <hr class="a11y" /> </div></header> <div class="wrapper group">  <nav id="dokuwiki__aside" aria-label="Sidebar"><div class="pad aside include group"> <h3 class="toggle">Sidebar</h3> <div class="content"><div class="group"> <div class="plugin_translation is-dropdown"><span class="title">Translations of this page<sup><a href="/localization" class="wikilink1" title="localization" data-wiki-id="localization">?</a></sup>: </span><ul><li class="span"><span class="wikilink1" title="English">English (en)</span></li><li class="a"><a class="wikilink2" title="|العربية" href="/ar:devel:toolbar">|العربية (ar)</a></li><li class="a"><a class="wikilink2" title="Català" href="/ca:devel:toolbar">Català (ca)</a></li><li class="a"><a class="wikilink2" title="Česky" href="/cs:devel:toolbar">Česky (cs)</a></li><li class="a"><a class="wikilink2" title="Dansk" href="/da:devel:toolbar">Dansk (da)</a></li><li class="a"><a class="wikilink2" title="Deutsch" href="/de:devel:toolbar">Deutsch (de)</a></li><li class="a"><a class="wikilink2" title="Ελληνικά" href="/el:devel:toolbar">Ελληνικά (el)</a></li><li class="a"><a class="wikilink2" title="Esperanto" href="/eo:devel:toolbar">Esperanto (eo)</a></li><li class="a"><a class="wikilink2" title="Español" href="/es:devel:toolbar">Español (es)</a></li><li class="a"><a class="wikilink2" title="فارسی" href="/fa:devel:toolbar">فارسی (fa)</a></li><li class="a"><a class="wikilink2" title="Français" href="/fr:devel:toolbar">Français (fr)</a></li><li class="a"><a class="wikilink2" title="עברית" href="/he:devel:toolbar">עברית (he)</a></li><li class="a"><a class="wikilink2" title="Magyar" href="/hu:devel:toolbar">Magyar (hu)</a></li><li class="a"><a class="wikilink2" title="Italiano" href="/it:devel:toolbar">Italiano (it)</a></li><li class="a"><a class="wikilink2" title="日本語" href="/ja:devel:toolbar">日本語 (ja)</a></li><li class="a"><a class="wikilink2" title="한국어" href="/ko:devel:toolbar">한국어 (ko)</a></li><li class="a"><a class="wikilink2" title="Lietuvių Kalba" href="/lt:devel:toolbar">Lietuvių Kalba (lt)</a></li><li class="a"><a class="wikilink2" title="Nederlands" href="/nl:devel:toolbar">Nederlands (nl)</a></li><li class="a"><a class="wikilink2" title="Norsk" href="/no:devel:toolbar">Norsk (no)</a></li><li class="a"><a class="wikilink2" title="Polski" href="/pl:devel:toolbar">Polski (pl)</a></li><li class="a"><a class="wikilink2" title="Português" href="/pt-br:devel:toolbar">Português (pt-br)</a></li><li class="a"><a class="wikilink2" title="Română" href="/ro:devel:toolbar">Română (ro)</a></li><li class="a"><a class="wikilink2" title="Русский" href="/ru:devel:toolbar">Русский (ru)</a></li><li class="a"><a class="wikilink2" title="Српски Језик" href="/sr:devel:toolbar">Српски Језик (sr)</a></li><li class="a"><a class="wikilink2" title="Svenska" href="/sv:devel:toolbar">Svenska (sv)</a></li><li class="a"><a class="wikilink2" title="ไทย" href="/th:devel:toolbar">ไทย (th)</a></li><li class="a"><a class="wikilink2" title="Українська" href="/uk:devel:toolbar">Українська (uk)</a></li><li class="a"><a class="wikilink2" title="中文" href="/zh:devel:toolbar">中文 (zh)</a></li><li class="a"><a class="wikilink2" title="繁體中文" href="/zh-tw:devel:toolbar">繁體中文 (zh-tw)</a></li></ul></div> <p> <strong>Learn about DokuWiki</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/features" class="wikilink1" title="features" data-wiki-id="features">Features</a> & <a href="/blogroll" class="wikilink1" title="blogroll" data-wiki-id="blogroll">reviews</a> </div> </li> <li class="level1"><div class="li"> <a href="/install" class="wikilink1" title="install" data-wiki-id="install">Installation guide</a></div> </li> <li class="level1"><div class="li"> <a href="/manual" class="wikilink1" title="manual" data-wiki-id="manual">User manual</a> & <a href="/wiki:syntax" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">syntax</a></div> </li> <li class="level1"><div class="li"> <a href="/changes" class="wikilink1" title="changes" data-wiki-id="changes">Release notes</a></div> </li> <li class="level1"><div class="li"> <a href="/faq" class="wikilink1" title="faq" data-wiki-id="faq">FAQ</a></div> </li> </ul> <p> <strong>Advanced Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/extensions" class="wikilink1" title="extensions" data-wiki-id="extensions">Extensions</a></div> </li> <li class="level1"><div class="li"> <a href="/development" class="wikilink1" title="development" data-wiki-id="development">Development manual</a></div> </li> </ul> <p> <strong>Corporate Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/faq:support" class="wikilink1" title="faq:support" data-wiki-id="faq:support">Get support</a></div> </li> <li class="level1"><div class="li"> <a href="/donate" class="wikilink1" title="donate" data-wiki-id="donate">Donations</a></div> </li> </ul> <p> <strong>Our Community</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/teams:getting_involved" class="wikilink1" title="teams:getting_involved" data-wiki-id="teams:getting_involved">Get involved</a></div> </li> <li class="level1"><div class="li"> <a href="/dokuinstall" class="wikilink1" title="dokuinstall" data-wiki-id="dokuinstall">Users</a></div> </li> <li class="level1"><div class="li"> <a href="http://forum.dokuwiki.org" class="urlextern" title="http://forum.dokuwiki.org">User forum</a></div> </li> <li class="level1"><div class="li"> <a href="/mailinglist" class="wikilink1" title="mailinglist" data-wiki-id="mailinglist">Development mailinglist</a></div> </li> </ul> <hr /> <p> Follow us on <a href="https://phpc.social/@dokuwiki" class="urlextern" title="https://phpc.social/@dokuwiki">Mastodon</a> and other <a href="/social" class="wikilink1" title="social" data-wiki-id="social">social networks</a>. </p> <p> <a href="/privacy" class="wikilink1" title="privacy" data-wiki-id="privacy">Our Privacy Policy</a> </p> </div></div> </div></nav>  <main id="dokuwiki__content"><div class="pad group"> <div class="pageId"><span>devel:toolbar</span></div> <div class="page group">   <div id="dw__toc" class="dw__toc"> <h3 class="toggle">Table of Contents</h3> <div> <ul class="toc"> <li class="level1"><div class="li"><a href="#the_toolbar">The Toolbar</a></div> <ul class="toc"> <li class="level2"><div class="li"><a href="#how_the_toolbar_is_built_and_cached">How the toolbar is built (and cached)</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#the_toolbar_array">The toolbar array</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#extending_the_toolbar">Extending the Toolbar...</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#using_php">...using PHP</a></div></li> <li class="level3"><div class="li"><a href="#using_javascript">...using JavaScript</a></div></li> <li class="level3"><div class="li"><a href="#dynamic_data">Dynamic Data</a></div></li> <li class="level3"><div class="li"><a href="#tips">Tips</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#css_spritemap">CSS Spritemap</a></div></li> </ul></li> </ul> </div> </div>  <h1 class="sectionedit1" id="the_toolbar">The Toolbar</h1> <div class="level1"> <p> The <a href="/toolbar" class="wikilink1" title="toolbar" data-wiki-id="toolbar">toolbar</a> makes DokuWiki easy to use even for novice users. Sometimes you may want to extend the toolbar with another button. This page will tell you a bit about how the toolbar works and how to extend it. </p> </div> <div class="secedit editbutton_section editbutton_1"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[The Toolbar] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="the_toolbar" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1-241" /><button type="submit" title="The Toolbar">Edit</button></div></form></div> <h2 class="sectionedit2" id="how_the_toolbar_is_built_and_cached">How the toolbar is built (and cached)</h2> <div class="level2"> <p> The toolbar is completely built through <a href="/devel:javascript" class="wikilink1" title="devel:javascript" data-wiki-id="devel:javascript">JavaScript</a>. Which buttons the toolbar contains, is read from an array called <code>toolbar</code>. This array is initialized in <code>/lib/exe/js.php</code>. This is simply done by converting the PHP array structure defined in <code><strong>inc/toolbar.php</strong></code> to JavaScript using JSON. </p> <p> This means the toolbar gets cached like any other JavaScript in DokuWiki. Whenever you do changes affecting the toolbar you should invalidate DokuWiki's <a href="/devel:caching" class="wikilink1" title="devel:caching" data-wiki-id="devel:caching">cache</a> (eg. <code>touch conf/local.php</code>) and refresh your browser cache while editing a page (Hit Shift/Ctrl-Reload and ignore the post warning). </p> </div> <div class="secedit editbutton_section editbutton_2"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[How the toolbar is built (and cached)] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="how_the_toolbar_is_built_and_cached" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="242-905" /><button type="submit" title="How the toolbar is built (and cached)">Edit</button></div></form></div> <h3 class="sectionedit3" id="the_toolbar_array">The toolbar array</h3> <div class="level3"> <p> The mentioned <code>toolbar</code> array contains one entry per button. The order of the entries defines the position of the button, with the first entry defining the most left button. </p> <p> Each entry is an associative array itself, defining the behavior of the button. The following table explains the available fields for the entries. </p> <div class="table sectionedit4"><table class="inline"> <thead> <tr class="row0"> <th class="col0"> Name </th><th class="col1"> Description </th> </tr> </thead> <tr class="row1"> <td class="col0"> <code>type</code> </td><td class="col1"> button action type: <br/> <code>format</code> ⇒ wiki markup <br/> <code>mediapopup</code> ⇒ popup window <br/> <code>picker</code> ⇒ picker menu <br/> <code>signature</code> ⇒ signature generation and insertion <br/> e.g. <code>yourtype</code> ⇒ looks for your custom action function <code>addBtnActionYourtype</code></td> </tr> <tr class="row2"> <td class="col0"> <code>title</code> </td><td class="col1"> title of the button, displayed on mouseover </td> </tr> <tr class="row3"> <td class="col0"> <code>icon</code> </td><td class="col1"> icon to use for the button (based in <code>DOKUBASE/lib/images/toolbar/</code>)</td> </tr> <tr class="row4"> <td class="col0"> <code>key</code> </td><td class="col1"> (optional) Hotkey for the button, a value of <code>n</code> here would result in the button being pressed when the user presses <code>ALT + n</code> in his browser. (See also the <a href="/accesskeys" class="wikilink1" title="accesskeys" data-wiki-id="accesskeys">access keys</a> used by DokuWiki) </td> </tr> <tr class="row5"> <td class="col0"> <code>class</code> </td><td class="col1"> (optional) classname for styling buttons </td> </tr> <tr class="row6"> <td class="col0 leftalign"> <code>id</code> </td><td class="col1"> (optional) id added to button, and with a postfix to icon e.g. <code><id>_ico</code> </td> </tr> <tr class="row7"> <th class="col0 leftalign" colspan="2"> <code>format</code> type specific parameters </th> </tr> <tr class="row8"> <td class="col0"> <code>open</code> </td><td class="col1"> opening tag of wiki markup to insert, cursor will be placed between opening and closing tag </td> </tr> <tr class="row9"> <td class="col0"> <code>sample</code> </td><td class="col1"> example input to be placed between opening and closing tag, will be automatically selected to be overwritten on first input </td> </tr> <tr class="row10"> <td class="col0"> <code>close</code> </td><td class="col1"> closing tag of the wiki markup to insert, cursor will be placed between opening and closing tag </td> </tr> <tr class="row11"> <td class="col0"> <code>insert</code> </td><td class="col1"> wiki markup to insert (for full substitutions) </td> </tr> <tr class="row12"> <th class="col0 leftalign" colspan="2"> <code>mediapopup</code> type specific parameters </th> </tr> <tr class="row13"> <td class="col0"> <code>url</code> </td><td class="col1"> <abbr title="Uniform Resource Locator">URL</abbr> of the popup to open </td> </tr> <tr class="row14"> <td class="col0"> <code>name</code> </td><td class="col1"> internal name of the popup to open </td> </tr> <tr class="row15"> <td class="col0"> <code>options</code> </td><td class="col1"> additional options for the popup window (comma-separated name-value-pairs valid as parameters for the JS function <code>window.open</code> </td> </tr> <tr class="row16"> <th class="col0 leftalign" colspan="2"> <code>picker</code> type specific parameters </th> </tr> <tr class="row17"> <td class="col0"> <code>list</code> </td><td class="col1"> list of insertable items. can either be an associative array (with the item to insert as the key and an image located in <code>icobase</code> to use as the value) or just a simple array (with the text-items to insert directly displayed) </td> </tr> <tr class="row18"> <td class="col0"> <code>icobase</code> </td><td class="col1"> subdirectory for item images (based in <code>DOKUBASE/lib/images/</code>). </td> </tr> </table></div> <div class="secedit editbutton_table editbutton_4"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[Table] " /><input type="hidden" name="target" value="table" /><input type="hidden" name="hid" value="table" /><input type="hidden" name="range" value="1260-3183" /><button type="submit" title="Table">Edit</button></div></form></div> <p> A look at <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=&path=inc%20toolbar.php" class="interwiki plugin_xref" title="view definition for inc/toolbar.php">inc/toolbar.php</a> should give you enough examples of what can be defined. Because the array is simply translated from PHP to JavaScript, the above description applies to the PHP array as well as to the resulting JavaScript array from which the toolbar is finally built. </p> </div> <div class="secedit editbutton_section editbutton_3"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[The toolbar array] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="the_toolbar_array" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="906-3472" /><button type="submit" title="The toolbar array">Edit</button></div></form></div> <h2 class="sectionedit5" id="extending_the_toolbar">Extending the Toolbar...</h2> <div class="level2"> <p> The toolbar can be customized in two ways - via JavaScript or PHP. Which method you choose basically depends on your skills and familiarity with the language at hand. For the PHP approach, you will always need to write a plugin, the JavaScript method can be used from a <a href="/devel:javascript" class="wikilink1" title="devel:javascript" data-wiki-id="devel:javascript">userscript</a> as well. </p> </div> <div class="secedit editbutton_section editbutton_5"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[Extending the Toolbar...] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="extending_the_toolbar" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="3473-3816" /><button type="submit" title="Extending the Toolbar...">Edit</button></div></form></div> <h3 class="sectionedit6" id="using_php">...using PHP</h3> <div class="level3"> <p> To extend the toolbar from your plugin you need to write a <a href="/devel:action_plugins" class="wikilink1" title="devel:action_plugins" data-wiki-id="devel:action_plugins">Action Plugin</a> which registers as a handler for the <a href="/devel:event:toolbar_define" class="wikilink1" title="devel:event:toolbar_define" data-wiki-id="devel:event:toolbar_define">TOOLBAR_DEFINE</a> event with an AFTER advice. Your handler function will receive the toolbar array as described earlier. </p> <p> Create your button structure according to the above information and add it to the received event data.-function in <code>inc/toolbar.php</code>. </p> <p> Example: </p> <pre class="code php"><span class="kw2">function</span> register<span class="br0">(</span>Doku_Event_Handler <span class="re0">$controller</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$controller</span><span class="sy0">-></span><span class="me1">register_hook</span><span class="br0">(</span><span class="st_h">'TOOLBAR_DEFINE'</span><span class="sy0">,</span> <span class="st_h">'AFTER'</span><span class="sy0">,</span> <span class="re0">$this</span><span class="sy0">,</span> <span class="st_h">'insert_button'</span><span class="sy0">,</span> <a href="http://www.php.net/array"><span class="kw3">array</span></a> <span class="br0">(</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span>   <span class="co1">// ...</span>   <span class="co4">/** * Inserts a toolbar button */</span> <span class="kw2">function</span> insert_button<span class="br0">(</span>Doku_Event <span class="re0">$event</span><span class="sy0">,</span> <span class="re0">$param</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$event</span><span class="sy0">-></span><span class="me1">data</span><span class="br0">[</span><span class="br0">]</span> <span class="sy0">=</span> <a href="http://www.php.net/array"><span class="kw3">array</span></a> <span class="br0">(</span> <span class="st_h">'type'</span> <span class="sy0">=></span> <span class="st_h">'format'</span><span class="sy0">,</span> <span class="st_h">'title'</span> <span class="sy0">=></span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">getLang</span><span class="br0">(</span><span class="st_h">'abutton'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st_h">'icon'</span> <span class="sy0">=></span> <span class="st_h">'../../plugins/example/abutton.png'</span><span class="sy0">,</span> <span class="st_h">'open'</span> <span class="sy0">=></span> <span class="st_h">'<abutton>'</span><span class="sy0">,</span> <span class="st_h">'close'</span> <span class="sy0">=></span> <span class="st_h">'</abutton>'</span><span class="sy0">,</span> <span class="st_h">'block'</span> <span class="sy0">=></span> <span class="kw4">false</span><span class="sy0">,</span> <span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> Try to use <a href="/plugin:custombuttons" class="wikilink1" title="plugin:custombuttons" data-wiki-id="plugin:custombuttons">custombuttons</a> </p> </div> <div class="secedit editbutton_section editbutton_6"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[...using PHP] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="using_php" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="3817-4800" /><button type="submit" title="...using PHP">Edit</button></div></form></div> <h3 class="sectionedit7" id="using_javascript">...using JavaScript</h3> <div class="level3"> <p> Adding a button using <a href="/devel:javascript" class="wikilink1" title="devel:javascript" data-wiki-id="devel:javascript">JavaScript</a> is similar to doing it in PHP. You just extend the <code>toolbar</code> array. </p> <p> Because user and plugin scripts will be loaded on all requests, but the toolbar is initialized on editing only, you need to make sure the toolbar array does exist first. Do this by checking if <code>window.toolbar</code> is defined. If it is, you can add your button at the end of the array. </p> <pre class="code javascript"><span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> window.<span class="me1">toolbar</span> <span class="sy0">!==</span> <span class="st0">'undefined'</span><span class="br0">)</span> <span class="br0">{</span> toolbar<span class="br0">[</span>toolbar.<span class="me1">length</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">{</span> type<span class="sy0">:</span> <span class="st0">"format"</span><span class="sy0">,</span> title<span class="sy0">:</span> <span class="st0">"A Button"</span><span class="sy0">,</span> icon<span class="sy0">:</span> <span class="st0">"abutton.png"</span><span class="sy0">,</span> <span class="co1">// located in lib/images/toolbar/</span> key<span class="sy0">:</span> <span class="st0">""</span><span class="sy0">,</span> open<span class="sy0">:</span> <span class="st0">"<abutton>"</span><span class="sy0">,</span> sample<span class="sy0">:</span> <span class="st0">"Text between the tags"</span><span class="sy0">,</span> close<span class="sy0">:</span> <span class="st0">"</abutton>"</span> <span class="br0">}</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> Here is another example defining a picker dropdown (assumes plugin context): </p> <pre class="code javascript"><span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> window.<span class="me1">toolbar</span> <span class="sy0">!==</span> <span class="st0">'undefined'</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">var</span> notes_arr <span class="sy0">=</span> <span class="br0">{</span> <span class="co1">//'insertion string as key' : '[path/]filename.extension of the icon'</span> <span class="st0">'<note></note><span class="es0">\\</span>n'</span><span class="sy0">:</span> <span class="st0">'note.png'</span><span class="sy0">,</span> <span class="st0">'<note tip></note><span class="es0">\\</span>n'</span><span class="sy0">:</span> <span class="st0">'tip.png'</span><span class="sy0">,</span> <span class="st0">'<note important></note><span class="es0">\\</span>n'</span><span class="sy0">:</span> <span class="st0">'important.png'</span><span class="sy0">,</span> <span class="st0">'<note warning></note><span class="es0">\\</span>n'</span><span class="sy0">:</span> <span class="st0">'warning.png'</span> <span class="br0">}</span><span class="sy0">;</span>   toolbar<span class="br0">[</span>toolbar.<span class="me1">length</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">{</span> type<span class="sy0">:</span> <span class="st0">"picker"</span><span class="sy0">,</span> title<span class="sy0">:</span> LANG.<span class="me1">plugins</span>.<span class="me1">note</span>.<span class="me1">note_tb_title</span><span class="sy0">,</span> <span class="co1">// localisation</span> icon<span class="sy0">:</span> <span class="st0">'../../plugins/note/images/toolbar.png'</span><span class="sy0">,</span> <span class="co1">//where in lib/images/toolbar/ the images are located</span> key<span class="sy0">:</span> <span class="st0">"n"</span><span class="sy0">,</span> <span class="co1">//access key</span> list<span class="sy0">:</span> notes_arr<span class="sy0">,</span> icobase<span class="sy0">:</span> <span class="st0">"../plugins/note/images/toolbar"</span> <span class="co1">// subdir of lib/images/ where images can be found.</span> <span class="br0">}</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> You can register a simple global onclick function for your button by sticking to the naming convention <code>tb_<yourButtonType></code>. Here is an example for the <code>insert</code> type from <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=&path=lib%20scripts%20toolbar.js" class="interwiki plugin_xref" title="view definition for lib/scripts/toolbar.js">lib/scripts/toolbar.js</a> </p> <pre class="code javascript"><span class="kw1">function</span> tb_insert<span class="br0">(</span>btn<span class="sy0">,</span> props<span class="sy0">,</span> edid<span class="br0">)</span> <span class="br0">{</span> insertAtCarret<span class="br0">(</span>edid<span class="sy0">,</span>fixtxt<span class="br0">(</span>props.<span class="me1">insert</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> pickerClose<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> Some notes: </p> <ul> <li class="level1"><div class="li"> Be aware of the default locations of the images: <code>lib/images/toolbar/</code> and <code>lib/images/</code></div> </li> <li class="level1"><div class="li"> The available options for access keys depends on the <a href="/accesskeys" class="wikilink1" title="accesskeys" data-wiki-id="accesskeys">access keys</a> used by DokuWiki and the whether they are reserved by a browser or operation system as short cut. There are many differences.</div> </li> <li class="level1"><div class="li"> More about <a href="/devel:localization#javascript_localization" class="wikilink1" title="devel:localization" data-wiki-id="devel:localization">javascript localization</a></div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_7"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[...using JavaScript] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="using_javascript" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="4801-7168" /><button type="submit" title="...using JavaScript">Edit</button></div></form></div> <h3 class="sectionedit8" id="dynamic_data">Dynamic Data</h3> <div class="level3"> <p> The above methods work well for adding static buttons that add static data. When you need to do something more dynamic like adding the current date, you can not simply extend the <code>toolbar</code> array. Instead, you need to dynamically add your button into the DOM using <a href="/devel:javascript" class="wikilink1" title="devel:javascript" data-wiki-id="devel:javascript">JavaScript</a>. </p> <p> The files <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=&path=lib%20scripts%20edit.js" class="interwiki plugin_xref" title="view definition for lib/scripts/edit.js">lib/scripts/edit.js</a>, <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=&path=lib%20scripts%20toolbar.js" class="interwiki plugin_xref" title="view definition for lib/scripts/toolbar.js">lib/scripts/toolbar.js</a> and <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=&path=lib%20scripts%20linkwiz.js" class="interwiki plugin_xref" title="view definition for lib/scripts/linkwiz.js">lib/scripts/linkwiz.js</a> contains some useful functions to help you with this. </p> <p> When adding to the <code>toolbar</code> array you must set a custom value for <code>type</code>. You must use characters that are valid in a function name and should capitalize on the first character. When the toolbar is constructed it looks at the value of <code>type</code> and appends it to the string <code>addBtnAction</code> before calling your code. So if you set <code>type</code> to <code>Click</code> the toolbar will call <code>addBtnActionClick</code>. This is an important note because if two plugins use the same <code>type</code> they will conflict with each other and cause strange behavior (such as both buttons doing the exact same thing). </p> <p> The returned string is “the id for in aria-control”. This is explained further in <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh767301.aspx" class="urlextern" title="http://msdn.microsoft.com/en-us/library/windows/apps/hh767301.aspx">Accessible Rich Internet Applications</a>. </p> <p> Here is an example partly from the toolbar picker: </p> <pre class="code javascript"><span class="coMULTI">/** * With the first function we create a new button type called Click * * the function name must be addBtnAction<Your type name> * in our case it is addBtnActionClick * * in the other function we simply use the simple toolbar method with the new type * * you can easily extend it to complex scripts like the link wizard etc */</span>   <span class="coMULTI">/** * Add button action for your toolbar button * * @param {jQuery} $btn Button element to add the action to * @param {Array} props Associative array of button properties * @param {string} edid ID of the editor textarea * @return {string} If button should be appended return the id for in aria-controls, * otherwise an empty string */</span> <span class="kw1">function</span> addBtnActionClick<span class="br0">(</span>$btn<span class="sy0">,</span> props<span class="sy0">,</span> edid<span class="br0">)</span> <span class="br0">{</span> <span class="co1">// initialize stuff if required</span> <span class="co1">// ...</span>   $btn.<span class="me1">click</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> <span class="co1">// your click handler</span> alert<span class="br0">(</span><span class="st0">'hey you clicked me'</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>   <span class="kw1">return</span> <span class="st0">'click'</span><span class="sy0">;</span> <span class="br0">}</span>   <span class="co1">// add a new toolbar button, but first check if there is a toolbar</span> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> window.<span class="me1">toolbar</span> <span class="sy0">!==</span> <span class="st0">'undefined'</span><span class="br0">)</span> <span class="br0">{</span> window.<span class="me1">toolbar</span><span class="br0">[</span>window.<span class="me1">toolbar</span>.<span class="me1">length</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">{</span> type<span class="sy0">:</span> <span class="st0">"Click"</span><span class="sy0">,</span> <span class="co1">// we have a new type that links to the function</span> title<span class="sy0">:</span> <span class="st0">"Hey Click me!"</span><span class="sy0">,</span> icon<span class="sy0">:</span> <span class="st0">"../../plugins/click/clickme.png"</span> <span class="br0">}</span><span class="sy0">;</span> <span class="br0">}</span></pre> </div> <div class="secedit editbutton_section editbutton_8"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[Dynamic Data] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="dynamic_data" /><input type="hidden" name="codeblockOffset" value="4" /><input type="hidden" name="range" value="7169-9789" /><button type="submit" title="Dynamic Data">Edit</button></div></form></div> <h3 class="sectionedit9" id="tips">Tips</h3> <div class="level3"> <ul> <li class="level1"><div class="li"> If you don't want to append your button at the end of the toolbar, you just need to insert your data into the <code>toolbar</code> array at the position where you want your button, shifting the other buttons to the right.</div> </li> <li class="level1"><div class="li"> There are some <a href="/devel:javascript#predefined_global_variables" class="wikilink1" title="devel:javascript" data-wiki-id="devel:javascript">predefined global variables</a> available which you can access from your Javascript. For example JSINFO contains the page id and namespace, usage: <code>JSINFO.namespace</code>. This might be handy when doing some more dynamic stuff.</div> </li> <li class="level1"><div class="li"> <strong>Important</strong>: If the button does not appear, expire the cache of your DokuWiki by saving your config in the Config Manager or touching the <code>conf/local.php</code> of your wiki AND delete your browser cache (Ctrl+F5 or Ctrl+R)! Then reload the editor page and your button should appear.</div> </li> </ul> </div> <h4 id="removing_buttons">Removing Buttons</h4> <div class="level4"> <p> If you want to remove some of the toolbar buttons, you can do so by adding the following code into <code>/conf/userscript.js</code>. Note that this is not in any function, simply append this code to the end of the file: </p> <dl class="code"> <dt><a href="/_export/code/devel:toolbar?codeblock=5" title="Download Snippet" class="mediafile mf_js">/conf/userscript.js</a></dt> <dd><pre class="code javascript"><span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> window.<span class="me1">toolbar</span> <span class="sy0">!==</span> <span class="st0">'undefined'</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">var</span> blacklist <span class="sy0">=</span> <span class="br0">[</span><span class="st0">"Bold Text"</span><span class="sy0">,</span> <span class="st0">"Italic Text"</span><span class="sy0">,</span> <span class="st0">"Underlined Text"</span><span class="sy0">,</span> <span class="st0">"Monospaced Text"</span><span class="sy0">,</span> <span class="st0">"Strike-through Text"</span><span class="sy0">,</span> <span class="st0">"Same Level Headline"</span><span class="sy0">,</span> <span class="st0">"Lower Headline"</span><span class="sy0">,</span> <span class="st0">"Higher Headline"</span><span class="sy0">,</span> <span class="st0">"Select Headline"</span><span class="sy0">,</span> <span class="st0">"Internal Link"</span><span class="sy0">,</span> <span class="st0">"External Link"</span><span class="sy0">,</span> <span class="st0">"Horizontal Rule"</span><span class="sy0">,</span> <span class="st0">"Add Images and other files (opens in a new window)"</span><span class="sy0">,</span> <span class="st0">"Smileys"</span><span class="sy0">,</span> <span class="st0">"Special Chars"</span><span class="sy0">,</span> <span class="st0">"Insert Signature"</span><span class="br0">]</span><span class="sy0">;</span> window.<span class="me1">toolbar</span> <span class="sy0">=</span> window.<span class="me1">toolbar</span>.<span class="me1">filter</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span>elem<span class="br0">)</span><span class="br0">{</span> <span class="kw1">return</span> jQuery.<span class="me1">inArray</span><span class="br0">(</span>elem.<span class="me1">title</span><span class="sy0">,</span> blacklist<span class="br0">)</span> <span class="sy0">===</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">;</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span></pre> </dd></dl> <p> This is from my personal wiki where I removed almost all the buttons. You can figure out what the title of your button is by running the following snippet in a javascript console: </p> <pre class="code javascript"><span class="kw1">for</span> <span class="br0">(</span>i <span class="kw1">in</span> window.<span class="me1">toolbar</span><span class="br0">)</span> <span class="br0">{</span> console.<span class="me1">log</span><span class="br0">(</span>toolbar<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">title</span><span class="br0">)</span><span class="br0">}</span></pre> <p> Then take the string and append it to the 'blacklist' array in the code. </p> <p> See also the <a href="/plugin:toolbuttondel" class="wikilink1" title="plugin:toolbuttondel" data-wiki-id="plugin:toolbuttondel">toolbuttondel</a> plugin for removing toolbar items. </p> </div> <div class="secedit editbutton_section editbutton_9"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[Tips] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="tips" /><input type="hidden" name="codeblockOffset" value="5" /><input type="hidden" name="range" value="9790-11784" /><button type="submit" title="Tips">Edit</button></div></form></div> <h2 class="sectionedit10" id="css_spritemap">CSS Spritemap</h2> <div class="level2"> <p> If you need to reduce the number of server requests for downloading micro-icons, you can use the following style fix.<br/> </p> <ol> <li class="level1 node"><div class="li"> 15 icons of the 20 in the <code>/lib/images/toolbar/</code> folder are used in a constant order and can be combined into a vertical ribbon named <strong>spritemap</strong>.</div> <ol> <li class="level2"><div class="li"> You can take the finished spritemap <a href="https://comicslate.org/lib/images/toolbar/toolbar.png" class="urlextern" title="https://comicslate.org/lib/images/toolbar/toolbar.png">here</a> and put it in <code>/lib/images/toolbar/</code> named as <code>toolbar.png</code>.</div> </li> </ol> </li> <li class="level1 node"><div class="li"> <abbr title="Cascading Style Sheets">CSS</abbr> used to show a certain point on spritemap.</div> <ol> <li class="level2"><div class="li"> Add the following <abbr title="Cascading Style Sheets">CSS</abbr> rules to your local style file <code>/conf/userstyle.less</code> or template's style file <code>/lib/tpl/<name>/css/design.less</code>:</div> </li> </ol> </li> </ol> <pre class="code css"><span class="re0">#tool__bar</span> <span class="br0">{</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">1</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">3</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">4</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">5</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">6</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">7</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">8</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">9</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">10</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">11</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">12</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">13</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">14</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">15</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw3">url</span><span class="br0">(</span><span class="co2">/lib/images/toolbar/toolbar.png</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">7px</span> <span class="re3">3px</span> <span class="re3">3px</span><span class="sy0">;</span> <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span> img <span class="br0">{</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="br0">}</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">1</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">2</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-16px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">3</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-32px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">4</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-48px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">5</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-64px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">6</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-80px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">7</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-96px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">8</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-112px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">9</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-128px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">10</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-144px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">11</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-160px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">12</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-176px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">13</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-192px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">14</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-208px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">button</span><span class="sy0">:</span><span class="kw5">nth-of-type</span><span class="br0">(</span><span class="nu0">15</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-224px</span><span class="sy0">;</span> <span class="br0">}</span> <span class="br0">}</span></pre> <p> Maybe one day this fix will be obsolete due to the introduction of spritemap in the Dokuwiki. </p> </div> <div class="secedit editbutton_section editbutton_10"><form class="button btn_secedit" method="post" action="/devel:toolbar"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1690913306" /><input type="hidden" name="summary" value="[CSS Spritemap] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="css_spritemap" /><input type="hidden" name="codeblockOffset" value="7" /><input type="hidden" name="range" value="11785-" /><button type="submit" title="CSS Spritemap">Edit</button></div></form></div>  </div> <div class="docInfo"><bdi>devel/toolbar.txt</bdi> · Last modified: <time datetime="2023-08-01T20:08:26+0200">2023-08-01 20:08</time> by <bdi>annda</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Page Tools</h3> <div class="tools"> <ul> <li class="edit"><a href="/devel:toolbar?do=edit" title="Edit this page [e]" rel="nofollow" accesskey="e"><span>Edit this page</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg></a></li><li class="revs"><a href="/devel:toolbar?do=revisions" title="Old revisions [o]" rel="nofollow" accesskey="o"><span>Old revisions</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/devel:toolbar?do=backlink" title="Backlinks" rel="nofollow"><span>Backlinks</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Back to top [t]" rel="nofollow" accesskey="t"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Except where otherwise noted, content on this wiki is licensed under the following license: <bdi><a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license" class="urlextern">CC Attribution-Share Alike 4.0 International</a></bdi></div> <div class="buttons"> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license"><img src="/lib/images/license/button/cc-by-sa.png" alt="CC Attribution-Share Alike 4.0 International" /></a> <a href="https://www.dokuwiki.org/donate" title="Donate" ><img src="/lib/tpl/dokuwiki/images/button-donate.gif" width="80" height="15" alt="Donate" /></a> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> <div style="margin-top: 2em; font-size:90%" class="dokuwiki"><div style="float:right"><a href="http://www.splitbrain.org/personal#imprint" style="float:right; text-decoration: none; color:#333">Imprint</a></div></div> <style type="text/css"> @media screen { body { padding-top: 30px; } #global__header { position: absolute; top: 0; left: 0; text-align: left; vertical-align: middle; line-height: 1.5; background-color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 5px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } #global__header h2 { position: absolute; left: -99999em; top: 0; overflow: hidden; display: inline; } #global__header ul, #global__header li { margin: 0; padding: 0; list-style: none; display: inline; line-height: 1.5; } #global__header a { color: #bbb; text-decoration: none; margin-right: 20px; font-size: 14px; font-weight: normal; } #global__header a:hover, #global__header a:active, #global__header a:focus { color: #fff; text-decoration: underline; } #global__header form { float: right; margin: 0 0 0 20px; } #global__header input { background-color: #333; background-image: none; border: 1px solid #bbb; color: #fff; box-shadow: none; border-radius: 2px; margin: 0; line-height: normal; padding: 1px 0 1px 0; height: auto; } #global__header input.button { border: none; color: #bbb; } #global__header input.button:hover, #global__header input.button:active, #global__header input.button:focus { color: #fff; text-decoration: underline; } } /* /@media */ @media only screen and (min-width: 601px) { /* changes specific for www.dokuwiki.org */ #dokuwiki__header { padding-top: 3em; } #dokuwiki__usertools { top: 3em; } /* changes specific for bugs.dokuwiki.org */ div#container div#showtask { top: 40px; } } /* /@media */ @media only screen and (max-width: 600px) { body { padding-top: 0; } #global__header { position: static; white-space: normal; overflow: auto; } #global__header form { float: none; display: block; margin: 0 0 .4em; } } /* /@media */ @media print { #global__header { display: none; } } /* /@media */ </style> <div id="global__header"> <h2>Global DokuWiki Links</h2> <form method="get" action="https://search.dokuwiki.org/" target="_top"> <input type="text" name="q" title="Search all DokuWiki sites at once" class="input" /> <input type="submit" title="Search all DokuWiki sites at once" value="Search" class="button" /> </form> <ul> <li><a href="https://download.dokuwiki.org" title="Download the latest release" target="_top">Download</a></li> <li><a href="https://www.dokuwiki.org" title="Read the DokuWiki documentation" target="_top">Wiki</a></li> <li><a href="https://forum.dokuwiki.org" title="Ask questions in the DokuWiki forum" target="_top">Forum</a></li> <li><a href="https://irc.dokuwiki.org" title="Check IRC chat logs or join the chat" target="_top">IRC</a></li> <li><a href="https://github.com/splitbrain/dokuwiki/issues" title="Report and track bugs" target="_top">Bugs</a></li> <li><a href="https://translate.dokuwiki.org/" title="Help translating the DokuWiki interface" target="_top">Translate</a></li> <li><a href="https://github.com/splitbrain/dokuwiki" title="Access the most recent git commits" target="_top">Git</a></li> <li><a href="https://xref.dokuwiki.org/reference/dokuwiki/" title="Cross-Reference of the DokuWiki source code" target="_top">XRef</a></li> <li><a href="https://codesearch.dokuwiki.org/" title="Search through the sources of DokuWiki, plugins and templates" target="_top">Code Search</a></li> </ul> </div>  </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=devel%3Atoolbar&1743124236" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>