TNG Wiki Buttons Added to WikiEditor

From TNG_Wiki
Jump to navigation Jump to search
Languages Language: 

English • Deutsch • Français

Language: 

English • Deutsch • Français

WikiEditor Toolbar

The following shows the WikiEditor toolbar as implemented on the TNG Wiki. It is the same toolbar as used on Wikipedia with additional buttons to make it easier to add articles that include code snippets.

TNG Wiki Editor Toolbar


The following buttons and groups were added to the WikiEditor toolbar as part of the UsabilityInitiative Extension to the TNG Wiki with the upgrade to MediaWiki 1.16.5 and now part of MediaWiki 1.25.3

Main - Format Group

Added to the Main toolbar format group were the following buttons:

Strike Through Button

The Strike Through button Button-strike.png generates

<s>Deleted text with strike through line</s>

which then displays as Deleted text with strike through line

Insert Zip File

The Insert Zip File button Button-zipfile.png generates

[[Media:your_zipfile_name.zip|display_zipfile_name.zip]]

which then displays as age_calculation_v8.1.4.zip where you should enter the zip file name for both the file name itself and what will be displayed.

Insert Image File

The Insert Image File button Button-add-media.png generates

[[File:your_image_name.jpg|thumb|right or left|NNNpx|Your Image Caption]]

which displays as

Your Image Caption

based on the parameters used:

  • the image file name
  • thumb if you want to use a thumbnail
  • right or left to align the image right or left
  • NNNpx for the number of pixels to be used to display the image
  • the image caption if you want to add one

You should delete the parameters you don't need before the closing brackets.

After inserting the Image file and saving the page, you can click on the link to upload the image.

Page Group

The Page group was added to the main toolbar with the following buttons:

Right TOC

The Right TOC button Button-toc.png generates

{| style="margin-right:0.5 em;" align="right" | __TOC__ |}

to right align the Table of Contents.

Language

The Language Template button Button-lang-template.png generates

{{Languages|Enter the English page name here}}

where you must replace the phrase Enter the English page name here with the English page title equivalent of your language (French /fr, German /de, or Spanish /es) page title which will generate the English and your language links that allow switching languages when clicked. You should leave the pipe | in place before the English title for the French /fr, German /de, or Spanish /es pages. You should delete both the pipe and the Enter the English page name here phrase when creating the English language page that allows switching to another language.

See Making pages switch languages for additional details.

TNG version

The TNG version Template button Button-TNG-template.png generates

{{TNGver | ver=n | notes = Replace the n in ver=n with 8, 7, 6, 67, or 78 for the TNG version to which this page applies. Optionally enter a value for the notes = to display a note. Delete the "| ver=n | notes =" parameters (everything after TNGver) if the page applies to all versions of TNG.}}

where you must

  • replace the n in ver=n with 8, 7, 6, 67, or 78
for the TNG version to which this page applies.
  • Optionally enter a value for the notes =
to display a note.
  • Delete the "| ver=n | notes =" parameters (everything after TNGver)
if the page applies to all versions of TNG.

See Template:TNGver for additional details on the parameters.

Toggle Display

The Toggle Display button Button-Toggle.png generates 

