wiki:UabVectorTheme
Last modified 6 years ago Last modified on 05/18/12 14:51:55

Overview

The initial development of UabVector theme was done on mediawiki 1.16.1 version, the same version of the docs platform. Mediawiki 1.17.0 introduced significant changes in its source code. The main change was the introduction of ResourceLoader, a new framework for delivering client-side resources such as JavaScript and CSS. As a result, we had to adapt the 1.16.1 UabVector theme to the latest stable 1.18.1.

The tutorial that helped in the adaptation of uabvector theme was by Daniel Friesen of RedWerks. This is a really great tutorial, compared to all the mediawiki skinning material. Also useful is creating a mediawiki subskin also by Daniel Freisen.

5-minute install guide to 1..18.1 UabVector Theme

The following steps are a quick-install guide to install uabvector theme to a mediawiki installation.

  • Create the mysql database, user
  • Clone the mediawiki git repo and create a new branch
    $ cd ~/public_html
    $ git clone git.uabgrid.uab.edu:~git/repositories/mediawiki.git tgw
    $ cd tgw
    $ git checkout -b uabvector-1.18.1
    
  • Create wiki manually (through web-interface)
  • Pull the code from the 1.18.1 uabvector repo
    $ git pull http://lab.ac.uab.edu/~ppreddy/git/uabvector.git
    
  • Edit LocalSettings for site name, database parameters
  • Wiki with UAB's Vector theme will be available at http://localhost/~username/tgw/index.php5/Main_Page

Adapting Uabvector theme to mediawiki 1.18.1

Following were the steps taken to adapt Jpr's 1.16.1 Uabvector theme to 1.18.1.

Create MySQL Database, User

  • Created a mysql database and user for developing the uabvector theme for 1.18.1 wiki
    ppreddy@infinity:~/public_html/tgw$ mysql -u root -p -hinfinity.site 
    Enter password:                                                                  
    Welcome to the MySQL monitor.  Commands end with ; or \g
    Your MySQL connection id is 3747                                
    Server version: 5.5.21 MySQL Community Server (GPL)          
    Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.
    Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners.
    Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
    
    mysql> create database tgw;
    mysql> create user tgw@'%' identified by 'tgw';
    mysql> grant all privileges on tgw.* to tgw@'%' identified by 'tgw';
    mysql> flush privileges;   
    

Clone Git Repos

  • Cloned Jpr's git repo which has the 1.16.1 uabvector theme files
    ppreddy@infinity:~/public_html/git$ git clone cheaha:~jpr/git/mediawiki-uabvector.git
    
  • Cloned the mediawiki git repo
    ppreddy@infinity:~$ cd ~/public_html
    ppreddy@infinity:~/public_html$ git clone git.uabgrid.uab.edu:~git/repositories/mediawiki.git tgw
    
  • The HEAD for the mediawiki git repo is currently pointing at the 1.18.1 source code. So, just created a new branch off of this HEAD, so that the master branch was left untainted.
    $ cd tgw
    $ git checkout -b tgw-20120510
    
    ppreddy@infinity:~/public_html/tgw$ git branch
    master
    tg
    * tg-20120510
    

Create the wiki

  • Created the wiki manually through the web interface, mentioned the above db params for the same.
  • Following Daniel Freisen's skinning tutorial, created the following folder and files for uabvector
    $ cd skins 
    $ mkdir uabvector
    $ touch uabvector/uabvector.php
    $ touch uabvector/UabVector.skin.php
    $ touch uabvector/UabVector.i18n.php
    

