Topic on Talk:OOUI

(solved) Chameleon and OOUI custom theme

8
Chaeidras (talkcontribs)

Hi again,

after @Matma Rex clarified the building and testing process for me, I tried to load the theme in my chameleon skin. Unfortunately, it does not work and WikimediaUI is used e.g. when editing a page or in the extension advanced search.

I did the steps according to OOUI/Themes (Using themes in MediaWiki) and copied everything accordingly. I then edited the skin.json of chameleon and inserted the code according to the example on Gerrit.

"SkinOOUIThemes": {
  "pf2eui": "Pf2eUI"
},
"OOUIThemePaths": {
  "Pf2eUI": {
    "scripts": "skins/chameleon/ooui/oojs-ui-pf2eui.js",
    "styles": "skins/chameleon/ooui/oojs-ui-{module}-pf2eui.css",
    "images": "skins/chameleon/ooui/images/{module}.json"
  }
},
"AutoloadClasses": {
  "OOUI\\Pf2eUITheme": "skins/chameleon/ooui/Pf2eUITheme.php"
},

I have tested 3 things:

  1. all files are at the locations stated in skin.json
  2. the css files in the folder seem to have the correct color palette
  3. when purposefully inserting mistakes in skin.json, some extensions (e.g. Advanced Search) won't load

So it seems that my OOUI stated in skin.json is found but it does not overwrite the default in the extension.json.

Do I have to edit every single extension.json, or am I making a mistake?

Mediawiki 1.37.6
Chameleon 4.1.0

Thank you in advance for your help!

Matma Rex (talkcontribs)

I think the paths should be relative to the skin's root directory, not MediaWiki's root directory – try removing skins/chameleon/ from them all.

If that doesn't help, can you put up the code somewhere I could download and test it?

Chaeidras (talkcontribs)

Thank you for your effort again and please check your mail

Chaeidras (talkcontribs)
Matma Rex (talkcontribs)

I can't access that link, I get:

Access denied

Error code 1020

You do not have access to cloud.mysv.me.

The site owner may have set restrictions that prevent you from accessing the site.

Chaeidras (talkcontribs)

Sorry, I moved it to Google Drive. Please find the link above

Matma Rex (talkcontribs)

I had a look and I mostly got it working. There are three problems:

  • In SkinOOUIThemes, the key is supposed to be the skin name and the value is the theme name, so the correct syntax for your case is:
    "SkinOOUIThemes": {
    	"chameleon": "Pathfinder2UI"
    },
    
    I had missed it at first that you're adding this to the chameleon skin, rather than to your own skin with the same name as the theme.
  • In OOUIThemePaths, you actually need to add back the skins/chameleon/ prefix, my bad. The paths are relative to the value specified in ResourceFileModulePaths, and chameleon doesn't specify it at all. Every other skin I've seen in the past configured the prefix using that option. (AutoloadClasses, however, should not have the prefix.)
    "OOUIThemePaths": {
    	"Pathfinder2UI": {
    		"scripts": "skins/chameleon/ooui/oojs-ui-pathfinder2ui.js",
    		"styles": "skins/chameleon/ooui/oojs-ui-{module}-pathfinder2ui.css",
    		"images": "skins/chameleon/ooui/images/{module}.json"
    	}
    },
    "AutoloadClasses": {
    	"OOUI\\Pathfinder2UITheme": "ooui/Pathfinder2UITheme.php"
    },
    
  • Several of the .css and .js files are missing in your archive, possibly you copied the wrong files from the OOUI build? I am getting error messages such as:
    RuntimeException: style file not found or not a file: "/var/www/html/w/skins/chameleon/ooui/oojs-ui-widgets-pathfinder2ui.css"
    
    When I place files at these locations, they are loaded as expected.
Chaeidras (talkcontribs)

Unbelievable, thank you very much again, that solved everything! I corrected the entries and added the files. I must have been blind to not copy every file with my UI name.

Up until now, everything looks like I have built it! Thank you!!