Autopatrolled, Editors
8,718
edits
Difference between revisions of "User:King of Herdaz/Toolbar customization"
User:King of Herdaz/Toolbar customization (edit)
Revision as of 00:20, 24 November 2021
, 2 years agotweaks
m |
m (tweaks) |
||
|
=== Premade Buttons ===
Buttons are the simplest type of element in the toolbar. Buttons appear in the toolbar as icons and execute one [[#
The buttons presented here will be added to the left side of the <code>main</code> section of your toolbar (which is the top row that is always showing).
=== Premade Dropdowns ===
Dropdowns are lists of options that drop down (hence the name) from the toolbar when your cursor passes over its spot on the toolbar. Each option, when clicked, performs an [[#
The dropdowns presented here will be added to the <code>advanced</code> section of your toolbar on the right hand side.
A label is the name of an element that will be displayed on the toolbar. Unlike internal names these can be reused.
{{anchor|action}}{{anchor|actions}}
==== Actions ====
While there are other types of actions that you can do, in this guide we focus on the <code>encapsulate</code> action as it is the easiest to understand and use. This action pastes one snippet of text before the highlighted text (or you cursor) and a second snippet after the highlighted text. The second snippet (<code>post:</code>) can be deleted if you only want to insert one string of text.
To create your own button paste the code at the end of this section into your <code>/common.js</code> page between the two [[#Basic]] sections and change the following things:
* Replace <code>AAAA</code> with the name of the section you would like to put the button. Unless you are adding new [[#Sections|#sections]] to the toolbar this should be either <code>main</code> or <code>advanced</code>.
* Replace <code>BBBB</code> with the name of the part of that section where you would like your button to go. If it will be in the <code>main</code> section this should be <code>format</code> (though <code>insert</code> can also work). If it will be in the <code>advanced</code> section then this can be either <code>heading</code>, <code>format</code> (this will work best and is recommended), <code>size</code>, or <code>insert</code>.
* Replace <code>CCCC</code> with what the internal name for this button.
* Replace <code>DDDD</code> with the label for this button. The text you put here will be shown when you hover your cursor over this button's icon on your toolbar.
* Replace <code>EEEE</code> with a link to the file that you would like to use as the icon for your button. This needs to be a full link starting after <code>https:</code>. For example, you can use <code>//upload.wikimedia.org/wikipedia/commons/2/23/Button_code.png</code>. While you can use any file as your icon it is recommended that you use one of the icons listed on Mediawiki's [https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_icons list of toolbar icons] since they are all of a size and shape that works.
* Replace <code>FFFF</code> and <code>GGGG</code> as you would with any other [[#
<pre>
=== Creating Your Own Dropdowns ===
To start add this code into your <code>/common.js</code> page between the two [[#Basic]] sections and change the following things:
* If you have created a new [[#Adding Sections|#section]] in your toolbar and want to put your dropdown to go there then change <code>AAAA</code> to the name of your section, otherwise replace it with <code>advanced</code>.
* Replace <code>BBBB</code> with the internal name for the dropdown.
* Replace <code>CCCC</code> with the label for the dropdown that will be displayed on the page.
* Replace <code>WWWW</code> with the internal name for the item.
* Replace <code>XXXX</code> with the label for the item. This is how it will appear on the list.
* Replace <code>YYYY</code> and <code>ZZZZ</code> as you would with any other [[#
<pre>
Here we will tell you how to create booklets that contain pages of characters. For other things you can do with booklets see [https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization Mediawiki's guide].
A key difference between dropdowns and booklets is that while with dropdowns every option must be an action, with booklets that is not the case. Booklets contain <code>pages</code> of <code>characters</code> that when clicked paste text into the page. Characters can be either simple snippets of code or [[#
To create a new booklet section add the following code to your <code>/common.js</code> page between the two [[#Basic]] sections and change the following things:
</pre>
Alternatively, you can add characters as [[#
To add a character as an action paste the following code into the page (in the space indicated above) and change the following things:
* Replace <code>XXXX</code> and <code>YYYY</code> as you would with any other [[#
* Replace <code>ZZZZ</code> with the label for this item that will be displayed in its booklet page.
| |||