Hi - it's difficult to tell which screenshots are the ones that need to be updated, if unfamiliar with the Apex Theme.

So a few things that would be helpful here.

1. A list of the images that need to be replaced (urls)
2. Where would a contributer find new versions to make screenshots from?

After looking at this, it seems to make sense to replace the png screenshots of buttons and widgets with actual buttons and widgets that implement the code sample.

For instance:

The buttons and switches on this page should be replaced with actual buttons an switches:

https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches

Alternately, there could be links out to a "sandbox" app that would let you build the javascript buttons interactively.

Thanks @goodlux for your inputs!

The buttons and switches on this page should be replaced with actual buttons an switches:

As much as it would be the most useful outcome from my perspective, we're running into a technical hurdle with this idea.

Alternately, there could be links out to a "sandbox" app that would let you build the javascript buttons interactively.

That seems more promising, we've been discussing at the tech writer event last night the possibility of having just in-page anchors in the OOjs UI demo, which we could link to from the documentation and basically remove the outdated screenshots as much as useful.

Today we are working on trying to generate new screenshots. For example on this page:

https://www.mediawiki.org/wiki/OOjs_UI/Creating_interfaces_programmatically

we want to update screenshot that says "Click Me !". Solution is to copy existing code snippets from this page and link to media wiki theme rather than the old Apex Theme as well as any required .js / css etc.

However, we are not able to get the button to output properly in browser for new theme.

here is screenshot of what it looks like in the browser.

could somebody look at the file and see what we need to do for it to output properly as per this page:

https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop

@Volker_E Andrew and I are here at the WriteTheDocs meetup, if you could take a look at the comment above and suggest how we could move forward, that would be great :)

• For the font – OOjs UI widgets will use whatever font the page uses. Browsers usually use a serif font as the default, while in MediaWiki we use a sans-serif font. To include sane defaults for this and other options, you can just add the OOjs UI demo stylesheet to your page: https://github.com/wikimedia/oojs-ui/blob/master/demos/styles/demo.css (this is probably easier than extracting them from MediaWiki and the effect should be the same)
• For the missing icon – you'll need to include the specific stylesheets, for example <link rel="stylesheet" href="oojs-ui-mediawiki-icons-content.css">. Syntax like <link rel="stylesheet" src="oojs-ui-mediawiki-icons-*.css"> won't work. See the demo for the list of "icon packs": https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-ltr-desktop

@matmarex @Mooeypoo To me this is the correct task to discuss the replacement of the URL hash fragment in order to use the now available ids.

I proposed https://gerrit.wikimedia.org/r/360771 for that.

I don't see why this is tagged as good first task (see its description).

Which exact pages is this about ( https://www.mediawiki.org/wiki/OOUI has no images ), or better which exact images is this about (link to their on-wiki category)?