110,044pages on
this wiki

Back to MediaWiki page

Revision as of 10:00, December 14, 2006 by Splarka (Talk | contribs)

Per-page stylings

Do to the recent removal of per-page CSS/JS at the request of Wikia (well, me), because of potential server access problems (eek), I've devised a semi-workable workaround, which when we upgrade to 1.9 will be perfected.

What it does is place a page-specific class name into the <body> tag. Here is the script:

// ==================================================
//   Begin temporary per-page unique CSS (Splarka)
// ==================================================
// The following script sort of emulates the per-page
// unique class functionality that is added to future
// version of MediaWiki.
// This takes <h1 class="firstHeading"> text.Content
// and makes it a class in the format:
//  page-Page_Title_Here 
// with all spaces and non-alphanumeric characters
// converted to underscores.
// So one can style Special:Contributions with a css
//  command like: {}
// Query string debugging tools:
//  &useclass=xxx     lets you overwrite the class
//  &debug=true         popup tells you the pageclass

function bodyClassAdd() {
    var bodyclass = document.getElementsByTagName('body')[0].className;
    var page = pageName();

    if(queryString('useclass')) page = queryString('useclass')
    page = page.replace(/\W/g,'_');   //
    page = 'page-' + page;
    if(queryString('debug')) alert('This page has an extra CSS body class:\n' + page+ '\nIt will be applied as soon as you close this alert')
    document.getElementsByTagName('body')[0].className = bodyclass + ' ' + page;

function pageName(){
  for (var n=0; n < h1.length ;n++) { 
    if (h1[n].className=="firstHeading") return h1[n].textContent;

function queryString(p) {
	var re = RegExp('[&?]' + p + '=([^&]*)');
	var matches;
	if (matches = re.exec(document.location)) {
		try { 
			return decodeURI(matches[1]);
		} catch (e) {
	return null;
// ==================================================
//    End temporary per-page unique CSS (Splarka)
// ==================================================

What this emulates is a recent addition to 1.9. In revision 17119 SkinTemplate.php and MonoBook.php: were changed to add another class to the <body></nowik> tag based off of the page name. $tpl->set( 'pageclass', 'page-'.Sanitizer::escapeId( $wgTitle->getPrefixedText() ) ); While I cannot emulate this perfectly, I can do something pretty similar. What my script above does is take the <nowiki><h1 class="firstHeading"> content and replace all non-alphanumeric characters into _ (safe for CSS), and then add it as a body class.

The major difference is, that on Special: pages, the <h1 class="firstHeading"> is sometimes very different from $wgTitle (and the URL is not trustworthy due to redirects).

What this means is, all page stylings can go into MediaWiki:Monobook.css, eg to hide the logo on recent changes: #p-logo {display:none;}

Even better, when we upgrade to 1.9, this will work with no javascript required, and should even work on *all* skins, simultaneously.

It also supports some debugging tricks, like &useclass=page-Main_Page and &debug=true (see source for details). example. --Splarka (talk) 09:58, 14 December 2006 (UTC)

Around Wikia's network

Random Wiki