Creating custom skin based on Vector in MediaWiki 1.20

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Creating custom skin based on Vector in MediaWiki 1.20

Dmitriy Sintsov

Hi!
Some year ago, I used to create Vector-based skin with redesigned layout (very different positions of sidebar and action links) in MW 1.17 from scratch, via copying all of Vector subtree and modifying it, then adding my skin resources into Resources.php. It worked, but was a lot of work, including core patching.

Now I work with 1.20 and there's an article written by Daniel Friesen on how to create Vector-derived skins without modifying Resources.php and using Vector classes and styles as a base. So I do not have to modify the core and to copy the whole skin subtree:
http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/

I mostly followed the instructions in the guide. However my skin also changes skin execute() method, because not just css and quite a lot of layout is changed. execute() works fine.

I need to override a lot of Vector's css, located in 'skins.vector' resource module.

But the following code:
        /**
         * @param $out OutputPage object
         */
        function setupSkinUserCss( OutputPage $out ){
                parent::setupSkinUserCss( $out );
                $out->addModuleStyles( "skins.artmuseum" );
        }

causes 'skins.vector' styles to be loaded after my 'skins.artmuseum' styles. So, the Vector styles are not overwritten by my skin styles.
Changing the order does not help:
        function setupSkinUserCss( OutputPage $out ){
                $out->addModuleStyles( "skins.artmuseum" );
                parent::setupSkinUserCss( $out );
        }


ResourceLoader has 'dependencies' key to make resource automatically be dependent on another resource:
$wgResourceModules['skins.artmuseum'] = array(
        'styles' => array(
                'artmuseum/screen.css' => array( 'media' => 'screen' ),
        ),
        'remoteBasePath' => &$GLOBALS['wgStylePath'],
        'localBasePath' => &$GLOBALS['wgStyleDirectory'],
        'dependencies' => 'skin.vector'
);

However, 'skin.vector' module includes both styles and scripts. And setupSkinUserCss() adds styles only. So 'dependencies' did not help, vector styles are loaded later, anyway. What can I do with that?

Also, I need to load remote google webfonts. Does ResourceLoader support this or I have to use old-fashionated methods of OutputPage() ?
Dmitriy

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Creating custom skin based on Vector in MediaWiki 1.20

Roan Kattouw-2
On Tue, Nov 13, 2012 at 12:33 AM, Dmitriy Sintsov <[hidden email]> wrote:
> However, 'skin.vector' module includes both styles and scripts. And
> setupSkinUserCss() adds styles only. So 'dependencies' did not help, vector
> styles are loaded later, anyway. What can I do with that?
>
Unfortunately, addModuleStyles() and dependencies don't work well
together. You shouldn't use dependencies for CSS that is essential for
rendering the page.

> Also, I need to load remote google webfonts. Does ResourceLoader support
> this or I have to use old-fashionated methods of OutputPage() ?
Unfortunately RL doesn't support this directly. Although to load a
webfont, all you need is a stylesheet with an @font-face in it, right?

Roan

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Creating custom skin based on Vector in MediaWiki 1.20

rotsee

> > Also, I need to load remote google webfonts. Does ResourceLoader support
> > this or I have to use old-fashionated methods of OutputPage() ?
> Unfortunately RL doesn't support this directly. Although to load a
> webfont, all you need is a stylesheet with an @font-face in it, right?

Unfortunately it seems like some browsers (well, IE that is) can be very picky about line-breaks being kept in @font-face declaration. They will not work n every browser if the css is minified. (I have just spent one week trying to figure out what was wrong with my web fonts, just to find that it was a minification issue.) I now load a separate stylesheet with the @font-face declaration in it.
Best regardsLeo    
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
---
Leo Wallentin
Skype: leo_wallentin
Twitter: @leo_wallentin
Säsongsmat.nu
Reply | Threaded
Open this post in threaded view
|

Re: Creating custom skin based on Vector in MediaWiki 1.20

Dmitriy Sintsov
In reply to this post by Roan Kattouw-2


> Sat Nov 17 2012 02:32:27 GMT+0400 (Caucasus Standard Time) пользователь Roan Kattouw ([hidden email]) написал:
>
> On Tue, Nov 13, 2012 at 12:33 AM, Dmitriy Sintsov <[hidden email]> wrote:
> > However, 'skin.vector' module includes both styles and scripts. And
> > setupSkinUserCss() adds styles only. So 'dependencies' did not help, vector
> > styles are loaded later, anyway. What can I do with that?
> >
> Unfortunately, addModuleStyles() and dependencies don't work well
> together. You shouldn't use dependencies for CSS that is essential for
> rendering the page.
>
I figured that out. So I re-implemented screen.css from scratch, instead of overriding Vector's one.
At least I extend VectorTemplate, so I re-implemented only VectorTemplate::execute(), while
renderNavigation() and another helper methods were inherited.