<div class='mw-collapsible'>You can click on the  '''[Collapse]''' link on the right to hide this section or '''[Expand]''' to display the hidden section. 
<div class='toccolours mw-collapsible-content'>Add the text to be toggled here. Note that 
* If you add the class 'mw-collapsed' to the div at the start of this structure, the text will be hidden initially, not displayed. 
* The div and span tags in this toggle structure can really be almost any HTML tag, and can take on additional styling. 
* The text to be toggled can be arbitrarily long, and contain images and/or tables. 
* See ''[https://test.wikipedia.org/wiki/User:Krinkle/Test_suite_for_mw-collapsible this link]'' for additional examples, including how to change the right-justified [Collapse] and [Expand] buttons.</div></div>

where you can add mw-collapsed to the <div class="mw-collapsible"> tag, to initially hide the div contents.

You can use <div class="mw-collapsible-content"> to toggle the text within that div after the fixed message.

If you select any text prior to clicking the button, it will generate a toggle of the selected text using the following: 

<div class='mw-collapsible'>You can click on the  '''[Collapse]''' link on the right to hide this section or '''[Expand]''' to display the hidden section. 
<div class='toccolours mw-collapsible-content'> where the selected text is here.  
</div></div>

You can update the message in regards the [Collapse] and [Expand] buttons to provide your own instructions..

Category

The Category button Button-category.png generates [[Category:Category Name]] where you need to replace Category Name with the name of the category to which the article will be assigned.

Style Group

The Style group was added to the main toolbar with the following buttons:

Block Quote

The Block Quote button Button-blockquote.png generates <blockquote> Enter text to be block quoted. </blockquote> where you must replace the phrase Enter text to be block quoted when used without first selecting text. The resulting text will display as follows

Enter text to be block quoted.


Font Color

The Font Color button Button-font-color.png generates

<spanstyle="color: ColourName">Enter the text to be generated in color and change the ColourName to the appropriate color</span>

where you must change the ColourName to the desired color such as green (#006400) to generate:
Enter the text to be generated in color and change the ColourName to the appropriate color.

You can specify the color for the font by replacing the ColourName in style="color:".

Advanced format group

The following button was added to the Advanced toolbar format group:

Definition List

The Definition List button Button-list-definition.png generates

; Definition : Item 1 : Item 2

where you should replace Definition with the list name and Item 1 and 2 with the appropriate entry. To add more entries use the Indentation syntax character : The definition list displays as follows

Branches
How to define a branch
How to label a branch
How to relabel the branches

Note that the definition list character ;is also used in the TNG Glossary for the entries under each letter.

Code Group

The Code group was added to the Advanced toolbar with the following buttons:

Pre-formatted Text

The Pre-formatted Text button Button-pre.png generates

<pre> Enter text to be pre-formatted. </pre>

which then displays as 

Enter text to be pre-formatted.

Code Snippet

The Code button Button-code.png generates

<code>Enter your code snippet here</code>

which will display as follows Enter your code snippet here

Note that in some cases, you may need to wrap the <code></code> segment within <nowiki> <nowiki> tags. You can also use the Highlight Syntax button with the Code button

Highlight Syntax

The TNG WikiEditor highlight syntax button highlight source syntax button can be used to highlight the syntax of various source snippets, like PHP, javascript, css, etc.

The Highlight Syntax button highlight source syntax button generates the following

<syntaxhighlight lang="html" line start="100" highlight="5" ></syntaxhighlight>

where you should specify

  • lang= for the programming language, such as lang="css", lang="html4strict" lang="javascript", lang="php" (default if lang= is not specified), or several other languages.
  • line is optional if you want to assign line numbers
  • start="line" specifies the starting line number, if you specify line
  • highlight="5" indicates to highlighting line 5
  • enclose="div" provides a way to wrap long code lines

Usage: You may may want to update pages created previously to replace the <code><nowiki></code> or <pre></pre> if you had snippets of code that were long lines with the new <syntaxhighlight> tag.

The code snippet will then be highlighted as shown below: 

//  New Account Request Form additions
//  Reason why you need a User ID on our site
$text['userreason']= "Note that you must provide a direct connection to the<strong>person ID (Innnn) of your grandparent, great-grandparent,or great-great-grandparent</strong> who is in our database. A User ID is only needed to view information on <strong>Living
Cousins</strong>, and will only be approved if you provide information that documents your relationship to a person already in our
family tree. <strong>Relationships from the 1600-1700 are too far removed for me to grant access to Living people.</strong> Thanks.$dbowner";

If you do not specify the enclose="div" parameter then long lines will exceed the page with as shown below 

//  New Account Request Form additions
//  Reason why you need a User ID on our site
$text['userreason']= "Note that you must provide a direct connection to the<strong>person ID (Innnn) of your grandparent, great-grandparent,or great-great-grandparent</strong> who is in our database. A User ID is only needed to view information on <strong>Living
Cousins</strong>, and will only be approved if you provide information that documents your relationship to a person already in our
family tree. <strong>Relationships from the 1600-1700 are too far removed for me to grant access to Living people.</strong> Thanks.$dbowner";


Note that the Highlight Syntax button alt=highlight source syntax button with the enclose="div" parameter is a way to get long text to be wrapped for display that was previously coded within <pre> </pre> tags.

Comments

The Comments button Button-hide-comment.png generates

<!-- Insert your editor comment here -->

which is only visible when you are in edit mode where it will display


<!-- The comments you entered in the page -->

Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=TNG_Wiki_Buttons_Added_to_WikiEditor&oldid=65522"