Skin:Chameleon/Cookbook

This page is a collection of instructions on how to achieve more complex customizations of the Chameleon skin.

Problem:
I'm using user depending menus for a complex wiki. Therefore - with style monobook - we use the function "ModifySidebar" as described for monobook style.

Now I want to change to the Chameleon skin, but "ModifySidebar" doesn't work anymore.

Solution:
It is not really complex. The difference to skin Monotype in the HTML structure of the page is the following:

monotype structure

  ...        

chameleon structure

 ...    ...                  

Here is the solution: function ModifyMenu( action, section, name, link ) { try { switch ( section ) { case 'languages': var target = 'p-lang'; break; case 'toolbox': var target = 'p-tb'; break; case 'navigation': var target = 'p-navigation'; break; default: var target = 'p-' + section; break; }

if ( action == 'addMenu' ) { var node = document.getElementById( 'mw-navigation-collapse').getElementsByTagName('ul')[0]; var aNode = document.createElement( 'a' ); var ulNode = document.createElement( 'ul' ); var bNode = document.createElement( 'b' ); var liNode = document.createElement( 'li' ); bNode.className='caret'; aNode.appendChild( document.createTextNode( name ) ); aNode.className='dropdown-toggle'; aNode.setAttribute('data-toggle','dropdown'); aNode.appendChild(bNode); ulNode.className='dropdown-menu'; ulNode.id=target; liNode.appendChild( aNode ); liNode.appendChild( ulNode ); liNode.className='dropdown'; node.appendChild( liNode); }

if ( action == 'addItem' ) { var node = document.getElementById( target ); var aNode = document.createElement( 'a' ); var liNode = document.createElement( 'li' ); aNode.appendChild( document.createTextNode( name ) ); aNode.setAttribute( 'href', link ); liNode.appendChild( aNode ); node.appendChild( liNode ); }		if ( action == 'removeItem' ) { var list = document.getElementById( target ); var listelements = list.getElementsByTagName( 'li' ); for ( var i = 0; i < listelements.length; i++ ) { if (					listelements[i].getElementsByTagName( 'a' )[0].innerHTML == name ||					listelements[i].getElementsByTagName( 'a' )[0].href == link				) {					list.removeChild( listelements[i] ); }			}		}	} catch( e ) { // let's just ignore what's happened return; } } function CustomizeModificationsOfMenu { // adds links to box "Teststellung" ModifyMenu( 'addMenu', 'sandbox', 'Sandkastenmann'); ModifyMenu( 'addItem', 'sandbox', 'Sandkasten','Sandkasten'); ModifyMenu( 'addItem', 'sandbox', 'Sandkasten2','Sandkasten'); ModifyMenu( 'addItem', 'sandbox', 'Sandkasten3','Sandkasten'); ModifyMenu( 'removeItem', 'sandbox', 'Sandkasten','Sandkasten'); } addOnloadHook( CustomizeModificationsOfMenu );

First of all you have to add a new menu. With action 'addMenu' the second parameter is the identifier, with which we can work at next.