MediaWiki User Preferences & Skins — Custom CSS, Preference Settings, and Skin Selection

In this tutorial, you will learn about MediaWiki User Preferences & Skins. We cover key concepts, practical examples, and best practices to help you master this topic.

User preferences and skins in MediaWiki let every user personalize their wiki experience through setting preferences, choosing skins like Vector and Modern, adding custom CSS and JavaScript, and configuring interface options — the same customization system Wikipedia offers its millions of editors.

What You'll Learn

• Navigating the user preferences interface
• Configuring account, appearance, and editing preferences
• Selecting and installing skins
• Creating custom CSS for personal styling
• Adding custom JavaScript for enhanced functionality
• Understanding site-wide vs user-specific settings

Why It Matters

Every user interacts with the wiki differently. Some prefer a dark theme. Others want a wider text area. Some need a larger font for Accessibility. User preferences allow each user to tailor the wiki to their needs without affecting anyone else. Skins change the entire look and feel. Custom CSS and JavaScript enable power users to build tools that make their editing faster and more comfortable.

Real-World Use

A DodaTech wiki team has diverse needs. A documentation writer uses the Vector 2022 skin with a wider content area and larger fonts. A developer uses the MonoBook skin for its compact layout and enables syntax highlighting for code blocks. A manager with vision impairment uses custom CSS to increase contrast and font size. All three users see the same content but experience it differently.

Learning Path

flowchart LR
  A["22: Email & Notifications"] --> B["23: Bots & Automation"]
  B --> C["24: User Preferences & Skins"]
  C:::current
  D["25: Extension Installation"]
  E["26: Semantic MediaWiki"]
  F["27: VisualEditor"]

  C --> D --> E --> F

  classDef current fill#38bdf8,color#0f172a,stroke-width:2px

The User Preferences Page

Special:Preferences is the central settings page for each user. It is organized into tabs.

User Profile Tab

• Username: Displayed name (cannot be changed here — use Special:RenameUser)
• Email: For notifications and password resets
• Signature: Custom signature for talk pages (~~~~)
• Language: Interface language
• Time zone: Display time in user's local time

Appearance Tab

• Skin: Choose the visual theme
• Layout: Sidebar position, content width
• Date format: How dates are displayed
• Time format: 12-hour vs 24-hour
• Images: Thumbnail size, image limits
• Math: Rendering method for mathematical formulas

Editing Tab

• Editor: Source editor, VisualEditor, or both
• Edit area: Width, height, font
• Show preview: Before saving
• Show preview on first edit: For newcomers
• Mark all edits as minor: Default minor edit flag
• Add pages to watchlist: Automatically watch pages you edit

Recent Changes Tab

• Days to show: How far back RecentChanges goes
• Number of edits: How many edits to show
• Hide minor edits: Filter out minor changes
• Enhanced view: Group changes by page
• Watchlist: How your watchlist behaves

Notifications Tab

Configure web and email notification preferences for each event type, as covered in Lesson 22.

Skins Overview

Skins are the visual themes of MediaWiki. They change colors, layout, font, and navigation structure.

Standard Skins

Vector Skin Details

The default Vector skin features:

• Left sidebar with navigation, tools, and toolbox
• Top tabs for page actions (Edit, History, Move)
• Search box in the top-right
• Collapsible sidebar sections
• Clean typography with good readability

Vector 2022 Updates

Vector 2022 (the new default in MediaWiki 1.42+) adds:

• Sticky header that follows scrolling
• Collapsible sidebar
• Language button in the header
• User tools in the top bar
• Improved mobile responsiveness

Installing Additional Skins

Download and install skins like any extension:

cd /opt/lampp/htdocs/mediawiki/skins
wget https://extdist.wmflabs.org/dist/skins/MonoBook-REL1_42.tar.gz
tar -xzf MonoBook-*.tar.gz

Enable in LocalSettings.php:

wfLoadSkin( 'MonoBook' );

Users can then select the new skin from their preferences.

Custom CSS

Every user can add custom CSS that applies only to their account. This is the most powerful way to personalize the wiki.

User CSS Page

Create a page at User:YourUsername/common.css:

