Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.js: Difference between revisions

MediaWiki interface page
Created page with "All JavaScript here will be loaded for users of the Citizen skin: $(function() { var header = document.querySelector('.citizen-header'); var drawer = header.querySelector('.citizen-drawer'); if (header && drawer) { // Create button container (same structure as other buttons) var buttonDiv = document.createElement('div'); buttonDiv.className = 'citizen-header__item'; var link = document.createElement('a');..."
 
No edit summary
Line 1: Line 1:
/* All JavaScript here will be loaded for users of the Citizen skin */
$(function() {
$(function() {
     var header = document.querySelector('.citizen-header');
     var header = document.querySelector('.citizen-header');
Line 5: Line 4:
      
      
     if (header && drawer) {
     if (header && drawer) {
        // Create button container (same structure as other buttons)
         var buttonDiv = document.createElement('div');
         var buttonDiv = document.createElement('div');
         buttonDiv.className = 'citizen-header__item';
         buttonDiv.className = 'citizen-header__item';
Line 14: Line 12:
         link.title = 'My Custom Button';
         link.title = 'My Custom Button';
          
          
         // Use a MediaWiki icon (see list below)
         // Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME
         link.innerHTML = '<span class="citizen-ui-icon mw-ui-icon-wikimedia-heart"></span>';
         link.innerHTML = '<span class="citizen-ui-icon mw-ui-icon-heart mw-ui-icon-wikimedia-heart"></span>';
          
          
         buttonDiv.appendChild(link);
         buttonDiv.appendChild(link);
       
        // Insert before the drawer (menu) button
         header.insertBefore(buttonDiv, drawer);
         header.insertBefore(buttonDiv, drawer);
     }
     }
});
});

Revision as of 18:45, 5 February 2026

$(function() {
    var header = document.querySelector('.citizen-header');
    var drawer = header.querySelector('.citizen-drawer');
    
    if (header && drawer) {
        var buttonDiv = document.createElement('div');
        buttonDiv.className = 'citizen-header__item';
        
        var link = document.createElement('a');
        link.href = '/index.php/Your_Page';
        link.className = 'citizen-header__button';
        link.title = 'My Custom Button';
        
        // Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME
        link.innerHTML = '<span class="citizen-ui-icon mw-ui-icon-heart mw-ui-icon-wikimedia-heart"></span>';
        
        buttonDiv.appendChild(link);
        header.insertBefore(buttonDiv, drawer);
    }
});