MediaWiki:Common: Difference between revisions

From OniGalore
(added doc. for tree list and reflist)
(documented LocaleDate support)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
The purpose of [[MediaWiki:Common.css]] and [[MediaWiki:Common.js]] is to augment the MediaWiki CSS and JS code in a way that is effective for all users. Note that changes to [[MediaWiki:Vector.css]] and [[MediaWiki:Vector.js]] override these general changes for anyone using the default Vector skin. On top of ''that'' come any changes made to users' local vector.css and vector.js pages.
The purpose of [[MediaWiki:Common.css]] and [[MediaWiki:Common.js]] is to augment the MediaWiki CSS and JS code in a way that takes effect for all users. Note that changes to skin-specific pages such as MediaWiki:Vector.css/MediaWiki:Vector.js (our original default skin) or MediaWiki:Vector-2022.css/MediaWiki:Vector-2022.js (our current default skin) override these general changes for anyone using that particular skin. Those in turn are overridden by users' local vector.css and vector.js pages.


Following are all the features of the CSS and JS pages in the order in which they occur.
Following are all the features of the CSS and JS pages in the order in which they occur.


==Common.css==
==Common.css==
*Common.css mainly contains fixes for annoying glitches in MediaWiki's appearance or behavior, and minor style tweaks (these are all more or less borrowed from Wikipedia).
Common.css contains various small fixes borrowed from Wikipedia for shortcomings in MediaWiki's appearance or behavior. These are not documented below. There are also features added to the wiki through Common.js which require supporting CSS markup:


*In amidst those are various classes declared for message box templates such as [[Template:Fmbox]] and [[Template:Divhide]].
*Classes are set up for use by TOC (table of contents) mods such as [[Template:TOCnonum]] and [[Template:TOClimit]].


*There are also classes set up for use by TOC (table of contents) mods such as [[Template:TOCnonum]] and [[Template:TOClimit]].
Following that are some additions by us:
 
*Several link icon customizations:
*Also in this medley of tweaks is a modified fix brought over from WP for the annoyingly small font size that MediaWiki uses for monospaced text with the <nowiki><code>, <tt>, and <pre></nowiki> tags.
 
