The Coppermind

Difference between revisions of "User:King of Herdaz/Toolbar customization"

User:King of Herdaz/Toolbar customization (edit)

Revision as of 16:13, 3 December 2021

216 bytes added ,  2 years ago
m
no edit summary
m (→‎Premade Buttons: adding artist attribution button)
m
The editing toolbar is a versatile and very useful tool that can be used to make working on the wiki much easier. While the basic version (which is an option in your [[Special:Preferences#mw-prefsection-editing|preferences]]) has some use, the main benefit comes when you customize your toolbar. In this guide there are tested premade elements that you can use as well as guides to creating and modifying your own buttons, booklets, and dropdowns.
 
All modifications to the toolbar are made on your <code>[[Special:MyPage/common.js</code>|common.js]] subpage. To find this page you can type out the url, or you can go to your [[Special:Preferences#mw-prefsection-rendering|preferences]] and click on the redlink that will be found there if you have not yet created the page.
 
While modifying your toolbar can seem scary, once you get the hang of it, it really isn't a big deal. Anything you do can be easily undone so feel free to play around and experiment with different things.
You do not need any knowledge of how the system works to use the premade elements on this page, simply copy-paste them into your toolbar as directed and you are good to go.
 
Changes you make to your <code>[[Special:MyPage/common.js</code>|common.js]] page only take effect after you save the page, so to check that the changes you have made worked you should save your <code>[[Special:MyPage/common.js</code>|common.js]] page and try to edit some other wiki page. If you see the default toolbar when you edit a page that means that your edits "broke" your toolbar. Consult the [[#General Guidelines|general guidelines]] for help debugging your code.
 
== Basic ==
Before you can customize your toolbar you need to have the "Enable the editing toolbar" option in your [[Special:Preferences#mw-prefsection-editing|preferences]] enabled. Once you have done this you are ready to begin.
 
First, add the following to your <code>[[Special:MyPage/common.js</code>|common.js]] page:
 
<pre>
 
== Premade Elements ==
All of the pieces of code in this section have been tested extensively and are ready to be used as presented here. If you want to add one of these items simply copy-paste the code for that item into your <code>[[Special:MyPage/common.js</code>|common.js]] page between the two [[#Basic]] sections to add it to your toolbar.
 
To learn how the syntax works and how you can modify and create your own code for your toolbar see [[#Customization]].
==== Strings ====
A string is a piece of text within the toolbar. Strings used in labels and actions follow the following guidelines:
* Inserting <code>' + '</code> between two parts of a string can have effects on your <code>[[Special:MyPage/common.js</code>|common.js]] page (as will be discussed below), but will not appear on a page when the action is called. For example, both <code><nowiki><br /></nowiki></code> and <code><nowiki><' + 'br /></nowiki></code> will produce the same result (<code><nowiki><br /></nowiki></code>) on the page when they are called.
* When writing out templates, whether for a label or an action, you must insert <code>' + '</code> between the first two curly brackets. For example, instead of writing <code><nowiki>{{Stormlight}}</nowiki></code> you should write <code><nowiki>{' + '{Stormlight}}</nowiki></code>. This prevents the template from applying categories to your <code>[[Special:MyPage/common.js</code>|common.js]] page and also prevents it from being listed on the relevant template's list of pages that use it.
* For the same reason you must also do this when writing category tags. For example, instead of writing <code><nowiki>[[Category: Stormlight]]</nowiki></code> you should write <code><nowiki>[' + '[Category: Stormlight]]</nowiki></code>.
* When writing code for substitutions this is even more important, since if you do not do it then the substitution will be performed when you save your <code>[[Special:MyPage/common.js</code>|common.js]] page. For example, instead of writing <code><nowiki>{{SUBST:PAGENAME}}</nowiki></code> you should write <code><nowiki>{' + '{SUBST:PAGENAME}}</nowiki></code>.
 
==== Definitions ====
 
=== Creating Your Own Buttons ===
To create your own button paste the code at the end of this section into your <code>[[Special:MyPage/common.js</code>|common.js]] 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]] to the toolbar this should be either <code>main</code> or <code>advanced</code>.
 
=== Creating Your Own Dropdowns ===
To start add this code into your <code>[[Special:MyPage/common.js</code>|common.js]] page between the two [[#Basic]] sections and change the following things:
* If you have created a new [[#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.
The code adding a new section to your toolbar must be placed before the code for all items that will go within it.
 
To add a new section to your toolbar insert the following code into your <code>[[Special:MyPage/common.js</code>|common.js]] page between the two [[#Basic]] sections and change the following things:
* Replace <code>AAAA</code> with the internal name for the section that will used to assign buttons and dropdowns to it.
* Replace <code>BBBB</code> with the label for the section.
</pre>
 
To add a new group to a section (whether a section you added or to a default section) within your toolbar insert the following code into your <code>[[Special:MyPage/common.js</code>|common.js]] page, between the code that added the section and the code for the buttons that will go within it, and make the following changes:
* Replace <code>CCCC</code> with the internal name of the section that will contain this group.
* Replace <code>DDDD</code> with the internal name for the group.
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 [[#actions]]. This can make it easier to add items to booklets than to dropdowns, though booklets do have their complexities.
 
To create a new booklet section add the following code to your <code>[[Special:MyPage/common.js</code>|common.js]] page between the two [[#Basic]] sections and change the following things:
* Replace <code>AAAA</code> with the internal name for the section.
* Replace <code>BBBB</code> with the label for the section.
This can be a little tricky since in order to remove an element you need to know what it is named. To find the name you will have to comb through the page source or look through [https://phabricator.wikimedia.org/diffusion/EWED/browse/master/modules/jquery.wikiEditor.toolbar.config.js the code for the default version].
 
Fortunately, the names of many of the elements are known. Here are premade snippets of code for many of the elements in the default toolbar. Paste any one of them into your <code>Common[[Special:MyPage/common.js</code>|common.js]] page within the two [[#Basic]] sections to remove that element.
 
==== <nowiki><ref></nowiki> Button ====
King of Herdaz
Autopatrolled, Editors
8,718

edits

Retrieved from "https://coppermind.net/wiki/Special:MobileDiff/158498"