MediaWiki:Citizen.js - Revision history

Admin at 17:09, 5 February 2026

2026-02-05T17:09:13Z

← Older revision		Revision as of 19:09, 5 February 2026
Line 18:		Line 18:
	link.title = 'Create a new page';		link.title = 'Create a new page';

	link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;color:~~white~~;"><i class="fa-solid fa-file-circle-plus"></i></span>';		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;color:oklch(80% 0.05 262.29);"><i class="fa-solid fa-file-circle-plus"></i></span>';

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);

Admin at 17:07, 5 February 2026

2026-02-05T17:07:15Z

← Older revision		Revision as of 19:07, 5 February 2026
Line 18:		Line 18:
	link.title = 'Create a new page';		link.title = 'Create a new page';

	link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa-solid fa-file-circle-plus"></i></span>';		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;color:white;"><i class="fa-solid fa-file-circle-plus"></i></span>';

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);
	drawer.after(buttonDiv); ~~// Insert after the drawer~~		drawer.after(buttonDiv);
	}		}
	});		});

Admin at 17:05, 5 February 2026

2026-02-05T17:05:46Z

← Older revision		Revision as of 19:05, 5 February 2026
Line 21:		Line 21:

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);
	~~header~~.~~insertBefore~~(buttonDiv~~, drawer~~);		drawer.after(buttonDiv); // Insert after the drawer
	}		}
	});		});

Admin at 16:58, 5 February 2026

2026-02-05T16:58:08Z

← Older revision		Revision as of 18:58, 5 February 2026
Line 1:		Line 1:
	$(function() {		$(function() {
			// Load FontAwesome
			var fa = document.createElement('link');
			fa.rel = 'stylesheet';
			fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
			document.head.appendChild(fa);

	var header = document.querySelector('.citizen-header');		var header = document.querySelector('.citizen-header');
	var drawer = header.querySelector('.citizen-drawer');		var drawer = header.querySelector('.citizen-drawer');
Line 8:		Line 14:

	var link = document.createElement('a');		var link = document.createElement('a');
	link.href = '/index.php/~~Your_Page~~';		link.href = '/index.php/Special:CreatePage';
	link.className = 'citizen-header__button';		link.className = 'citizen-header__button';
	link.title = '~~My Custom Button~~';		link.title = 'Create a new page';

	~~// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME~~		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa-solid fa-file-circle-plus"></i></span>';
	link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;"><~~svg width="20" height="20" viewBox="0 0 20 20" fill~~="~~currentColor"><path d="M15.5 3H11l-1~~-~~1H4.5A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5~~-~~1.5V4.5A1.5 1.5 0 0015.5 3zM14 11h~~-~~3v3H9v~~-~~3H6V9h3V6h2v3h3v2z~~"/></~~svg~~></span>';


	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);

Admin at 16:55, 5 February 2026

2026-02-05T16:55:25Z

← Older revision		Revision as of 18:55, 5 February 2026
Line 13:		Line 13:

	// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME		// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME
	link.innerHTML = '<span class="citizen-ui-icon mw-ui-~~icon~~-~~add mw~~-ui-~~icon~~-~~wikimedia~~-~~add~~"></span>';		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path d="M15.5 3H11l-1-1H4.5A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V4.5A1.5 1.5 0 0015.5 3zM14 11h-3v3H9v-3H6V9h3V6h2v3h3v2z"/></svg></span>';


	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);

Admin at 16:48, 5 February 2026

2026-02-05T16:48:45Z

← Older revision		Revision as of 18:48, 5 February 2026
Line 13:		Line 13:

	// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME		// 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>';		link.innerHTML = '<span class="citizen-ui-icon mw-ui-icon-add mw-ui-icon-wikimedia-add"></span>';

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);

Admin at 16:45, 5 February 2026

2026-02-05T16:45:05Z

← Older revision		Revision as of 18:45, 5 February 2026
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);
	}		}
	});		});

Admin: 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');..."

2026-02-05T16:43:21Z

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');..."

New page

/* 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');
link.href = '/index.php/Your_Page';
link.className = 'citizen-header__button';
link.title = 'My Custom Button';

// Use a MediaWiki icon (see list below)
link.innerHTML = '<span class="citizen-ui-icon mw-ui-icon-wikimedia-heart"></span>';

buttonDiv.appendChild(link);

// Insert before the drawer (menu) button
header.insertBefore(buttonDiv, drawer);
}
});