*Next are several icon customizations:
**A custom [http://www.example.com external link arrow] replaces the default one ([[Image:MediaWiki default external link icon.png]]); the box element has been removed, making it visually less cluttered and easier to read.
**A custom [http://www.example.com external link arrow] replaces the default one ([[Image:MediaWiki default external link icon.png]]); the box element has been removed, making it visually less cluttered and easier to read.
**External links which use HTTPS are modified to use the [https://www.example.com same arrow] as HTTP links instead of the distracting and unnecessary padlock icon.
**External links which use HTTPS are modified to use the [https://www.example.com same arrow] as HTTP links instead of the distracting and unnecessary padlock icon.
Line 20: Line 17:
**Interwiki links get a [[wp:Green_Arrow|green arrow]] to show that they point to a fellow wiki (by default MediaWiki shows no outbound arrow at all for interwiki links, ambushing the reader with a site change when they click it).
**Interwiki links get a [[wp:Green_Arrow|green arrow]] to show that they point to a fellow wiki (by default MediaWiki shows no outbound arrow at all for interwiki links, ambushing the reader with a site change when they click it).
**Links formatted as if they're external, but which point back to this wiki, get a looping arrow [http://wiki.oni2.net/Main_Page like this].
**Links formatted as if they're external, but which point back to this wiki, get a looping arrow [http://wiki.oni2.net/Main_Page like this].
*Following this are many classes declared for the message boxes that can be generated by [[Template:Fmbox]].
*A declared is for use with the unfinished hover table feature (see comments under Common.js below).


*After that, two classes are provided for use by [[Template:Hover]] in providing popup text/images behind page text.
*After that, two classes are provided for use by [[Template:Hover]] in providing popup text/images behind page text.
Line 25: Line 26:
*Classes are set up for use by [[Template:Tree list]] in creating a hierarchical text tree.
*Classes are set up for use by [[Template:Tree list]] in creating a hierarchical text tree.


*Finally, support is added for references to use letters instead of numbers, which is utlized by [[Template:Reflist]].
*Finally, support is added for references to use letters instead of numbers, which is utilized by [[Template:Reflist]].


==Common.js==
==Common.js==
*Common.js allows for a user to add an "&withJS=MediaWiki:__.js" to a URL in order to view that page with a custom JS file that normally does not load for you (untested, so this documentation may be incorrect).
Common.js contains various code for driving new features and behavioral changes to the wiki.
 
Borrowed from Wikipedia are the following:


*When someone visits the Main Page, the browser is told to focus on the go/search box so that the user can immediately start typing a search term or page name.
*First we allow for a user to add an "&withJS=MediaWiki:__.js" to a URL in order to view that page with a custom JS file that normally does not load for you (untested, so this documentation may be incorrect).


*If the user is on the advanced search page, [[MediaWiki:Common.js/search.js]] is imported in order to modify the page. It adds a dropdown menu that lets you pick another search engine in place of the barely useable built-in one.
*If the user is on the advanced search page, [[MediaWiki:Common.js/search.js]] is imported in order to modify the page. It adds a dropdown menu that lets you pick another search engine in place of the barely useable built-in one.


*Various fixes for Internet Explorer (long obsolete).
*The mw-collapsible class from MediaWiki core is extended to actually be collapsible, which allows [[Template:Divhide]] to work.
 
Following that are some additions by us:
*When someone visits the Main Page, the browser is told to focus on the go/search box so that the user can immediately start typing a search term or page name.


*Support for hover tables, a half-finished feature. A hover table can display a description of whichever cell is pointed to. The feature is demonstrated in its unfinished state [[User:Iritscen/HoverTableDemo|here]].
*Support for hover tables, a half-finished feature. A hover table can display a description of whichever cell is pointed to. The feature is demonstrated in its unfinished state [[User:Iritscen/HoverTableDemo|here]].
Line 40: Line 46:
*Next is an even more unfinished feature called hover GIFs, which are GIFs that only animate when hovered over. This is accomplished by swapping between a still image and a GIF. However, this method does not work as currently coded because it merely changes the suffix of an image between .gif and .jpg; since images are stored in various unpredictable sub-directories on the server, the entire path for both images would need to be hardcoded in order to perform a successful swap. These paths could be supplied using an approach similar to the hover table class "hovertable_descrip" if one was determined to make this feature work.
*Next is an even more unfinished feature called hover GIFs, which are GIFs that only animate when hovered over. This is accomplished by swapping between a still image and a GIF. However, this method does not work as currently coded because it merely changes the suffix of an image between .gif and .jpg; since images are stored in various unpredictable sub-directories on the server, the entire path for both images would need to be hardcoded in order to perform a successful swap. These paths could be supplied using an approach similar to the hover table class "hovertable_descrip" if one was determined to make this feature work.


*The NavFrame class from Common.css is used to create the collapsible tables upon which [[Template:Divhide|divhide]] boxes are built.
*Next to last, there is code to allow tables to automatically sort themselves by a given column when the page is loaded. This is utilized in several places on the wiki. To make an autosort table, first the table must be declared with the class "wikitable". Next, as part of the same class declaration, you must also add in "sortable" to enable MediaWiki's built-in sortable column feature. Finally add the third class "autosort" to trigger this feature. By default, the table will be sorted by column 1, but you can specify another column by declaring a fourth class for the table called "by-column-''x''", where 'x' is a number from 1 to 9. See [[Oni 2 (Angel Studios)/Levels]] for a sample usage of this feature.
 
* A function called ModifySidebar() is made available for customizing the items listed in the sections on the left of all wiki pages. See Iritscen's [[User:Iritscen/vector.js|custom JS page]] for a sample usage.
** Parameter 1: The string "add", "remove", or "sep" (which adds a separator line, however the line is currently not displaying for some reason).
** Parameter 2: The name of the section: "navigation", "languages" (not displayed on this wiki), or "toolbox".
** Parameter 3: The display name of the URL you will be adding.
** Parameter 4: The full URL of the wiki page to add (this should allow external links as well).
 
*Next are an untested fix for table sorting and a tweak to the Upload page for unregistered users (does this do anything?).


*Finally, there is code to allow tables to automatically sort themselves by a given column when the page is loaded. This is utilized in several places on the wiki. To make an autosort table, first the table must be declared with the class "wikitable". Next, as part of the same class declaration, you must also add in "sortable" to enable MediaWiki's built-in sortable column feature. Finally add the third class "autosort" to trigger this feature. By default, the table will be sorted by column 1, but you can specify another column by declaring a fourth class for the table called "by-column-''x''", where 'x' is a number from 1 to 9. See [[Oni 2 (Angel Studios)/Levels]] for a sample usage of this feature.
*Finally comes support for [[Template:LocaleDate]], which allows MDY dates to dynamically re-format if the user's browser is in a locale that uses DMY dates.


[[Category:Policies and documentation]]
[[Category:Policies and documentation]]

Latest revision as of 22:07, 5 May 2025

The purpose of MediaWiki:Common.css and MediaWiki:Common.js is to augment the MediaWiki CSS and JS code in a way that takes effect for all users. Note that changes to skin-specific pages such as MediaWiki:Vector.css/MediaWiki:Vector.js (our original default skin) or MediaWiki:Vector-2022.css/MediaWiki:Vector-2022.js (our current default skin) override these general changes for anyone using that particular skin. Those in turn are overridden by users' local vector.css and vector.js pages.

Following are all the features of the CSS and JS pages in the order in which they occur.

Common.css

Common.css contains various small fixes borrowed from Wikipedia for shortcomings in MediaWiki's appearance or behavior. These are not documented below. There are also features added to the wiki through Common.js which require supporting CSS markup:

Following that are some additions by us:

  • Several link icon customizations:
    • A custom external link arrow replaces the default one (MediaWiki default external link icon.png); the box element has been removed, making it visually less cluttered and easier to read.
    • External links which use HTTPS are modified to use the same arrow as HTTP links instead of the distracting and unnecessary padlock icon.
    • External links to other subdomains on Oni2.net get a sideways arrow.
    • External links that specifically go to movie files get a movie icon.
    • External links that specifically go to sound files get a sound icon.
    • Interwiki links get a green arrow to show that they point to a fellow wiki (by default MediaWiki shows no outbound arrow at all for interwiki links, ambushing the reader with a site change when they click it).
    • Links formatted as if they're external, but which point back to this wiki, get a looping arrow like this.
  • Following this are many classes declared for the message boxes that can be generated by Template:Fmbox.
  • A declared is for use with the unfinished hover table feature (see comments under Common.js below).
  • After that, two classes are provided for use by Template:Hover in providing popup text/images behind page text.
  • Finally, support is added for references to use letters instead of numbers, which is utilized by Template:Reflist.

Common.js

Common.js contains various code for driving new features and behavioral changes to the wiki.

Borrowed from Wikipedia are the following:

  • First we allow for a user to add an "&withJS=MediaWiki:__.js" to a URL in order to view that page with a custom JS file that normally does not load for you (untested, so this documentation may be incorrect).
  • If the user is on the advanced search page, MediaWiki:Common.js/search.js is imported in order to modify the page. It adds a dropdown menu that lets you pick another search engine in place of the barely useable built-in one.
  • The mw-collapsible class from MediaWiki core is extended to actually be collapsible, which allows Template:Divhide to work.

Following that are some additions by us:

  • When someone visits the Main Page, the browser is told to focus on the go/search box so that the user can immediately start typing a search term or page name.
  • Support for hover tables, a half-finished feature. A hover table can display a description of whichever cell is pointed to. The feature is demonstrated in its unfinished state here.
  • Next is an even more unfinished feature called hover GIFs, which are GIFs that only animate when hovered over. This is accomplished by swapping between a still image and a GIF. However, this method does not work as currently coded because it merely changes the suffix of an image between .gif and .jpg; since images are stored in various unpredictable sub-directories on the server, the entire path for both images would need to be hardcoded in order to perform a successful swap. These paths could be supplied using an approach similar to the hover table class "hovertable_descrip" if one was determined to make this feature work.
  • Next to last, there is code to allow tables to automatically sort themselves by a given column when the page is loaded. This is utilized in several places on the wiki. To make an autosort table, first the table must be declared with the class "wikitable". Next, as part of the same class declaration, you must also add in "sortable" to enable MediaWiki's built-in sortable column feature. Finally add the third class "autosort" to trigger this feature. By default, the table will be sorted by column 1, but you can specify another column by declaring a fourth class for the table called "by-column-x", where 'x' is a number from 1 to 9. See Oni 2 (Angel Studios)/Levels for a sample usage of this feature.
  • Finally comes support for Template:LocaleDate, which allows MDY dates to dynamically re-format if the user's browser is in a locale that uses DMY dates.