Open main menu


MediaWiki extensions manual
OOjs UI icon advanced.svg
Release status: unmaintained
Implementation User interface
Description Add popup field to display reference's content
Author(s) Nordtalk
Latest version 0.8.2b
License No license specified
Example TestPage
Translate the ElmEasyRef extension if it is available at
Check usage and version matrix.

The ElmEasyRef extension add popups field to display reference's content. So when user click on reference, he will see:


Note: extension does not provide <ref> and <references /> tags, so you should install extension like Extension:Cite first

Download instructionsEdit

Download latest version from and extract it to the MediaWiki "/extensions/" directory


Copy it from


To install this extension, add the following lines at the end of LocalSettings.php file:

# ElmEasyRef Extension

Configuration parametersEdit

If it is necessary you can change standart behaivor of extension by adding following options after the require_once:

// If debug mode is on (true), debug messages will be enabled and uncompressed version of js-script will be attached
$wgElmEasyRefDebugMode = false;

// Full path to additional css file, which can change styles of referencefield.css
$wgElmEasyRefAddCSS = '';

// Field metrics
$wgElmEasyRefMetrics = array(
    // Min size of popup field
    'min_width'  => 140,
    'min_height' => 40,

    // Size of collapsed popup field
    'col_width'  => 400,
    'col_height' => 140,

    // Size of expanded popup field (Max size)
    // Note: popup apear in collapsed mode first. 
    //       Expanded mode is for large references and opened with "More button"
    'exp_width'  => 400,
    'exp_height' => 380

// Animation properties
$wgElmEasyRefAnimation = array(
    // If true, enable apear animation
    'enable' => true,
    // Interval delay
    'delay'  => 50,
    // How long width and height will grow up
    'stepw'  => 1.2,
    'steph'  => 3     

// bodyContent: ID of element which contain articles body
$wgElmEasyRefBodyContentId = 'bodyContent';

// Regular expression to retrieve number of reference (for links look like: [123])
// (with no / /)
$wgElmEasyRefNum_rp = '(<.*?>)';    // strip that first
$wgElmEasyRefNum_mt = '([0-9]+)';   // search

Changing StyleEdit

By default popup field look so:


Easy way of changing it is to set $wgElmEasyRefAddCSS parameter. It will load aditional css which overwrite current one.

    // Will make field green
    $wgElmEasyRefAddCSS = $wgScriptPath . '/extensions/ElmEasyRef/css/refield-green.css';

    // Will make field red
    $wgElmEasyRefAddCSS = $wgScriptPath . '/extensions/ElmEasyRef/css/refield-red.css'; 

    // Will make field gray
    $wgElmEasyRefAddCSS = $wgScriptPath . '/extensions/ElmEasyRef/css/refield-white.css';

Also you can change style by yourself with editing $IP/extensions/ElmEasyRef/css/referencefield.css file directly

See alsoEdit