Manual talk:How to make a MediaWiki skin

Ask any question that is blocking you from writing a skin and help others build skins.

Getting started Failed!`

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I installed Mediawiki 1.35.1. Then I downloaded the Example skin from Github. I downloaded both the master branch (https://github.com/wikimedia/mediawiki-skins-Example) and REL1_35 branch (https://github.com/wikimedia/mediawiki-skins-Example/tree/REL1_35). After that i updated the LocalSettings.php and set $wgDefaultSkin = "example"; .

The sad part is I got a broken page looks like the CSS file is missing but I am sure there are other issues too.

Then I tried Option 2. Created a new skin form Skin Lab and enabled that. It did show in a way, but as I do not have and reference I am not sure if It was showing all the parts. But which I found that there are issues in JS because the special:preferences tabs were not working and I could not change the skin from the settings.

Can you please help to start building a new skin from scratch and provide a simple example skin which works! I will also need assistance on some advance area later but at the beginning I need a ground to stand upon. Nasir Khan Saikat • talk • 17:32, 8 January 2021 (UTC)

@Jdlrobson As you have created this manual I believe you might help me to find some doc/ resource to follow and update/ build a skin. Nasir Khan Saikat • talk • 17:35, 8 January 2021 (UTC)

> found that there are issues in JS because the special:preferences tabs were not working and I could not change the skin from the settings.

This sounds like an error with mediawiki, not your skin. Skins have no impact on preferences. Are there any JavaScript errors in your developer console? If not, are there any 500 server errors in your network tab suggestng problems serving the responses? Jdlrobson (talk) 19:14, 8 January 2021 (UTC)

In the case of the Example skin it's possible https://gerrit.wikimedia.org/r/c/mediawiki/core/+/654907 and https://gerrit.wikimedia.org/r/c/mediawiki/core/+/654854 are the reasons (A bug in the 1.35 release). I'm trying to get these backported to the 1_35 release. In the mean time you could try cherry picking those to your mediawiki install. Jdlrobson (talk) 19:26, 8 January 2021 (UTC)

On the Vector skin special:preferences works and I changed the skin to New downloaded skin from SkinLab from Vector. But after that it stopped working.

There is no 500 error but on the console the error was the following

Uncaught SyntaxError: missing } after function body load.php:581:33

note: { opened at line 579, column 138 load.php:579:138

Example Skin Screenshot: https://user-images.githubusercontent.com/396987/104059751-fef70f00-521f-11eb-993d-1dc49a788f41.png

SkinLab Skin Preferences page: https://user-images.githubusercontent.com/396987/104059825-25b54580-5220-11eb-8ce9-d4507194d931.jpg Nasir Khan Saikat • talk • 20:05, 8 January 2021 (UTC)

Yep, this was the issue I pointed to above (https://phabricator.wikimedia.org/T271441) I believe it should be in the latest 1.35 download now as it just got merged in the last hour.

If you want this to work with your current install, you'll need remove the features key in skin.json:

```

"features": {

                               "normalize": true,

                               "elements": true,

                               "content": true,

                               "interface": true,

                               "logo": true

                       },