Get the CSS, JS, Docs Logos

  • Downloaded all the style sheets from UAB Joomla theme
    ppreddy@infinity:~/Documents$ cat uab-joomla-theme-css-files
     http://www.uab.edu/brand/styles/3.0/css/normalize.css
     http://www.uab.edu/brand/styles/3.0/css/menus.css
     http://www.uab.edu/brand/styles/3.0/css/basic.css
     http://www.uab.edu/brand/styles/3.0/css/positional.css
     http://www.uab.edu/brand/styles/3.0/css/functional.css
     http://www.uab.edu/brand/styles/3.0/css/ct/gray_ct.css
     http://www.uab.edu/brand/styles/3.0/css/sb/tan_sb.css
     http://www.uab.edu/brand/styles/3.0/css/sb/teal_sb.css
     http://www.uab.edu/brand/styles/3.0/css/bg/backsplash-green_bg.css
     http://www.uab.edu/brand/styles/3.0/css/fonts/opensans_font.css
    
    ppreddy@infinity:~/Documents$ cd ~/public_html/tgw/skins/uabvector
    
    ppreddy@infinity:~/public_html/tgw/skins/uabvector$ wget -i ~/Documents/uab-joomla-theme-css-files
    
  • Copied all the css, javascript from mediawiki's Vector theme
    ppreddy@infinity:~/public_html/tgw/skins/uabvector$ cp -r ../vector/* . 
    
  • Copied John-Paul's modifications to vector theme (main-ltr.css). This file has the major modifications to mediawiki's vector theme to suit UAB's joomla styling
    ppreddy@infinity:~/public_html/tgw/skins/uabvector$ cp ~/public_html/git/mediawiki-uabvector/skins/uabvector/main-ltr.css .
    
  • Copied docs logo and powered by uabgrid logo from Jpr's git repo
    ppreddy@infinity:~/public_html/tgw/skins/uabvector$ cp ~/public_html/git/mediawiki-uabvector/skins/uabvector/docs-logo.png .
    
    ppreddy@infinity:~/public_html/tgw/skins/uabvector$ cp ~/public_html/git/mediawiki-uabvector/skins/uabvector/powered-by-uabgrid.png .
    

Create the Skin

Boiler Plate for credits, add skin, autoload classes, resourceloader

  • Edit the file skins/uabvector/uabvector.php with the boiler plate for credits, to add the skin, autoload classes, add i18n, and add a resourceloader module.
    <?php
    /**
     *  Uab Vector skin
     *  
     *  @file
     *  @ingroup Skins
     *  @author John-Paul Robinson (http://docs.uabgrid.uab.edu/wiki/User:Jpr@uab.edu)
     *  @license http://www.gnu.org/copyleft/gpl.html GNU General Public License 2.0 or later
     */
    
    if( !defined( 'MEDIAWIKI' ) ) die( "This is an extension to the MediaWiki package and cannot be run standalone." );
    
    $wgExtensionCredits['skin'][] = array (
                    'path' => __FILE__,
                    'name' => 'Uab Vector',
                    'url' => "[http://docs.uabgrid.uab.edu/wiki/User:Jpr@uab.edu]",
                    'author' => '[http://docs.uabgrid.uab.edu/wiki/User:Jpr@uab.edu John-Paul Robinson]',
                    'descriptionmsg' => 'Uab Vector is mediawiki Vector theme adapted to Uab Joomla theme',
    );
    
    $wgValidSkinNames['uabvector'] = 'UabVector';
    $wgAutoloadClasses['SkinUabVector'] = dirname(__FILE__).'/UabVector.skin.php';
    $wgExtensionMessagesFiles['UabVector'] = dirname(__FILE__).'/UabVector.i18n.php';
    
    $wgResourceModules['skins.uabvector'] = array(
                    'styles' => array(
                                    'uabvector/main-ltr.css' => array( 'media' => 'screen' ),
                                    'uabvector/backsplash-green_bg.css' => array( 'media' => 'screen' ),
                                    'uabvector/positional.css' => array( 'media' => 'screen' ),
                                    'uabvector/basic.css' => array( 'media' => 'screen' ),
                                    'uabvector/normalize.css' => array( 'media' => 'screen' ),
                                    'uabvector/menus.css' => array( 'media' => 'screen' ),
                                    'uabvector/functional.css' => array( 'media' => 'screen' ),
                                    'uabvector/gray_ct.css' => array( 'media' => 'screen' ),
                                    'uabvector/tan_sb.css' => array( 'media' => 'screen' ),
                                    'uabvector/teal_sb.css' => array( 'media' => 'screen' ),
                                    'uabvector/opensans_font.css' => array( 'media' => 'screen' ),
                                    ),
                    'remoteBasePath' => &$GLOBALS['wgStylePath'],
                    'localBasePath' => &$GLOBALS['wgStyleDirectory'],
    );
    
    

Boilerplate for Internationalization

Edit the file skins/uabvector/UabVector.i18n.php with the boiler plate for internationalization.

<?php
/**
 *  Internationalization file for skin Uab Vector.
 *  
 *  @file
 *  @ingroup Skins
 */

$messages = array();

/** English
 *  @author Poornima Pochana
 */
$messages['en'] = array(
        'skinname-uabvector' => "Uab Vector",
        'uabvector-desc' => "Uab Vector is based on mediawiki Vector theme adapted to Joomla theme",
);

