Manual talk:Skinning/Vector

Update for newer versions

This guide does not work with new versions of Vector and Mediawiki, and neither does the external guide linked to on the top of the page.

Does any one know of a new guide to duplicate / rename the Vector skin? Wissamkhatib (talk) 18:52, 26 November 2014 (UTC)

---

I have duplicated folder "/skins/vector" into "/skins/foobar", then duplicated files Vector.php and Vector.deps.php into FooBar.php and FooBar.deps.php and after that changed the mentioned in manual words in FooBar.php and added a code $wgResourceModules['skins.runavector'] = array(...); just after the "if !defined (' MEDIAWIKI' ){...} And I've got en error "Call to a member function getGroup() on a non-object in /var/www/runa/includes/OutputPage.php on line 2707". How can I fix that error?

Waltztime: Unfortunately, it is unclear to me what "register your skin's module: in FooBar.php's global scope:" means. How do you do that? Where do you put this code snippet? It would improve this page if this was made more explicit and concrete. --Waltztime 00:25, 13 September 2011 (UTC)

SeizamDev: MediaWiki [1.17] needs registration of skin in resources/Resources. This solves the error reported above. But registering a second time inside FooBar.php seems redundant (the new skin works without it). This (kind of) answers Waltztime question above. What about removing this from the instruction? SeizamDev 10:12, 24 October 2011 (UTC)

registering the skin by editing resources/Resources should not be necessary. It will do the job of course, but editing a core file should not be part of adding a new skin. - 95.96.101.60 10:22, 24 October 2011 (UTC)

The problem, as far as I can tell, is that setting $wgResourceModules['skins.foobar'] in FooBar.php's global scope doesn't actually seem to work - it doesn't appear to be executed. However, there is an easy way to fix it: set it in your skin's constructor! eg:

class SkinFooBar extends SkinTemplate {

    var $skinname = 'foobar', $stylename = 'foobar',
        $template = 'FooBarTemplate', $useHeadElement = true;

     function __construct() {
        global $wgResourceModules, $wgStylePath, $wgStyleDirectory;

        $wgResourceModules['skins.foobar'] = array(
            'styles' => array(
                'foobar/main.css' => array( 'media' => 'screen' ),
                ),
            'remoteBasePath' => $wgStylePath,
            'localBasePath' => $wgStyleDirectory,
             );
    }
    ...etc...
}

this seems to work fine on all the custom skins I've developed, no need to touch Resource.php at all.--Ishtralimnar 11:39, 23 November 2011 (UTC)

I still can't get a copy of vector to work without modifying Resources.php Using __construct() did not work for me in MediaWiki 1.18 out-of-the-box installation, PHP 5.2.13.. - Arent 15:30, 6 December 2011 (UTC)

That is the same here. Modifying Resources.php works (without flipping navbars), foobar.php works not (no skin loads at all) MW 1.18.1,php 5.3.3. Interesting fact: Just copying our modified foobar.css (based on vector) from folder foobar to the original vector-folder works fine. Carchaias 13:45, 24 January 2012 (UTC)

Placing the $wgResourceModule in skins/FooBar.php or skins/FooBar.deps.php does not work. While index.php includes these files (and thus properly initialises the ResourceLoader), load.php does not include these files. Since load.php serves the actual CSS and Javascript, it does not know to serve which files, and the result is an empty CSS and empty Javascript file (even thought the error in OutputPage.php never occurs, since index.php works fine). My suggestion is to create a simple file in the skin folder called resourcemodules.php, which defines $wgResourceModule, and include this file from LocalSettings.php. See examples below. MacFreek 09:42, 1 February 2012 (UTC)

skins/myskin/resourcemodules.php:

<?php
/*
 * Definition of resources (CSS and Javascript) required for this skin.
 * This file must be included from LocalSettings.php since that is the only way
 * that this file is included by loader.php
 */
global $wgResourceModules, $wgStylePath, $wgStyleDirectory;
$wgResourceModules['skins.myskin'] = array(
   'styles' => array( 'vector/screen.css' => array( 'media' => 'screen' ),
                      'myskin/screen.css' => array( 'media' => 'screen') ),
   'scripts' => 'vector/vector.js',
   'remoteBasePath' => $wgStylePath,
   'localBasePath' => $wgStyleDirectory,
);
?>

