Skin:Chameleon/Cookbook
This page is a collection of instructions on how to achieve more complex customizations of the Chameleon skin.
Menu depending on the logged-in user[edit]
Mediawiki | 1.26 ??? |
Chameleon | 1.3 (with standard layout)??? |
Problem:[edit]
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:[edit]
It is not really complex. The difference to skin Monotype in the HTML structure of the page is the following:
monotype structure
<div>
<ul id="...">
<li>
...
</li>
</ul>
</div>
chameleon structure
<div>
<ul>
<a>...</a>
<li>
<ul id="...">
<li>
...
</li>
</ul>
</li>
</ul>
</div>
Here is the JavaScript code that works for Chameleon: (click on Expand)
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 );
In CustomizeModificationsOfMenu
the new menu is added. First of all we add the new menu sandbox
, then we add its menu items.