But I cannot inherit from SkinVector, because SkinVector does:
$out->addModuleScripts( 'skins.vector' );
...
$out->addModuleStyles( 'skins.vector' );

Why can't SkinVector do:
$out->addModuleScripts( "skins.{$this->skinname}" );
...
$out->addModuleStyles( "skins.{$this->stylename}" );

so I do not have to copy / paste initPage() and  setupSkinUserCss(), only to define few short properties?
        var $skinname = 'artmuseum', $stylename = 'artmuseum',
             $template = 'ArtmuseumTemplate', $useHeadElement = true;

> > Also, I need to load remote google webfonts. Does ResourceLoader support
> > this or I have to use old-fashionated methods of OutputPage() ?
> Unfortunately RL doesn't support this directly. Although to load a
> webfont, all you need is a stylesheet with an @font-face in it, right?
>
Right. I can probably make local stylesheet with references to google cdn, however I am not sure it wil not violate IE security or something.
So I did:
                $out->addLink( array( "rel" => "stylesheet", "href" => "http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext"
 ) );
                $out->addLink( array( "rel" => "stylesheet", "href" => "http://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic,latin-e
xt,cyrillic-ext,greek,greek-ext" ) );

in initPage().

I want to use google cdn, because it should be faster than my local hosting. Also, maybe there will be some improvements in fonts, I do not know.
What if they change their stylesheet's
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4V77J2WsOmgW1CJPQ9ZetJo.woff) format('woff');
at some time?
Dmitriy

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Creating custom skin based on Vector in MediaWiki 1.20

Krinkle
On Nov 17, 2012, at 6:08 PM, Dmitriy Sintsov <[hidden email]> wrote:

> Right. I can probably make local stylesheet with references to google cdn, however I am not sure it wil not violate IE security or something.
> So I did:
>               $out->addLink( array( "rel" => "stylesheet", "href" => "http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext"
> ) );
>               $out->addLink( array( "rel" => "stylesheet", "href" => "http://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic,latin-e
> xt,cyrillic-ext,greek,greek-ext" ) );
>

No IE security issues, unless your website is served from HTTPS in which Chrome, IE and possibly other browsers will block those requests (which is good).

The Google Font APIs support HTTPS natively:
* http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext
* https://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext

So in that case I'd recommend load with with a protocol-relative url so that it always works (only do this for urls that you know support both, such as Google Font APIs).

"href" => "//fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext"

More about protocol-relative: http://paulirish.com/2010/the-protocol-relative-url/

-- Krinkle


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Creating custom skin based on Vector in MediaWiki 1.20

Dmitriy Sintsov


> Sat Nov 17 2012 22:09:38 GMT+0400 (Caucasus Standard Time) пользователь Krinkle ([hidden email]) написал:
>
> On Nov 17, 2012, at 6:08 PM, Dmitriy Sintsov <[hidden email]> wrote:
>
> > Right. I can probably make local stylesheet with references to google cdn, however I am not sure it wil not violate IE security or something.
> > So I did:
> >                               $out->addLink( array( "rel" => "stylesheet", "href" => "http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext"
> > ) );
> >                               $out->addLink( array( "rel" => "stylesheet", "href" => "http://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic,latin-e
> > xt,cyrillic-ext,greek,greek-ext" ) );
> >
>
> No IE security issues, unless your website is served from HTTPS in which Chrome, IE and possibly other browsers will block those requests (which is good).
>
> The Google Font APIs support HTTPS natively:
> * http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext
> * https://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext
>
> So in that case I'd recommend load with with a protocol-relative url so that it always works (only do this for urls that you know support both, such as Google Font APIs).
>
> "href" => "//fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext"
>
> More about protocol-relative: http://paulirish.com/2010/the-protocol-relative-url/
>
> -- Krinkle
>
I know that MW uses (not widely-known) protocol-relative URL's since 1.18. You're right that link has to be corrected. it wil point to two different stylesheets,
depending on site protocol used:
http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext
https://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic,latin-ext

Dmitriy

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l