LocalSettings.php:

 require_once("$IP/skins/myskin/resourcemodules.php");

Hey MacFreek, I did this (as stated in the tutorial on your site as well), but it keeps giving me an error inside the actual css file (as output by the resourceloader):

 exception 'MWException' with message 'ResourceLoaderFileModule::readStyleFile: style file not found: "/villain/screen.css"'

where "villain" is my skin name. The file definitely exists. Even just using a line from Resources.php (like including the default Vector resources) in there doesn't work. Any idea how to fix this? Litso (talk) 20:18, 14 March 2012 (UTC)

• Defining skin in Resources.php - works.
• Defining skin in resourcemodules.php and including it in LocalSettings - partially works, page loads but CSS styling isn't active.
• Defining skin in __construct function in skintemplate - does not work, server gives Error 500.

I'm loathe to modify Resources.php, a core file, in case it gets overwritten in an update and I forget this modification. Why does the resourcemodules.php method not actually load my CSS? Why does the __construct function give Error 500 on my server? 108.76.181.37 05:57, 17 April 2012 (UTC)

Looks like $wgStyleDirectory = "$IP/skins"; is missing somehow and to absolut path to the .css File cannot be computed. I just added this $wgStyleDirectory to LocalSettings.php and it works. Sorry to say, but this RessourceLoader stuff hurts MediaWiki as a solid and extensible application. You need to change so many files now to customize a simple skin. --192.41.150.10 08:33, 4 June 2012 (UTC)

In MediaWiki 1.19.0, the following solution without any changes to non-skin files seems to work:

class SkinFooBar extends SkinTemplate {

	var $skinname = 'foobar', $stylename = 'foobar',
		$template = 'FooBarTemplate', $useHeadElement = true;

	public function initPage( OutputPage $out ) {
		… blahbla …

		$out->addModuleScripts( 'skins.foobar' );
		$out->addStyle('foobar/screen.css');
	}

	… blahbla …
}

It’s adding the addStyle() that does the trick, and it goes in the FooBar.php skin file. It somehow bypasses the ResourceLoader mechanism and might hence be undesirable or deprecated soon, though. 216.165.126.110 00:04, 14 June 2012 (UTC)

The problem with the above is that it doesn't properly load the base style, so it ends up rendering improperly in some browsers. Does anyone have a working method of ensuring screen.css for a new style based on Vector will be loaded?

How to hide action list?

It would be nice to cover in the article the following questions:

1. How to hide from unregistered visiters everything from the action list (toolbar), so they could just read article but could not see discussion, history and so on?
2. How to move "Log in" link to the bottom?
3. How to hide elements in the footer

Everything I could find on those questions were for Monobook skin and nothing for Vector. If you know where it it described, please provide a link.

Pavel Malakhov 10:34, 15 September 2011 (UTC)

hiding/moving interface items is likely done using CSS and thus more or less the same as in monobook.

hiding interface elements can also be done using <?php if ( $this->data['loggedin'] ) { ?> in (a copy of) Vector.php

restricting (read) usage of an entire namespace like Talk: look at $wgGroupPermissions top-tabs will (should) display with respect to visibility.

See also Extension:Lockdown and Security issues with authorization extensions - Arent 12:38, 15 September 2011 (UTC)

see Manual:Skinning/Vector/Example - Arent 20:27, 15 December 2011 (UTC)

Requesting all Footer Elements on 1 line

I tried changing unordered list <ul> and elements <li> to <div> but I am still getting unwanted effect of each footer element on a new line. Suggestions?

vector.js

Do I have to rename vector.js to foobar.js? Because I've made vector skin for mobile(named "minivector") but its search bar doesn't do correctly. -- Rnfrnfdl1213 (talk) 02:55, 4 September 2012 (UTC)

Custom Printing

Hi All

I have ab requirement where I need to add some custom CSS to my MediaWiki installation. I want to change the font and add some coloring to the tables. I have tried to customize the MediaWiki:Print.css file but nothing is happening.

How can I make amendments to the print css file? Do I need to enable anything?