/* Dark theme for personal use */
body {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

.mw-body {
    background-color: #16213e;
    color: #e0e0e0;
}

a {
    color: #64b5f6;
}

a:visited {
    color: #ce93d8;
}

/* Wider content area */
.mw-body-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Larger fonts for readability */
body {
    font-size: 16px;
    line-height: 1.8;
}

CSS for Specific Skins

For skin-specific CSS, use the skin name instead of common:

User:YourUsername/vector.css     — Vector only
User:YourUsername/monobook.css   — MonoBook only
User:YourUsername/modern.css     — Modern only

Site-Wide CSS

If you have the editinterface permission, you can edit site-wide CSS:

MediaWiki:Common.css     — All skins
MediaWiki:Vector.css     — Vector skin only

Site-wide CSS affects all users. Use it for global styling changes like brand colors or layout improvements.

Custom JavaScript

User JavaScript adds interactive functionality beyond CSS.

User JS Page

Create User:YourUsername/common.js:

// Add a "Copy page title" button
mw.loader.using( 'mediawiki.util' ).then( function () {
    var $btn = $( '<button>' )
        .text( 'Copy title' )
        .on( 'click', function () {
            var title = mw.config.get( 'wgPageName' );
            navigator.clipboard.writeText( title );
            mw.notify( 'Title copied: ' + title );
        } );
    $( '#content' ).prepend( $btn );
} );

Common User JS Use Cases

• Quick navigation: Add keyboard shortcuts for common actions
• Formatting helpers: One-click buttons for template insertion
• Search enhancements: Improved search box behavior
• Notification customizations: Custom notification display
• Edit helpers: Auto-fill edit summaries, preview shortcuts

Gadgets

Gadgets are pre-packaged JavaScript/CSS modules available to all users. Enable them in Preferences.

To create a gadget, define it in MediaWiki:Gadgets-definition:

* myGadget[ResourceLoader|rights=edit]|myGadget.js|myGadget.css

And create the gadget files:

• MediaWiki:Gadget-myGadget.js
• MediaWiki:Gadget-myGadget.css

Users enable gadgets in Special:Preferences > Gadgets.

Configuring Default Preferences

Administrators can set default preferences for new users:

// Default skin for new users
$wgDefaultSkin = 'vector-2022';

// Default editor
$wgDefaultUserOptions['editor'] = 'visualeditor';

// Thumbnail size
$wgDefaultUserOptions['thumbsize'] = 3;  // 300px

// Enable watchlist for pages you edit
$wgDefaultUserOptions['watchcreations'] = true;
$wgDefaultUserOptions['watchdefault'] = true;

// Hide minor edits by default
$wgDefaultUserOptions['hideminor'] = false;

These settings apply only to newly created accounts. Existing users keep their current preferences.

Skin Configuration

Configure skin behavior site-wide:

// Show the sidebar
$wgVectorDefaultSidebarVisible = true;

// Enable the sticky header in Vector 2022
$wgVectorStickyHeader = true;

// Show the table of contents in the sidebar
$wgVectorTocPosition = 'left';

// Set logo
$wgLogo = '/skins/common/images/wiki.png';
$wgLogos = [
    '1x' => '/skins/common/images/wiki.png',
    '2x' => '/skins/common/images/wiki-2x.png',
    'svg' => '/skins/common/images/wiki.svg',
];

What You Learned

• Special:Preferences provides per-user configuration for all aspects of the wiki
• Skins change the visual theme (Vector, MonoBook, Modern, Timeless)
• User CSS at User:Name/common.css adds personal styling
• User JavaScript at User:Name/common.js adds interactive features
• Gadgets are shareable JavaScript/CSS modules
• $wgDefaultUserOptions sets defaults for new users
• Administrators can configure skin behavior site-wide

In the next lesson, you'll learn about extension installation and management.

Common Mistakes

Practice Questions

1. What is the difference between user-specific CSS (User:Name/common.css) and site-wide CSS (MediaWiki:Common.css)?
2. How would you create a user script that inserts a "Welcome" template at the top of a user talk page with a single click?
3. What are the four standard skins that ship with MediaWiki, and what are their key differences?
4. Challenge: Build a custom user experience. Install a new skin (e.g., Timeless) on your wiki. Create a user CSS page that implements a dark theme. Create a user JavaScript page that adds a "Go to top" button when scrolling down on long pages. Configure the skin defaults so new users get Vector 2022 with the sidebar visible. Publish a gadget called "QuickSignature" that adds a button to the toolbar for inserting a formatted signature with timestamp. Test each piece individually and verify they work together.

FAQ

Mini Project

Goal: Create a personalized wiki experience with custom styling and tools.

1. Install a new skin (Timeless or a custom skin) on your wiki
2. Set Vector 2022 as the default skin for new users
3. Create a user CSS page with a dark theme (dark background, light text, blue links)
4. Create a user JavaScript page that:
   • Adds a "Back to top" button on long pages
   • Adds keyboard shortcut Ctrl+Shift+S to save the current page
   • Displays a notification greeting when loading any page
5. Create a gadget called "DarkMode" that provides toggleable dark mode styling
6. Configure default preferences for new users to enable the DarkMode gadget
7. Switch between skins and verify your custom CSS/JS works on each
8. Test the "Restore all default settings" feature

What's Next

With the user experience customized, let's explore extending MediaWiki with additional features.

Continue to Lesson 25: Extension Installation & Management — learn how to install, manage, and update extensions using the extension registry and versioning best practices.