User:Jack Phoenix/CSS

Here are some assorted CSS and JS tips and tricks.

Collapsible portlets

A cool hack developed by Splarka. Works only on Monobook skin. To install it to your wiki, add the following to the appropriate pages:

MediaWiki:Common.css

/* collapsible portlets by Splarka */
h5.portletCollapsible {
	display: block;
	padding: 0;
	height: auto;
	border: 1px outset grey;
}
.portletCollapsible a {
	padding: 1px 1px .2em 15px;
	display: block;
	text-decoration: none;
	color: black;
}
.portletClosed {
	background: center left url("/skins/common/images/Arr_d.png") no-repeat;
}
.portletOpened {
	background: center left url("/skins/common/images/Arr_u.png") no-repeat;
}

MediaWiki:Common.js

// ============================================================
//	Collapsible Portlets (experimental)
// 	By Splarka (http://en.wikipedia.org/wiki/User:Splarka)
// ============================================================
function foldingPortlets() {
	var portlets = getElementsByClassName( document.getElementById( 'column-one' ), 'div', 'portlet' );
	var portskip = ['p-personal', 'p-cactions', 'p-logo', 'p-search', 'p-tb', 'p-messages'];
	var first = true;

	for( var i = 0; i < portlets.length; i++ ) {
		if( portskip.join( ' ' ).indexOf( portlets[i].id ) == -1 ) {
			var pd = portlets[i].getElementsByTagName( 'div' )[0];
			var ph = portlets[i].getElementsByTagName( 'h5' )[0];
			ph.className = 'portletCollapsible';
			pd.setAttribute( 'id', 'pbody-' + i );
			pd.style.display = 'none';

			var link = document.createElement( 'a' );
			var head = getAllText( ph );
			while( ph.firstChild ) {
				ph.removeChild( ph.firstChild );
			}
			link.appendChild( document.createTextNode( head ) );
			link.setAttribute( 'href', 'javascript:showPortlet(\'' + i + '\');' );
			link.setAttribute( 'id', 'plink-' + i );
			link.className = 'portletClosed';
			ph.appendChild( link );

			if( first == true ) {
				first = false; 
				showPortlet( i );
			}
		}
	}
}
if( skin = 'monobook' && !window.portletsNormal ) {
	addOnloadHook( foldingPortlets );
}

function getAllText( thing ) {
	if( thing.nodeType == 3 ) {
		return thing.nodeValue;
	}
	var text = new Array();
	var i = 0;
	while( thing.childNodes[i] ) {
		text[text.length] = getAllText( thing.childNodes[i] );
		i++;
	}
	return text.join( '' );
}

function showPortlet( id ) {
	var pd = document.getElementById( 'pbody-' + id );
	var pl = document.getElementById( 'plink-' + id );

	if( pd.style.display == 'none' ) {
		pd.style.display = 'block';
		pl.className = 'portletOpened';
	} else {
		pd.style.display = 'none';
		pl.className = 'portletClosed';
	}
}

// ==================================================
//	End Collapsible Portlets
// ==================================================

Dynamic topics

Yet another useful hack by Splarka. To install it to your wiki, add the following to the appropriate pages:

MediaWiki:Common.css

/* dynamic topic headers/styles */
#dynamictopicwrapper {
	padding: 2px;
	margin-top: 12px;
}
#dynamictopicwrapper h2 {
	border: 1px solid #cccccc;
	padding: 2px;
}
#dynamictopicwrapper .dynamictopic {
	border: 1px solid #cccccc;
	padding: 2px;
	margin-bottom: 6px;
}
#dynamictopicwrapper .dtshowlink {
	text-decoration: none;
}
#dynamictopicwrapper .dynamicstatus {
	padding-left: 10px;
	font-size: 75%;
}

MediaWiki:Common.js

