Topic on Project:Support desk

How to add custom CSS via LocalSettings.php

15
91.64.99.215 (talkcontribs)

Since the last update it is no longer possible to do custom CSS on e.g. login and preferences pages. Heaps of irritation because of this. Since I do not want to create a custom skin I would like to ask if there is a way to load CSS into the wiki via LocalSettings.php after having put all the CSS into a file. Thanks for help.

88.130.78.43 (talkcontribs)

Why should that no longer be possible? You can add/change CSS in the usual ways, e.g. using the page MediaWiki:Vector.css for the Vector skin.

(Another option would be to define an own ressource loader module in LocalSettings.php, but doing that just to add a CSS file is like cracking a nut with a sledgehammer.)

91.64.99.215 (talkcontribs)

It is no longer possible to manipulate these pages via the CSS pages on the wiki. People now think the wiki is broken or hijacked. So I probably have to resort to this resource loader option. Could you provide an example e.g. if the mywiki.ccs is located in wiki root? Will be great!

88.130.78.43 (talkcontribs)

But why does that no longer work? What is happening there? The CSS pages in the wiki are made exactly for that. If now the CSS can no longer be manipulated by them, then this is a bug, which should be fixed.

Jackmcbarn (talkcontribs)
91.64.99.215 (talkcontribs)

Yeah, and then looking at bugzilla:71621 I get the impression that it will end up as a wontfix. So back to my initial question. How to add custom CSS via LocalSettings.php without having to create a new custom skin. This resource loader thing sounded like a solution but I am not a coder ... Any help cheerfully appreciated!

Jackmcbarn (talkcontribs)

We don't currently have a way to do that yet. Keep an eye on those bugs if you're interested.

91.64.99.215 (talkcontribs)

Oh, that's kinda ouch because my wiki is presently sorta uncool. Thanks for the info anyway and I will definitely sit tight and watch these bugs. Since custom skins tend to be a pain in the ... I hope for a no so far in the future solution.

121.214.105.200 (talkcontribs)

Just revert back to 1.23.4. This security problem they "fixed" is a complete non-issue. If someone malicious is able to put code in your site CSS/JS, then your site is already compromised. Having the login and preferences pages not affected won't help anything.

91.64.99.215 (talkcontribs)

Probably you have got a point. But at one stage I will have to upgrade the wiki. So a cool solution will be great. Let's hope for the best.

Jackmcbarn (talkcontribs)

That's bad advice. Please don't do that.

121.214.105.200 (talkcontribs)

No it isn't. The only change that version makes is a fix to a non-problem, which itself causes a problem, hence this topic. If the version contained actual security fixes, I would agree, but it doesn't.

Ciencia Al Poder (talkcontribs)

yes, there's a way: create a new ResourceLoader module. But there's no full working example on RL docs for those situations.

91.64.99.215 (talkcontribs)

Great. How do I do this? Any help greatly appreciated!

Ciencia Al Poder (talkcontribs)

A working example:

$wgResourceModules['zzz.customizations'] = array(
        'styles' => "skin.css",
        // Custom styles to apply only to Vector skin. Remove if you don't use it
        'skinStyles' => array(
                'vector' => 'skin-vector.css',
        ),
        // End custom styles for vector
        'scripts' => "skin.js",
        'localBasePath' => "$IP/customizations/",
        'remoteBasePath' => "$wgScriptPath/customizations/"
);

function efCustomBeforePageDisplay(&$out, &$skin ) {
        $out->addModules( array( 'zzz.customizations' ) );
}

$wgHooks['BeforePageDisplay'][] = 'efCustomBeforePageDisplay';


Then in your installation folder, create a new folder named customizations and you can add there a CSS file named skin.css, a JavaScript file named skin.js, and a CSS file that will be loaded only on the vector skin named skin-vector.css

This is basically documented at ResourceLoader/Developing with ResourceLoader with a different example.

Reply to "How to add custom CSS via LocalSettings.php"