``` Jdlrobson (talk) 20:48, 8 January 2021 (UTC)

I can download this new version. But where should I download this? The download page still shows the MediaWiki 1.35.1 Nasir Khan Saikat • talk • 21:29, 8 January 2021 (UTC)

You'll need to cherry pick the patches for now or get a development release from https://m.mediawiki.org/wiki/Download

Not sure when next release is due. Jdlrobson (talk) 04:37, 10 January 2021 (UTC)

I failed to get a working version again. I updated my mediawiki installation with the changes made in https://phabricator.wikimedia.org/T271441 and remove remove the features key in Example Skin. Tried the Skin Lab skin as well. But failed.

Can you please suggest me a way out from here? Nasir Khan Saikat • talk • 07:16, 10 January 2021 (UTC)

Are you getting the same error or a different error now? Please see https://m.mediawiki.org/wiki/How_to_report_a_bug we'll be able to fix this much quicker if you are able to provide more information.

Tip: If its still the same error you add ?debug=true to the end of the URL you might get more specific errors. I'm also going to need to see the stack trace. Jdlrobson (talk) 15:40, 10 January 2021 (UTC)

Bug reported, Please update the tags if needed so that more people can get involved and I can a fast response. thanks

https://phabricator.wikimedia.org/T271648 Nasir Khan Saikat • talk • 17:46, 10 January 2021 (UTC)

I think a lot of the friction here is because you are using the 1.35 release rather than 1.36/development branch and this guide was written on my poor assumption that developers would be using the development branch.

I've updated the page to make clear this is currently written with 1.36 in mind, while working out how to improve things in future.

While I'm sorry your own experience is proving frustrating, this is helping people who try this out in future, so thank you. Jdlrobson (talk) 01:15, 11 January 2021 (UTC)

1.35 and 1.36 is same from my end as I needed a working version of a MediaWiki. As I do not contribute and update the projects version to version I thought it is safe to use a stable release. Dev versions may have issues in the core, which might take time to fix and will create blocks to my original objective of creating a new skin. But now I know stable release is not stable at all!

If you would say earlier to use 1.36, I will continue using that, as the plan of creating/ updating existing is to make it ready for the future versions. But again if I was doing a real project I would use the 1.35 and the project would be a complete failure.

Now I will try with 1.36/development release. Let see what is there for me. Nasir Khan Saikat • talk • 08:57, 11 January 2021 (UTC)

MediaWiki 1.36.0-alpha installation failed

I followed the following steps till I failed.

1. Run git clone --depth 1 https://gerrit.wikimedia.org/r/mediawiki/core.git to download the dev version. Found a notice that external packages needed to be downloaded.
2. I ran composer update and found that it requires composer 1 and downloaded that from the site.
3. Now I run php composer.phar update --no-dev and then it installed all packages successfully.
4. But when the Mediawiki installation page came it looks like the following: https://user-images.githubusercontent.com/396987/104172208-1277c500-542e-11eb-97fb-66917b94c73c.jpg

Before getting the error I did not know that it requires Composer 1. As composer recommends to use v2, it should be mentioned somewhere in the doc.

Can you please suggest me how to install MediaWiki 1.36.0-alpha? Nasir Khan Saikat • talk • 10:59, 11 January 2021 (UTC)

This is funny! MW1.36 install issue exists for a month now (https://phabricator.wikimedia.org/T270027) and I am thinking an extra Skin can be installed easily. Nasir Khan Saikat • talk • 18:05, 11 January 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Adding a Stylesheet from an Extension to a Module of a Skin

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I am using the newest version of the Skin:Chameleon, with the Extension:Bootstrap and Extension:BootstrapComponents installed. The Extension:BootstrapComponents has some CSS-Files that are used to fix some issues if used in combination with the Skin:Vector. Now to my question, is there a possibility that those CSS-Files will only be added if the Skin:Vector is activated?

I am new to the MW-Development so I would be very happy if someone can help me. DesignerThan (talk) 22:31, 10 January 2021 (UTC)

I recommend asking questions about Skin:Chameleon or Extension:BootstrapComponents on the corresponding talk page. This page is about developing new skins. Jdlrobson (talk) 00:37, 11 January 2021 (UTC)

I asked here, because I need some advice about the ResourceLoaderModules that is not specific to the mentioned skin or extension. I want to know if it is possible to add a ResourceLoaderModule Style depending on the used skin. I hoped it would be as easy as adding the wanted stylesheet to the ResourceModule of the Skin but sadly it isn't.

Sorry for the bad/general explanation at first. But maybe there is also a better place for that discussion. DesignerThan (talk) 15:38, 11 January 2021 (UTC)

I think you are describing skin styles.

https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/extension.json#L625

Any module you define can ship skin-specific styles using the skinStyles key. Jdlrobson (talk) 16:29, 11 January 2021 (UTC)

Thanks that was exactly what I needed. DesignerThan (talk) 02:27, 12 January 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

More advanced doc

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

This page is a good starting point. But I will need some additional doc while customizing sections. I downloaded a skin form https://skins.wmflabs.org/#/add. On the template `ContentNamespaces.mustache` it contains the following line, how do I know what data it contains or how can i edit the list items?

{{#data-portlets.data-namespaces}}{{>Portlet}}{{/data-portlets.data-namespaces}} Nasir Khan Saikat • talk • 12:03, 21 January 2021 (UTC)

For development https://github.com/jdlrobson/mediawiki-skins-skinjson will be helpful for exploring that data. Jdlrobson (talk) 01:57, 27 January 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Best way to reference images in skins, outside of stylesheets?

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Is there a preferred way to create <img /> elements in PHP in skins? What's the best way to get the URL path to a skin's resources/images/foo.png file, for instance?

It looks like some skins use the $wgStylePath global, and some just include all images as CSS background-images. Maybe the latter is best practice. Should actual img elements be avoided? Sam Wilson 09:29, 21 April 2021 (UTC)

Probably the best thing to do here is to extend the SkinMustache class and the getTemplateData method. The PHP-less skin does have its limitations.

Out of curiosity what images are you wanting to include that are not configurable as footer icons/logo? Jdlrobson (talk) 05:43, 23 April 2021 (UTC)

(Sorry for my slow response.)

SkinMustache sounds good; I'm switching to it now.

I'm adding multiple logos, in different places, as well as some icons (although I guess the latter are perhaps better as background images anyway). Sam Wilson 00:35, 14 May 2021 (UTC)

I also just remembered you can use $wgLogos for this if you need it to be configurable. Jdlrobson (talk) 02:53, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Clarify how skins can add RTL

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Update the tutorial to show what skins need to do to add RTL support (from User talk:Jdlrobson#h-Skin:MediaWikiBootstrap_need_help_to_update_the_skin-2021-06-22T17:18:00.000Z) Jdlrobson (talk) 23:57, 22 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Clarify how to control the footer links

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

In User talk:Jdlrobson#h-Skin:MediaWikiBootstrap_need_help_to_update_the_skin-2021-06-22T17:18:00.000Z it was asked "how to control the footer links?"

Let's understand what's being asked here and update the documentation. Does the developer want to add / remove links on the skin level, or need a tutorial for displaying footer links, or other? Jdlrobson (talk) 23:59, 22 June 2021 (UTC)

In short docs needs similar as Manual:Skinning Part 2#Footer.

There should be instructions on,

1. how to add new links to the footer area,
2. how to show texts form a file from the project root/ skin root (it could be a version number or some other text from a file)
3. what if I would like to show the license as text and not to show the icon
4. how to show "Powered by MediaWiki" as a line to text and not to show the logo
5. how to show the items in the list
6. and all the things mentioned in Manual:Skinning Part 2#Footer. Nasir Khan Saikat • talk • 00:47, 23 June 2021 (UTC)

I've added Manual:SkinMustache.php#DataFooter to document the data relating to the footer that is passed down.

With SkinMustache, skins are expected to render content without opinion other than should I display this or not.

Most of this is being defined by configuration/extension hook.

For icons for example rendering text rather than a logo is discouraged as this is enabled by Manual:$wgFooterIcons. If you want to render text, you'll need to provide your own link and label using the technique in Manual:How_to_make_a_MediaWiki_skin#i18n.

Your template can render whatever HTML it chooses too, your skin.mustache file is yours to edit - so if you need to add new links or random license information that is not configurable just add it in the HTML, or even better still add it as part of an extension or LocalSettings.php using the associated hook: Manual:Hooks/SkinAddFooterLinks Jdlrobson (talk) 03:13, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Show/ change the logo

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

The following block of code is being used in the Example and SkinLabs skins. But unfortunately none of these skins show the logo image. Though the logo path mentioned in the LocalSettiings.php has a file on the specified path. I asked for assistance on the Support desk (Project:Support desk/Flow/2021/06#h-Skin_Favicon_and_Logo-2021-06-17T15:48:00.000Z) but till now no one could reply with the answer of the query.

Can you please let me how can I change/set a logo in a skin?

Skin Code

<div id="p-logo" class="mw-portlet" role="banner">

   <a href="{{link-mainpage}}">

   {{#data-logos}}

       {{#icon}}<img src="{{.}}" width="40" height="40">{{/icon}}

       {{#wordmark}}<img src="{{src}}" width="{{width}}" height="{{height}}">{{/wordmark}}

       {{^wordmark}}<h1>{{msg-sitetitle}}</h1>{{/wordmark}}

   {{/data-logos}}

   </a>

</div>

LocalSettings.php

$wgLogos = [ '1x' => "$wgResourceBasePath/resources/assets/wiki.png" ];

s Nasir Khan Saikat • talk • 22:50, 25 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Favicon

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

A section is needed which will mention the links of the favicon (Manual:$wgFavicon) and apple touch icons (Manual:$wgAppleTouchIcon). Nasir Khan Saikat • talk • 23:06, 25 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Webfont

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

What is the recommended way to use a webfont?

I may like to use a font and include that in the skin package. is there any doc available which answers to this question?

I also need to know the steps to use a Google Font or some other font hosted to some other domain.

I asked this same question to the support desk but did not got any reply there: Project:Support desk/Flow/2021/06#h-Add_Webfonts_to_the_skin-2021-06-17T17:54:00.000Z Nasir Khan Saikat • talk • 23:15, 25 June 2021 (UTC)

I don't really understand the problem here.

There is nothing stopping you from adding an import statement to your LESS file either to a local font file or a foreign domain. What am I not understanding?

e.g.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body { font-family: 'Open Sans', sans-serif; }

Jdlrobson (talk) 02:31, 26 June 2021 (UTC)

Thanks for your reply.

If you read my question again, you will find that I wanted to know the recommended solution, not a solution to use a webfont. As mediawiki is using resource loaded for css and js, i just wanted to know if there is any recommendation set for webfonts.

from now on I will use less to import the fonts, thanks. Nasir Khan Saikat • talk • 16:04, 26 June 2021 (UTC)

Got it. No. There is no recommendation that I am aware of specific to MediaWiki here. Although be wary of importing from external websites and make sure that's clear on the skin README if you do. Jdlrobson (talk) 22:44, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Add Meta data to a skin

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I need to add a number of meta data on the pages. Can you please let me know or refer a doc to do so?

These meta tags includes the meta keyword, meta description, Facebook OG meta, Twitter meta.

If I want to add some additional links, code to the header of the page, what are the steps to do so?

related question to the support desk: Project:Support desk/Flow/2021/06#h-Add_Meta_data_to_a_skin-2021-06-16T22:44:00.000Z Nasir Khan Saikat • talk • 23:24, 25 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Language links

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

How can i show the language links to a skin?

I also need to know the options to customize that as well. For example I may want to show the language list as a drop down menu. Nasir Khan Saikat • talk • 00:10, 26 June 2021 (UTC)

Assuming you are using SkinMustache, the template data is described in Manual:SkinMustache.php#Menus. Let me know if anything can be expanded there.

If you are asking how to configure your local wiki to display languages, that's documented in Manual:Interwiki and out of scope for this page. Jdlrobson (talk) 02:55, 26 June 2021 (UTC)

I was taking about the language links mentioned here: Manual:Skinning Part 2#Language links Nasir Khan Saikat • talk • 16:57, 29 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Customize Search Button

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

In the Example and SkinLabs skins I got the following code to show the search button, how can i customize that formatted button?

{{{html-button-search}}} Nasir Khan Saikat • talk • 00:16, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Category links

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

How to show and format category links. I found {{{html-categories}}} in the skin but could not found much about it. It is always returns as formatted html or can i get category links and names as array? Nasir Khan Saikat • talk • 00:44, 26 June 2021 (UTC)

It would be really helpful if you can show me some reference/ related data, hooks or something similar to implement that. I will try from my end about the customization and then submit a patch. Nasir Khan Saikat • talk • 15:57, 26 June 2021 (UTC)

The HTML string from categories is passed to the Mustache template using Skin::getCategories

https://gerrit.wikimedia.org/g/mediawiki/core/+/87500874e2b55e3da0735d71b0a0123882e149b5/includes/skins/SkinMustache.php#187

We could add an additional key `data-categories` that provides the data without the surplus HTML markup by refactoring Skin::getCategoryLinks to call a function called Skin::getCategoryLinksData https://gerrit.wikimedia.org/g/mediawiki/core/+/87500874e2b55e3da0735d71b0a0123882e149b5/includes/skins/Skin.php#682 and then calling the new getCategoryLinksData inside the SkinMustache::getTemplateData function. Does that make sense? Jdlrobson (talk) 21:12, 27 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Sitenotice

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

{{{html-site-notice}}} shows the site notice, is there any way to get the data? can i check if there is any site notice? Nasir Khan Saikat • talk • 01:02, 26 June 2021 (UTC)

There is no way to get at the underlying data. This is because of the way CentralNotice and other extensions work.

You are free to wrap the HTML in any HTML elements that you choose.

What is your use case here? Jdlrobson (talk) 03:00, 26 June 2021 (UTC)

I will show the site notice within some HTML elements and I do not want to show that wrapper element if there is not notice to show. This is the primary need.

If I had the access to the data then I may try to format that in my way. But as you confirmed that it is not available, then that is ok too. Nasir Khan Saikat • talk • 15:53, 26 June 2021 (UTC)

Mustache supports an if guard so you can conditionally render an element based on that. The string will be empty it there is no site notice to display. Jdlrobson (talk) 22:45, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Stat

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

How to show page stat? along with the view count, is there any other stat is available from core? Nasir Khan Saikat • talk • 01:16, 26 June 2021 (UTC)

This is a bit out of scope for a skin. I would expect an extension to provide this kind of data. We don't have such data in MediaWiki core.

Not extensions can use Manual:Hooks/SkinAfterContent to output such information provided the skin renders html-after-content. Jdlrobson (talk) 03:03, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Accessibility

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

what accessibility features are available from the core? is there any recommendation to make the skin compatible ? Nasir Khan Saikat • talk • 01:20, 26 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

viewport meta

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I need to add <meta name = "viewport" content = "width=device-width"> meta. Can you please tell me how can i configure my skin to add this meta on each page ? Nasir Khan Saikat • talk • 17:36, 28 June 2021 (UTC)

Thanks for pointing out this was missing the document

Added Manual:How to make a MediaWiki skin#Responsive skins / adding a meta viewport Jdlrobson (talk) 18:30, 28 June 2021 (UTC)

"responsive": true makes a skin responsive, but does not add the meta tag, I am interested to know that.

even though it makes a skin responsive, but I need to add the viewport meta into the skin. I followed this approach earlier and found that Google Search Console marked the site with "Mobile Usability issue: Viewport not set". As a result thousand of my pages are marked with this issue.

For this reason, I mentioned the meta tag not asked to know how to make a skin responsive! Please help me to find the solution to this. Nasir Khan Saikat • talk • 19:45, 28 June 2021 (UTC)

> "responsive": true makes a skin responsive, but does not add the meta tag, I am interested to know that.

Out of interest what do you think this option is doing?

> I followed this approach earlier and found that Google Search Console marked the site with "Mobile Usability issue: Viewport not set".

If this is not working for you, I suspect you are running an outdated version of MediaWiki. What version of MediaWiki are you running on your pages with the Google search console?

> For this reason, I mentioned the meta tag not asked to know how to make a skin responsive! Please help me to find the solution to this.

My answer is correct, I've left some pointers to code on the main branch.

Skin's have a method called isResponsive. This reads directly from the skin option you define in skin.json:

https://github.com/wikimedia/mediawiki/blob/master/includes/skins/Skin.php#L204

This skin option adds a viewport meta tag to the HTML. It doesn't do anything else at time of writing:

https://github.com/wikimedia/mediawiki/blob/master/includes/skins/Skin.php#L216 Jdlrobson (talk) 21:54, 28 June 2021 (UTC)

Thank you for the clarification. It is my bad that I did not cleared the cache of the page source and found that there is no meta available. Though I cleared the page cache and before checking the page source. This happened in a MediaWiki 1.37. I am sorry for this misunderstanding.

Getting the notice from the Google search console happened on a MediaWiki 1.35 wiki.

"responsive": true works. I think the SkinLabs generated skins and Example skin should have this as the default, I may add a pull request there soon. Nasir Khan Saikat • talk • 15:35, 29 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

PHP Code

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Can I write PHP code in the skins? if so what is the recommended way to do so? Nasir Khan Saikat • talk • 15:43, 29 June 2021 (UTC)

This is covered in https://m.mediawiki.org/wiki/Manual:How_to_make_a_MediaWiki_skin#Extending_data Jdlrobson (talk) 16:30, 29 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

In other languages

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I was following the skinlabs starter skin and found the following line in the ContentHeading.mustache file. can you please tell me what it does and how it works?

<a href="#lang" class="mw-interlanguage-selector mw-ui-button content__language-btn">{{msg-otherlanguages}}</a>

I added a interwiki language and added the language in the article. But that showed up below the main content via Languages.mustache. I also want to about the variants Nasir Khan Saikat • talk • 23:13, 5 July 2021 (UTC)

https://m.mediawiki.org/wiki/Manual:How_to_make_a_MediaWiki_skin#Rendering_template_partials Jdlrobson (talk) 14:47, 6 July 2021 (UTC)

With languages the example assumes it will be progressively enhanced by the Extension:UniversalLanguageSelector due to the prescence of the class mw-interlanguage-selector Jdlrobson (talk) 14:49, 6 July 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

unclosed sentence "For any questions please use the" ... what ?

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

@Jdlrobson In section I want to change elements in the head of the HTML page please complete the sentence :

Modifications of the HEAD are better served via extensions and configuration inside LocalSettings.php.
For any questions please use the 

Thanks.

Christian 🇫🇷 FR (talk) 21:38, 5 January 2023 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Migrate a skin to SkinMustache

I want to migrate the skin Skin:MediaWikiBootstrap from SkinTemplate to SkinMustache as for the new skins SkinMustache is the recommended way. If there is any migration guide available then I may follow that. Nasir Khan Saikat • talk • 19:07, 20 September 2023 (UTC)

Manual:How to make a MediaWiki skin/Migrating SkinTemplate based skins to SkinMustache Jdlrobson (talk) 18:17, 16 January 2024 (UTC)

data for menu items

I am facing an issue with showing the menu items using {{{html-items}}} , the code mentioned in Manual:How to make a MediaWiki skin#Rendering menus with Mustache.

I want to use some specific classes for the menu items but it rendering HTML . How can i get the individual menu item name, url as data? Nasir Khan Saikat • talk • 19:08, 20 September 2023 (UTC)

Depends on the MediaWiki version. In more recent versions of MediaWiki array-items is provided. See Manual:SkinMustache.php#PortletData Jdlrobson (talk) 18:31, 16 January 2024 (UTC)

VE compatibility

I created a Mustache skin, probably following the guidelines (no guarantee...) and that worked fine! Very happy with the skin, but then something weird happened. For a second user, the skin won't load because it isn't VE compatible, even if that user has the same user-rights as Admin.

Could you add some guidelines on how to make the skin VE compatible? AdSvS (talk) 07:57, 24 October 2023 (UTC)

I'll do that now. TLDR: Extension:VisualEditor/Skin_requirements should help you here! Jdlrobson (talk) 18:31, 16 January 2024 (UTC)

Entry point

Where's the skin entry point? Is it the PHP class specified in skin.json -> ValidSkinNames.exampleSkin.class? If so, what method of that class is called by default? –Novem Linguae (talk) 23:58, 28 May 2024 (UTC)

I'm not sure I understand the question.

ValidSkinNames will register your skin.

The class you specify there will extend class Skin which will define an outputPage method which will echo the contents of the body HTML tag of the page.

Much of this is abstracted. For example if you use SkinMustache (the recommended way), this will render the content of skin.mustache with the template data returned by SkinMustache::getTemplateData().

Does this answer your question? Jdlrobson (talk) 01:22, 29 May 2024 (UTC)

Yes, that makes sense, thank you. So for a Mustache skin, it looks like MW checks skin.json, loads the templateDirectory/template.mustache specified there, and fills it with data from the PHP class specified there, specifically its getTemplateData() method. Not super intuitive, but makes sense once explained. Maybe I can make this a little more prominent in the documentation or comments somewhere. –Novem Linguae (talk) 01:49, 29 May 2024 (UTC)

Intro for beginners?

Hi, the issue I have with this article is that it starts off by saying that if you know HTML, CSS and Javascript you can create a skin. Knowledge of PHP and 'Mustache' are not essential. But thereafter the entire page talks about nothing else but PHP and Mustache.

I honestly do not even know where to begin with this. Having downloaded the example theme I see dozens of files and I have not the first clue where to start and what to do. Is MediaWiki simply not designed for beginners, like WordPress is for example? 2A01:4B00:D037:4F00:AF2:F998:E392:8458 (talk) 13:55, 17 September 2024 (UTC)

You shouldn't need to know PHP, but Mustache is definitely a requirement (could you point me to where in the page it suggests that it isn't?).

Where is PHP referenced? I am only seeing reference to it in the advanced section.

Personally I recommend following the guide here as it is currently the most up to date:

Manual:How to make a MediaWiki skin#Option 3 - From the command line Jdlrobson (talk) 00:40, 20 September 2024 (UTC)

Regarding where to start - I'd suggest modifying templates/skin.mustache, resources/skin.less and resources/skin.js to see instance feedback that it's working.

Hope this helps. Jdlrobson (talk) 00:41, 20 September 2024 (UTC)