// ================================================================================
//  START dynamic topics
// ================================================================================
var dsHide = '[hide]';
var dsShow = '[show]';
var dsShowOne = true;
var dsEnnumerate = true;
addOnloadHook( dynamicTopicsInit );
function dynamicTopicsInit() {
	if( !document.getElementById( 'dynamictopicwrapper' ) ) {
		return;
	}
	var dtw = document.getElementById( 'dynamictopicwrapper' );
	var out = document.getElementById( 'out' );
	var h2 = getElementsByClassName( dtw, 'span', 'mw-headline' );
	var dt = getElementsByClassName( dtw, 'div', 'dynamictopic' );
	if( h2.length == dt.length ) {
		for( var i = 0; i < h2.length; i++ ) {
			var txt = h2[i].cloneNode( true );
			removeNodes( h2[i] );
			var a = document.createElement( 'a' );
			a.setAttribute( 'href', 'javascript:dtShow(' + i + ',' + h2.length + ')' );
			a.setAttribute( 'class', 'dtshowlink' );
			a.appendChild( txt );
			var st = document.createElement( 'span' );
			st.setAttribute( 'id', 'ds_' + i );
			st.setAttribute( 'class', 'dynamicstatus' );
			st.appendChild( document.createTextNode( dsShow ) );
			a.appendChild( st );
			if( dsEnnumerate == true ) {
				h2[i].appendChild( document.createTextNode( i + 1 + '. ' ) );
			}
			h2[i].appendChild( a );
			dt[i].style.display = 'none';
			h2[i].id = 'dh_' + i;
			dt[i].id = 'dt_' + i;
		}
	}
}

function dtShow( num, total ) {
	if( document.getElementById( 'dt_' + num ).style.display == '' ) {
		document.getElementById( 'dt_' + num ).style.display = 'none';
		removeNodes( document.getElementById( 'ds_' + num ) );
		document.getElementById( 'ds_' + num ).appendChild( document.createTextNode( dsShow ) );
	} else {
		for( var i = 0; i < total; i++ ) {
			if( i == num ) {
				document.getElementById( 'dt_' + i ).style.display = '';
				removeNodes( document.getElementById( 'ds_' + i ) );
				document.getElementById( 'ds_' + i ).appendChild( document.createTextNode( dsHide ) );
			} else {
				if( dsShowOne == true ) {
					document.getElementById( 'dt_' + i ).style.display = 'none';
					removeNodes( document.getElementById( 'ds_' + i ) );
					document.getElementById( 'ds_' + i ).appendChild( document.createTextNode( dsShow ) );
				}
			}
		}
	}
}

function removeNodes( obj ) {
	while( obj.firstChild ) {
		obj.removeChild( obj.firstChild );
	}
}

// ================================================================================
//  END dynamic topics
// ================================================================================

Wikimania skin

Yet another modification to the popular Monobook skin. I didn't create this myself, but instead got it from Wikimania 2008 wiki. It was created by Danny B. for Wikimania wiki.

/* Wikimania colors Monobook remix by Danny B. */
/* Source: http://wikimania2008.wikimedia.org/wiki/MediaWiki:Monobook.css */

#content,
h1,
h2,
#catlinks,
#toc,
.toc,
.mw-warning,
.pBody,
#p-cactions li {
	border-color: #0082c0;
}

h1.firstHeading {
	color: #0082c0;
}

h2 {
	margin-top: .6em;
	padding: .2em .4em;
}

h3 {
	border-bottom: 1px solid #f30000;
	padding: .2em .4em;
}

hr {
	background-color: #0082c0;
	color: #0082c0;
}

fieldset,
#p-cactions li.selected {
	border-color: #f30000;
}

pre,
#footer {
	border-color: #aaa;
}

body {
	background-image: none;
}

.portlet a,
#p-personal li a,
#p-cactions li a,
#footer a {
	color: #333;
}

#bodyContent a {
	color: #006290;
}

#bodyContent a:visited {
	color: #7a4160;
}

#bodyContent a.new:visited {
	color: #7a0000;
}

#bodyContent a.new,
#p-personal a.new,
#p-cactions li.new a {
	color: #f30000;
}

#bodyContent a.extiw {
	color: #36b;
}