MediaWiki 1.16.5 upgrade on TNG Wiki

From TNG_Wiki
Jump to navigation Jump to search

The following changes will be immediately evident after the MediaWiki 1.16.2 upgrade on the TNG Wiki:

  • appearance
  • edit toolbar
  • my preferences
  • search
  • table formatting

Look and feel

The TNG Wiki upgrade provides a new look with collapsible sections of the left sidebar.

Appearance

The default theme has changed from the MonoBook used in MediaWiki 1.13.2 to the Vector theme becoming the default.
TNG Wiki - MediaWiki 1.13.2

As you can see in the image on the right, the MonoBook theme had a box outline around the left nav sidebar, whereas the Vector theme now has collapsible nav areas. The CategoryTree generated Categories was also moved up in the left sidebar. The Language selection is no longer in the Toolbox, but above it.

TNG Wiki - MediaWiki 1.16.2 Upgrade

Reverting back to MonoBook

If you don't like the collapsing sidebar and you want to revert back to the MonoBook skin with no collapsing toolbar, you should:
  1. click the My Preferences link
  2. select the Appearance tab
  3. select the MonoBook radio button
  4. save your preferences
Reverting back to MonoBook skin

Edit Toolbar

See Using WikiEditor on instructions for activating the new WikiEditor.

The edit toolbar is now that of the WikiEditor as used on Wikipedia. Additional buttons were added to help with the TNG Wiki formatting.

Once you click on the Advanced toolbar link, it will stay expanded until you click on it again, or click on Special characters or Help.

WikiEditor Toolbar

See New Buttons added to WikiEditor for TNG Wiki buttons that were added to the WikiEditor toolbar.

See New Capabilities below for WikiEditor Insert Link and Table Formatting buttons modal dialog illustrations.

My Preferences

My Preferences screen changed from using Skin to using Appearances as the tab name for changing the theme. See the images under Appearance above.

The Editing tab also allows you to change additional options. You should Enable enhanced editing toolbar in order to use the new WikiEditor. See [[Using WikiEditor]] for additional details. The principal reason, the WikiEditor was not made the default editor, was that you could not then revert to the old editor.

Search

The search box has moved to the upper right of your screen heading section.
TNG Wiki MW-1.16.2 search watch.jpg

New Capabilities

The TNG Wiki upgrade also provides new capabilities, some of which are mentioned below.

Insert Links

To create a link either internal or external, click the link button

A modal dialog box will be launched where you can enter an Internal Page link or create a link to an External web site.

Internal Page Link

The default is to create an internal page link, where you would enter the title of an existing page or the title of a new page.

Notice that as you type, the software will search for existing page names

Insert internal page link

External URL Link

You need to select the External link radio button, since by default the internal link is selected.

You would then enter the URL for an existing web site page. When creating an external link, you should enter the Text to Display for the link.

Notice that for external links, you will receive a reCaptcha challenge.

Insert external page link

Table Formatting

The new WikiEditor table button insert table button displays a dialog that allow you to select among several options to create a table.

Note though that the class="wikitable" now includes a border.

If you do not want to display a border, you may need to remove the class statement after creating the table, if you forgot to uncheck the Style with borders box, or you created the table in the TNG Wiki prior to the upgrade to MediaWiki 1.16.2, such as tables created to provide text and image display sections of a page. For example, I removed the class="wikitable" in the Appearance section above.

Impact: You may need to update pages created previously to remove the class="wikitable" if you do not want a border, such as where a table is used to define text with an image to illustrate.

Add Table Dialog



Syntax Highlighting

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="html4strict" 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.

Toggle Display

The Toggle Display button Button-Toggle.png on the TNG Wiki Edit menu allows you to define text that can be displayed or hidden (i.e. expanded or collapsed) by users. The button generates Wikitext with two HTML div elements.

  1. The outer div can contain lead-in text that does not collapse.
  2. The inner div contains the collapsible text, which is displayed in a shaded box.

The button also automatically generates a [Collapse] link before the collapsible text. When you click on the [Collapse] link, the collapsible text disappears, and the link changes to [Expand].

The Toggle button always generates this text in the outer div:

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.

If you have selected text before you click the Toggle button, that selected text will become the collapsible text. If you have not, the Toggle button will generate some help text as the collapsible text.

After you click the Toggle button, you simply need to replace the text generated by the Toggle button with your text. Note that the Toggle button leaves the collapsible text highlighted so that you can very easily delete and replace it.

As an alternative to the Toggle Display button, you can use the Show / Hide Display buttons to generate the wiki syntax to create the Expand and Collapse buttons. The Show / Hide Display buttons generate a Show or Hide Contents button which can be changed to different text.

Creating a toggle

When you click the Toggle button without having selected any text, you'll get this Wikitext:

<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. 
* See '''[[Toggle Display]]'' for examples.</div></div>

Example 1: The default Toggle:

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.
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.
  • See 'Toggle Display for examples.

Creating a toggle with selected text

If you select any text prior to clicking the Toggle button, the selected text will become the collapsible text, though you'll still get the introductory message ("You can click on the [Collapse] link..."). It will look like this:

Example 2: A toggle with custom collapsible text:

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.
This is the selected text

To start with collapsed text

To start with the [Expand] link and the collapsible text collapsed, just add the class mw-collapsed to either of the div tags generated by the button. Assuming that you've changed the outer and inner text, too, you'll get something like this:

<If you select any text prior to clicking the Toggle button, the selected text will become the collapsible text, though you'll still get the introductory message ("You can click on the [Collapse] link..."). It will look like this:

Example 3: A toggle that is collapsed to start:

The reasons it came out this way are quite interesting...
Yep, this is quite an interesting story.

If there is no fixed text

You can omit the outer div, as long as you add the class mw-collapsible to the inner div. You'll wind up with Wikitext that is something like this:

<div class='mw-collapsible toccolours mw-collapsible-content'>This is the collapsible text...
</div>

Collapsible text shading

In the Wikitext generated by the Toggle button, the class toccolor adds padding, a border, and a background color to the collapsible text. You can remove that class name, and/or add style attributes to either or both divs to change the styling:

To change 'Collapse' and 'Expand'

To change the text of the [Collapse] and/or [Expand] links, you can add data-collapsetext and data-expandtext attributes to the outer div, like this:


<div class="mw-collapsible" data-expandtext="show" data-collapsetext="hide">

or perhaps

<div class="mw-collapsible" data-expandtext="See details">

Example 4: Alternate text for the [Expand] link, with the collapsible text unshaded and collapsed to start:

You can change the text of the [Collapse] and/or [Expand] links

by adding the data-collapsetext and data-expandtext attributes to the outer div, like this


<div class="mw-collapsible" data-expandtext="show" data-collapsetext="hide">

Complex Collapsible Text

Example 4, just above, illustrates that the collapsible text can contain <code> and <syntaxhighlight> elements. It can also contain lists, tables, and other markup. The MediaWiki Manual Page for collapsible elements gives some examples.

Divs, Spans, etc

The Toggle button generates two div elements, but the toggle functionality does not require that the elements (or one element if you merge them as described above) be divs. Depending on their content, one or the other (or both) elements can be <span>, or other HTML tags - limited, of course, to the HTML tags that can be used in Wikitext.

See Also

Show / Hide Contents
Help:Editing
The MediaWiki Manual Page for collapsible elements

Related Links

Using WikiEditor

New Buttons added to WikiEditor