Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

MediaWiki UX Styling

Simon Worthington edited this page Jun 13, 2026 · 19 revisions

Project Kanban

MediaWiki Config and Styling

Design Resources

Example site

MediaWiki

Wikibase

Currated Wikibase list

UX

Personas

Question: What are their needs? How do we provide what they need?

  • Data scientist: 1. Enrich data, 2. Use data.
  • Citizen Science projects: 1. Take part in #sC Chapter Champions? 2. Take part in re-publishing hackathon (making guides based on IPCC reports). 3. Improve Wikidata IPCC entries with Wiki Project Citizen Science and Climate Change. 4. Data scientists edit.
  • Policy communities: 1. Find literature supporting their question, share the literature with stakeholders/audience.

Branding/messaging

  • FAIR Publishing!
  • Climate knowledge liberation (check #sC branding)
  • Third mission data science
  • Community volunteer project

Ideas

Have the site keep to standard MediaWiki layout as we wan to emulate the Wikiverse to have people feel comfortable with how things are organised. For this reason keeping positioning of interface should be kept.

MediaWiki Theme: Skin:Vector/2022 https://www.mediawiki.org/wiki/Skin:Vector/2022

Constraints / Notes

The web presence of the project is determined by the MediaWiki/Wikibase and some of our other considerations.

Site has these parts:

  • Wiki
  • Wikibase
  • SPARQL query interface
  • Presentation embeds from Wikibase/Sparql - which show off Wikibase queries
  • A GitLab presence (for public use we would use GtiLab and not Github)
  • Project Quarto website
  • Possibly a Federated Wikibase where we allow moderated and reviewed data uploads

Task areas

  • Branding assets: Font pair, color pallet, logo, name and strapline
  • Organise header
  • Enable languages
  • Footer
  • Footer: MediaWiki tools logos
  • Footer: Partner logos
  • Footer default site policy links: imprint, Data Privacy, etc.
  • Coypright information and licences
  • Landing Pages
    • Home
    • About
    • Persona pages: DS, CS, Pol
    • TOC of all of Ar6
    • Data dashboard from Wikibase
  • Things needed on site: Aboutus, Roadmap, etc

Data driven design

(Features available from MediaWiki and Wikibase)

Report and Report Volume navigation - To be confirmed as there are different options. Likely its a Lua template using WB data. Simpler versions are indexes in a Template - e.g., https://kg-ipclimatec-reports.wikibase.cloud/wiki/BookIndex

Page template - Reports need to use a page template. This allows us to add configurations and features to paged with out editing the content. We with need one template for all report pages or a template per report.

Categories - we need to add a bunch of categories to organise the content.

Badges - these are needed to show status of content.

Default copyright and options - how does this get setup for assets and Pages

Advanced ToC - It looks like ToCs from different Pages can be brought together in one Page using templates (I think). See: https://www.mediawiki.org/wiki/Help:Section

Lua Infoboxes - This can allow us to generate Report profiles using Wikibase data. There are templates for types of things like books, scholarly article we can use from Wikipedia. AIs are good at generating these from WB entries, just say use template X and based on source WB URL. https://www.wikidata.org/wiki/Wikidata:Infobox_Tutorial

Wikibase SPARQL query and visualisation embeds in MediaWiki - Here is an example query result time-line https://w.wiki/HxfA and the query https://w.wiki/HxfJ | below is the iframe embed, we would use something that was better integrated but as an illustration it shows the idea.

From the query interface use Examples to see different example: https://query.wikidata.org/

<iframe style="width: 80vw; height: 50vh; border: none;" src="https://query.wikidata.org/embed.html#%23Recent%20events%0A%23%20----%0A%23title%3A%20Recent%20events%0ASELECT%20%3Fevent%20%3FeventLabel%20%3Fdate%0AWITH%20%7B%0A%20%20SELECT%20DISTINCT%20%3Fevent%20%3Fdate%0A%20%20WHERE%20%7B%0A%20%20%20%20%23%20find%20events%0A%20%20%20%20%3Fevent%20wdt%3AP31%2Fwdt%3AP279%2a%20wd%3AQ1190554.%0A%20%20%20%20%23%20with%20a%20point%20in%20time%20or%20start%20date%0A%20%20%20%20OPTIONAL%20%7B%20%3Fevent%20wdt%3AP585%20%3Fdate.%20%7D%0A%20%20%20%20OPTIONAL%20%7B%20%3Fevent%20wdt%3AP580%20%3Fdate.%20%7D%0A%20%20%20%20%23%20but%20at%20least%20one%20of%20those%0A%20%20%20%20FILTER%28BOUND%28%3Fdate%29%20%26%26%20DATATYPE%28%3Fdate%29%20%3D%20xsd%3AdateTime%29.%0A%20%20%20%20%23%20not%20in%20the%20future%2C%20and%20not%20more%20than%2031%20days%20ago%0A%20%20%20%20BIND%28NOW%28%29%20-%20%3Fdate%20AS%20%3Fdistance%29.%0A%20%20%20%20FILTER%280%20%3C%3D%20%3Fdistance%20%26%26%20%3Fdistance%20%3C%2031%29.%0A%20%20%7D%0A%20%20LIMIT%205%0A%7D%20AS%20%25i%0AWHERE%20%7B%0A%20%20INCLUDE%20%25i%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cmul%2Cen%22%20.%20%7D%0A%7D" referrerpolicy="origin" sandbox="allow-scripts allow-same-origin allow-popups" ></iframe>

Colour palette and font pair

Palette (WIP)

Coolors https://coolors.co/user/palettes/69ce10bea0a722000e398630

- CSV

feff03,00aeef,2b3990,1600ff,b3b3b3,030001

- With #

#feff03, #00aeef, #2b3990, #1600ff, #b3b3b3, #030001

[画像:CKG]

Font pair

These dont have to be applied to themes (MediaWiki) just for materials where appropiate.

Font pair needs selecting.

Clone this wiki locally

AltStyle によって変換されたページ (->オリジナル) /