A partial archive of https://discourse-mediawiki.wmflabs.org as of Saturday May 21, 2022.

Changing style per parent page

extarys

Hi there!

First, thanks to @qgil for this answer. Now I feel comfortable asking a question. :stuck_out_tongue:

I must say that I’ve been using Wikimedia’s websites for ages without ever seeing any wikicode but… I installed my first mediawiki a couple of days ago and I love it (well, most of it :grinning: )

I’m looking for a way to customize/inject css on certains pages of my wiki.

I currently have certain pages that define a game like …com/wiki/Super_Game and then I created subpages like Super_Game/Abilities, Super_Game/Characters, etc. and I want a custom look for some games (and their subpages) where the theme is darker/sinister.
Right now the way I’m doing it is adding everything in Common.css like so:

.rootpage-Super_Game {
   Set custom background image, font color, fallback background color, etc
}
.rootpage-Super_Game a {
   set links brighter
}
.rootpage-Super_Game h1, .rootpage-Super_Game h2, .rootpage-Super_Game h3,  {
   ...
}

but this setup is getting very complicated as I’m adding more games and thematics/parent pages.

I found the Extension:CSS but it is not working. The tags are in plaintext in the articles and are not converted.

I’m using the default skin right now that I’m going to customize in part directly in the original files as I don’t want to spend too much time right now on this. But it would be great if I had a way to inject css like {{#css:MediaWiki:{{BASEPAGENAME}}}} (or should I create a separate namespace?)

My ultimate goal is to offer a kind of immersive experience where everything is designed and styled acocrding to a specific topic. It would also eventually be nice if I’d find a way to make an option where the user can disable background images to save bandwidth hehe.

Any thoughts and tips is appreciate.

TheDJ

Those are security nightmares though :slight_smile:

The official answer for that would be:

  1. Create an extension
  2. Add your CSS files somewhere inside the extension (often the resources subdir)
  3. Add a resourceloader definition to your extension.json file module, which links to your CSS file
  4. Use a hook (BeforePageDisplay ) in your extension to inject the ResourceLoader module for the page titles that you want to add it to, using addModuleStyles() (or addModules if you have JS AND CSS in one module)
bd808

Take a look at https://www.mediawiki.org/wiki/Extension:TemplateStyles. I think that it may sandbox styles so that they only affect the article content and not the skin.

extarys

Thanks, it is more complicated for me to create an extension because I already have so many projects going on I can barely find myself :smile: Of course you are right about security and I didn’t think about this before.

I’ll investigate this path if nothing else works.

Thanks for replying

extarys

Thanks for your suggestion .
This extension looks awesome and exactly what I would need - now let’s hope it’s working and the “beta” keyword doesn’t scare me off with a thousand bugs :stuck_out_tongue:

I’ll update here once I’ve tried it.

EDIT: Hmmm sad, I cannot define background-* properties.

Invalid or unsupported value for property background at line 2 character 15.

How would I modify this to allow background properties? My goal is to deeply customize some pages and their subpages with a specific theme and I’m using gradients or textures.

Any idea? :angel:

Tgr

What value is not being allowed? TemplateStyles validates properties according to the CSS3 spec.