Boilerplate for the actual skin

Edit the file skins/uabvector/UabVector.skin.php with the following code. This is where the bulk of the actual skin is:

<?php
/**
 * Skin file for skin Uab Vector.
 *
 * @file
 * @ingroup Skins
 */

/*
 *  SkinTemplate class for Uab Vector skin
 *  @ingroup Skins
 */
class SkinUabVector extends SkinTemplate {

                var $skinname = 'uabvector', $stylename = 'uabvector',
                                        $template = 'UabVectorTemplate', $useHeadElement = true;

                public function initPage( OutputPage $out ) {
                global $wgLocalStylePath, $wgRequest;

                parent::initPage( $out );

                // Append CSS which includes IE only behavior fixes for hover support -
                // this is better than including this in a CSS fille since it doesn't
                // wait for the CSS file to load before fetching the HTC file.
                $min = $wgRequest->getFuzzyBool( 'debug' ) ? '' : '.min';
                $out->addHeadItem( 'csshover',
                        '<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
                                htmlspecialchars( $wgLocalStylePath ) .
                                "/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
                );

                $out->addModuleScripts( 'skins.uabvector' );
        }
                /**
                 *  @param $out OutputPage object
                 */
                function setupSkinUserCss( OutputPage $out ){
                        parent::setupSkinUserCss( $out );
                        $out->addModuleStyles( "skins.uabvector" );
                }

}

/**
 *  * BaseTemplate class for Uab Vector skin
 *  * @ingroup Skins
 */
class UabVectorTemplate extends BaseTemplate {

                /**
                 * * Outputs the entire contents of the page
                 */
                public function execute() {
                                global $wgLang, $wgVectorUseIconWatch;

                $this->skin = $this->data['skin'];

                // Build additional attributes for navigation urls
                $nav = $this->data['content_navigation'];

                if ( $wgVectorUseIconWatch ) {
                        $mode = $this->skin->getTitle()->userIsWatching() ? 'unwatch' : 'watch';
                        if ( isset( $nav['actions'][$mode] ) ) {
                                $nav['views'][$mode] = $nav['actions'][$mode];
                                $nav['views'][$mode]['class'] = rtrim( 'icon ' . $nav['views'][$mode]['class'], ' ' );
                                $nav['views'][$mode]['primary'] = true;
                                unset( $nav['actions'][$mode] );
                        }
                }

                $xmlID = '';
                foreach ( $nav as $section => $links ) {
                        foreach ( $links as $key => $link ) {
                                if ( $section == 'views' && !( isset( $link['primary'] ) && $link['primary'] ) ) {
                                        $link['class'] = rtrim( 'collapsible ' . $link['class'], ' ' );
                                }

                                $xmlID = isset( $link['id'] ) ? $link['id'] : 'ca-' . $xmlID;
                                $nav[$section][$key]['attributes'] =
                                        ' id="' . Sanitizer::escapeId( $xmlID ) . '"';
                                if ( $link['class'] ) {
                                        $nav[$section][$key]['attributes'] .=
                                                ' class="' . htmlspecialchars( $link['class'] ) . '"';
                                        unset( $nav[$section][$key]['class'] );
                                }
                                if ( isset( $link['tooltiponly'] ) && $link['tooltiponly'] ) {
                                        $nav[$section][$key]['key'] =
                                                Linker::tooltip( $xmlID );
                                } else {
                                        $nav[$section][$key]['key'] =
                                                Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( $xmlID ) );
                                }
                        }
                }
                $this->data['namespace_urls'] = $nav['namespaces'];
                $this->data['view_urls'] = $nav['views'];
                $this->data['action_urls'] = $nav['actions'];
                $this->data['variant_urls'] = $nav['variants'];

                // Reverse horizontally rendered navigation elements
                if ( $wgLang->isRTL() ) {
                        $this->data['view_urls'] =
                                array_reverse( $this->data['view_urls'] );
                        $this->data['namespace_urls'] =
                                array_reverse( $this->data['namespace_urls'] );
                        $this->data['personal_urls'] =
                                array_reverse( $this->data['personal_urls'] );
                }                                               
                        // Suppress warnings to prevent notices about missing indexes in $this->data
                        wfSuppressWarnings();
                        // Output HTML Page
                        // headelement corresponds to the "body" element
                        $this->html( 'headelement' ); ?>

                        <!-- BEGIN: Markup -->
                        <!-- UAB white header buffer -->
                        <div id="winston-whitebar"></div>
                        
                        <!-- UAB global content wrapper -->
                        <div id="wrapper">
                                <!-- whitebar -->
                                <div id="whitebar">
                                        <!-- logo -->
                                        <div id="logo">
                                                <a href="/wiki/">
                                                        <img alt="uab logo" src="http://www.uab.edu/brand/sitelogo.jpg"> 
                                                </a>
                                        </div>
                                        <!-- /logo -->          
                                        <!-- search -->
                                        <div id="search">
                                                <?php $this->renderNavigation( array( 'SEARCH' ) ); ?>
                                        </div>
                                        <!-- /search -->
                                        <!-- quicklinks -->
                                        <div id="quicklinks"></div>
                                        <!-- /quicklinks -->
                                        <div style="clear:both"></div>
                                </div>
                                <!-- /whitebar -->
                                <div style="clear:both"></div>
                                <!-- banner -->
                                <div id="banner">                  
                                        <!-- logo -->
                                        <div id="p-logo">
                                                <a style="background-image: url(<?php $this->text( 'logopath' ) ?>);"
                                                        href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ) ?>"
                                                         <?php echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) ) ?>>
                                                </a>
                                        </div>
                                        <!-- /logo -->
                </div>
                <!-- /banner --> 
                <div style="clear:both"></div>
                <!-- ribbon -->
                <div id="ribbon"></div>
                <!-- /ribbon -->
                <div id="hide-mw-page-base" class="noprint"></div>
                                <div id="hide-mw-head-base" class="noprint"></div>
                <!-- whitebox-shadow -->
                                <div id="whitebox-shadow">
                                        <!-- whitebox -->
                                        <div id="whitebox">
                                                <!-- leftcolumn -->
                                                <div id="leftcolumn">
                                                        <!-- sidebar -->
                                                        <div class="sidebar">
                                                                <!-- panel -->
                                                                <div id="mw-panel" class="noprint">
                                                                        <?php $this->renderPortals( $this->data['sidebar'] ); ?>
                                                                </div>
                                                                <!-- /panel -->
                                                        </div>
                                                        <!-- /sidebar -->
                                                </div>
                                                <!-- /leftcolumn -->
                                                <!-- maincolumn-l-r -->
                                                <div id="maincolumn-l-r">
                                                        <!-- header -->
                                                        <div id="mw-head" class="noprint">
                                                                <?php $this->renderNavigation( 'PERSONAL' ); ?>
                                                                <div id="left-navigation">
                                                                        <?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
                                                                </div>
                                                                <div id="right-navigation">
                                                                        <?php $this->renderNavigation( array( 'VIEWS', 'ACTIONS' ) ); ?>
                                                                </div>
                                                        </div>
                                                        <!-- /header -->
                                                        <!-- content -->
                                                                <div id="content" <?php $this->html('specialpageattributes') ?>>
                                                                <a id="top"></a>
                                                                <div id="mw-js-message" style="display:none;"<?php $this->html('userlangattributes') ?>></div>
                                                                <?php if ( $this->data['sitenotice'] ): ?>
                                                                        <!-- sitenotice -->
                                                                        <div id="siteNotice"><?php $this->html( 'sitenotice' ) ?></div>
                                                                        <!-- /sitenotice -->
                                                                <?php endif; ?>
                                                                <!-- firstHeading -->
                                                                <h1 id="firstHeading" class="firstHeading"><?php $this->html( 'title' ) ?></h1>
                                                                <!-- /firstHeading -->
                                                                <!-- bodyContent -->
                                                                <div id="bodyContent">
                                                                                <!-- tagline -->
                                                                                <h3 id="siteSub"><?php $this->msg( 'tagline' ) ?></h3>
                                                                                <!-- /tagline -->
                                                                                <!-- subtitle -->
                                                                                <div id="contentSub"<?php $this->html('userlangattributes') ?>><?php $this->html( 'subtitle' ) ?></div>
                                                                                <!-- /subtitle -->
                                                                                <?php if ( $this->data['undelete'] ): ?>
                                                                                        <!-- undelete -->
                                                                                        <div id="contentSub2"><?php $this->html( 'undelete' ) ?></div>
                                                                                        <!-- /undelete -->
                                                                                <?php endif; ?>
                                                                                <?php if($this->data['newtalk'] ): ?>
                                                                                        <!-- newtalk -->
                                                                                        <div class="usermessage"><?php $this->html( 'newtalk' )  ?></div>
                                                                                        <!-- /newtalk -->
                                                                                <?php endif; ?>
                                                                                <?php if ( $this->data['showjumplinks'] ): ?>
                                                                                        <!-- jumpto -->
                                                                                        <div id="jump-to-nav">
                                                                                                <?php $this->msg( 'jumpto' ) ?> <a href="#mw-head"><?php $this->msg( 'jumptonavigation' ) ?></a>,
                                                                                                <a href="#p-search"><?php $this->msg( 'jumptosearch' ) ?></a>
                                                                                        </div>
                                                                                        <!-- /jumpto -->
                                                                                <?php endif; ?>
                                                                                <!-- bodytext -->
                                                                                <?php $this->html( 'bodytext' ) ?>
                                                                                <!-- /bodytext -->
                                                                                <?php if ( $this->data['catlinks'] ): ?>
                                                                                        <!-- catlinks -->
                                                                                        <?php $this->html( 'catlinks' ); ?>
                                                                                        <!-- /catlinks -->
                                                                                <?php endif; ?>
                                                                                <?php if ( $this->data['dataAfterContent'] ): ?>
                                                                                        <!-- dataAfterContent -->
                                                                                        <?php $this->html( 'dataAfterContent' ); ?>
                                                                                        <!-- /dataAfterContent -->
                                                                                <?php endif; ?>
                                                                        <div class="visualClear"></div>
                                                                </div>
                                                                <!-- /bodyContent -->
                                                        </div>
                                                        <!-- /content -->
                                                </div>
                                                <!-- /maincolumn-l-r -->        
                                        </div>
                                        <!-- /whitebox -->
                                </div>
                                <!-- /whitebox-shadow -->
                <!-- footer -->
                <div id="footer"<?php $this->html( 'userlangattributes' ) ?>>
                        <?php foreach( $this->getFooterLinks() as $category => $links ): ?>
                                <?php if ($category == 'info'): ?>
                                        <?php foreach( $links as $link ): ?>
                                                <ul id="footer-info"><?php $this->html( $link ) ?></ul>
                                        <?php endforeach; ?>
                                <?php endif; ?>
                                <?php if ($category == 'places'): ?>
                                        <?php foreach( $links as $link ): ?>
                                                <ul id="footer-places"><?php $this->html( $link ) ?></ul>
                                        <?php endforeach; ?>
                                <?php endif; ?>
                        <?php endforeach; ?>
                        <ul id="footer-icons" class="noprint">
                                <?php if ( $this->data['poweredbyico'] ): ?>
                                        <?php $this->html( 'poweredbyico' ) ?>
                                        <a href="http://dev.uabgrid.uab.edu">
                                           <img width="88" height="31" alt="Powered by UABgrid" src="/~ppreddy/tgw/skins/uabvector/powered-by-uabgrid.png">
                                        </a>
                                <?php endif; ?>
                                <?php if ( $this->data['copyrightico'] ): ?>
                                        <?php $this->html( 'copyrightico' ) ?>
                                <?php endif; ?>
                        </ul>
                        <div style="clear:both"></div>
                </div>
                <!-- /footer -->
                        </div>
                        <!-- /wrapper -->
                        <!-- fixalpha -->
                        <script type="<?php $this->text( 'jsmimetype' ) ?>"> if ( window.isMSIE55 ) fixalpha(); </script>
                        <!-- /fixalpha -->
                        <!-- END: Markup -->
                        <?php $this->printTrail(); ?>
                        </body>
                        </html>
                        <?php
                        wfRestoreWarnings();
                }

        /**
         * Render a series of portals
         *
         * @param $portals array
         */
        private function renderPortals( $portals ) {
                // Force the rendering of the following portals
                if ( !isset( $portals['SEARCH'] ) ) {
                        $portals['SEARCH'] = true;
                }
                if ( !isset( $portals['TOOLBOX'] ) ) {
                        $portals['TOOLBOX'] = true;
                }
                if ( !isset( $portals['LANGUAGES'] ) ) {
                        $portals['LANGUAGES'] = true;
                }
                // Render portals
                foreach ( $portals as $name => $content ) {
                        if ( $content === false )
                                continue;

                        echo "\n<!-- {$name} -->\n";
                        switch( $name ) {
                                case 'SEARCH':
                                        break;
                                case 'TOOLBOX':
                                        $this->renderPortal( 'tb', $this->getToolbox(), 'toolbox', 'SkinTemplateToolboxEnd' );
                                        break;
                                case 'LANGUAGES':
                                        if ( $this->data['language_urls'] ) {
                                                $this->renderPortal( 'lang', $this->data['language_urls'], 'otherlanguages' );
                                        }
                                        break;
                                default:
                                        $this->renderPortal( $name, $content );
                                break;
                        }
                        echo "\n<!-- /{$name} -->\n";
                }
        }
        
        private function renderPortal( $name, $content, $msg = null, $hook = null ) {
                if ( !isset( $msg ) ) {
                        $msg = $name;
                }
                ?>
                <div class="portal" id='<?php echo Sanitizer::escapeId( "p-$name" ) ?>'<?php echo Linker::tooltip( 'p-' . $name ) ?>>
                        <!-- moduletable -->
                        <div class="moduletable">
                        <?php $this->html( 'userlangattributes' ) ?><?php $msgObj = wfMessage( $msg ); echo htmlspecialchars( $msgObj->exists() ? $msgObj->text() : $msg ); ?>
                        <div class="body">
                                <?php
                                        if ( is_array( $content ) ): ?>
                                                <ul>
                                                        <?php
                                                                foreach( $content as $key => $val ): ?>
                                                                        <?php echo $this->makeListItem( $key, $val ); ?>
                                                                <?php endforeach;
                                                        if ( isset( $hook ) ) {
                                                                wfRunHooks( $hook, array( &$this, true ) );
                                                        }
                                                        ?>
                                                </ul>
                                                <?php
                                        else: ?>
                                                <?php echo $content; /* Allow raw HTML block to be defined by extensions */ ?>
                                <?php endif; ?>
                        </div>
                        </div>
                        <!-- /moduletable -->
                </div>
                <?php
        }
        /**
         * Render one or more navigations elements by name, automatically reveresed
         * when UI is in RTL mode
         */
        private function renderNavigation( $elements ) {
                global $wgVectorUseSimpleSearch, $wgVectorShowVariantName, $wgUser, $wgLang;

                // If only one element was given, wrap it in an array, allowing more
                // flexible arguments
                if ( !is_array( $elements ) ) {
                        $elements = array( $elements );
                // If there's a series of elements, reverse them when in RTL mode
                } elseif ( $wgLang->isRTL() ) {
                        $elements = array_reverse( $elements );
                }
                // Render elements
                foreach ( $elements as $name => $element ) {
                        echo "\n<!-- {$name} -->\n";
                        
                        switch ( $element ) {
                                case 'NAMESPACES': ?>
                                        <div id="p-namespaces" class="vectorTabs">
                                                <h5><?php $this->msg( 'namespaces' ) ?></h5>
                                                <ul<?php $this->html( 'userlangattributes' ) ?>>
                                                        <?php foreach ( $this->data['namespace_urls'] as $link ): ?>
                                                                <li <?php echo $link['attributes'] ?>>
                                                                        <span>
                                                                                <a href="<?php echo htmlspecialchars( $link['href'] ) ?>"
                                                                                        <?php echo $link['key'] ?>><?php echo htmlspecialchars( $link['text'] ) ?>
                                                                                </a>
                                                                        </span>
                                                                </li>
                                                        <?php endforeach; ?>
                                                </ul>
                                        </div>
                                <?php
                                break;
                                case 'VARIANTS':
                                ?>
                                <div id="p-variants" class="vectorMenu<?php if ( count( $this->data['variant_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
                                <?php if ( $wgVectorShowVariantName ): ?>
                                <h4>
                                <?php foreach ( $this->data['variant_urls'] as $link ): ?>
                                <?php if ( stripos( $link['attributes'], 'selected' ) !== false ): ?>
                                <?php echo htmlspecialchars( $link['text'] ) ?>
                                <?php endif; ?>
                                <?php endforeach; ?>
                                </h4>
                                <?php endif; ?>
                                <h5><span><?php $this->msg( 'variants' ) ?></span><a href="#"></a></h5>
                                <div class="menu">
                                <ul<?php $this->html( 'userlangattributes' ) ?>>
                                <?php foreach ( $this->data['variant_urls'] as $link ): ?>
                                <li<?php echo $link['attributes'] ?>><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php echo htmlspecialchars( $link['text'] ) ?></a></li>
                                <?php endforeach; ?>
                                </ul>
                                </div>
                                </div>
                                <?php
                                break;
                                case 'VIEWS':
                                ?>
                                <div id="p-views" class="vectorTabs<?php if ( count( $this->data['view_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
                                <h5><?php $this->msg('views') ?></h5>
                                <ul<?php $this->html('userlangattributes') ?>>
                                <?php foreach ( $this->data['view_urls'] as $link ): ?>
                                <li<?php echo $link['attributes'] ?>><span><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php
                                // $link['text'] can be undefined - bug 27764
                                if ( array_key_exists( 'text', $link ) ) {
                                echo array_key_exists( 'img', $link ) ?  '<img src="' . $link['img'] . '" alt="' . $link['text'] . '" />' : htmlspecialchars( $link['text'] );
                                }
                                ?></a></span></li>
                                <?php endforeach; ?>
                                </ul>
                                </div>
                                <?php
                                break;
                                case 'ACTIONS':
                                ?>
                                <div id="p-cactions" class="vectorMenu<?php if ( count( $this->data['action_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
                                <h5><span><?php $this->msg( 'actions' ) ?></span><a href="#"></a></h5>
                                <div class="menu">
                                <ul<?php $this->html( 'userlangattributes' ) ?>>
                                <?php foreach ( $this->data['action_urls'] as $link ): ?>
                                <li<?php echo $link['attributes'] ?>><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php echo htmlspecialchars( $link['text'] ) ?></a></li>
                                <?php endforeach; ?>
                                </ul>
                                </div>
                                </div>
                                <?php
                                break;
                                case 'PERSONAL':
                                ?>
                                <div id="p-personal" class="<?php if ( count( $this->data['personal_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
                                <h5><?php $this->msg( 'personaltools' ) ?></h5>
                                <ul<?php $this->html( 'userlangattributes' ) ?>>
                                <?php                   foreach( $this->getPersonalTools() as $key => $item ) { ?>
                                <?php echo $this->makeListItem( $key, $item ); ?>
                                
                                <?php                   } ?>
                                </ul>
                                </div>
                                <?php
                                break;
                                case 'SEARCH':
                                ?>
                                <div id="p-search">
                                <h5<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h5>
                                <form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
                                <input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
                                <?php if ( $wgVectorUseSimpleSearch && $wgUser->getOption( 'vector-simplesearch' ) ): ?>
                                <div id="simpleSearch">
                                <?php if ( $this->data['rtl'] ): ?>
                                <?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->skin->getSkinStylePath( 'images/search-rtl.png' ) ) ); ?>
                                <?php endif; ?>
                                <?php echo $this->makeSearchInput( array( 'id' => 'searchInput', 'type' => 'text' ) ); ?>
                                <?php if ( !$this->data['rtl'] ): ?>
                                <?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->skin->getSkinStylePath( 'images/search-ltr.png' ) ) ); ?>
                                <?php endif; ?>
                                </div>
                                <?php else: ?>
                                <?php echo $this->makeSearchInput( array( 'id' => 'searchInput' ) ); ?>
                                <?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ); ?>
                                <?php echo $this->makeSearchButton( 'fulltext', array( 'id' => 'mw-searchButton', 'class' => 'searchButton' ) ); ?>
                                <?php endif; ?>
                                </form>
                                </div>
                                <?php
                                
                                break;
                                }
                                echo "\n<!-- /{$name} -->\n";
                                }
        }
} // class UabVectorTemplate extends BaseTemplate {

LocalSettings

Edit LocalSettings.php to change the default logo and install the skin

$wgLogo             = "$wgStylePath/uabvector/docs-logo.png";

# Uab Vector skin
require_once( "$IP/skins/uabvector/uabvector.php" );

Skin Adaptations

Doing all the above steps, would result in the following skin.

screenshot of top portion of the uab vector theme for mediawiki 1.18.1 screenshot of footer of the uab vector theme for mediawiki 1.18.1

Jpr's 1.16.1 UabVector theme was adapted to the 1.18.1 code base with the following changes:

  • Changed the relative url paths for images in UAB's Joomla style sheets to absolute http path.
  • Added to sidebar, the element <div class="moduletable"> to match font size and display for sidebar nav and toolbox titles
  • order style sheets in uabvector.php as they are rendered by the uab joomla theme
  • increase margin and padding length for footer places

Attachments