I’m back from Paris where I attended WikiMania 2026 and I picked up this Wikifying a Conference booklet. It has been put together by Tamsin Braisher and Mike Dickison. They have been “thinking openly” about how to Wikify a Conference. Their book is licensed CC BY SA.
I thought that I’d try to digitalize (not digitize) this booklet and take a different approach to capacity building. As part of my Wikipedia Work, I’m planning to run master classes. This Wikifyying Concept (if it works) might be turned into a Github repository, where we could Wikify other entities. These are the rough steps that I plan to take as I work to transmogrify (Finn, 1999 quoting Watterston, B) the booklet.
- Planning the page
- Choosing a palette
- Creating a root folder
- Building on what I developed previosly
Plan your page
If you check out the following simple diagram (chat GPT started this off) you will see that this proposed site has four page types.
├── index.html
├── style.css
├── script.js
└── API
1|Index – a clear structure.
The Wikifying a conference booklet TOC has three sections to it – Before, During and After. Each of these sections has a number of subsections. Although the index page in a paper based book usually contains all those options, on the web, I’d prefer not to show all the subsections (listed below) right away. People are overwhelmed with too much information.
| Before the event | During the event | After the event |
| To Wikify… The “W” Pitch Plan to Wikify Sharing your Credentials Wikidata for the event Wikidata for people Commons before the event | Setting up Identifying yourself Photos and SSP Name badges Swag and Handouts Wikidata clinic Managing your time Say your name Uploading images | Tidy-up checklist OpenRefine Conference video Scholia Bulk uploading of images Plan your reporting Acknowledgements Resources Notes |
On the index page, I will have make three visible sections (before., during and after) with links. Then once a person clicks on a section, they will then see a grid of posts that relate to the topics mentioned in the three columns (see above). The content of the posts will be served in different ways. This is not final, but “Before” might have a HTML page, “During” will pull its content using Javascript and a JSON file. And the “After” section could pull content from a my wordpress blog. This would allow me to have a guide that has both static and live information.
2| Style – Choose you palette
I have used CSS and HTML to create a palette in the root folder.
:root {
--primary: #E0552D;
--secondary: #DF7B61;
--tertiary: #224A6E
}
.palette {
width: 300px;
height: 200px;
border: solid 1px black;
background: linear-gradient(
to bottom,
var(--primary) 0%,
var(--primary) 33.33%,
var(--secondary) 33.33%,
var(--secondary) 66.66%,
var(--tertiary) 66.66%,
var(--tertiary) 100%
);
}Change is good
Here is a screenshot of the index page intended. You’ll notice a similar layout that I used in my previous post. I am still using the primary and secondary colours but this time my banner does not have a gradient. I have still got the three buttons, a shadow, a globe and a plain (but slightly different coloured) background.
I am not the greatest fan of the “White label” practice, as I think that diminishes an organisations internal capacity. But as you can see, a simple switch of the root folder can quickly create a new look and feel. There is a chance that I might improve this page.
Mobile Friendly Page
The colours that Mike and Tamsin used on their pamphlet have been inserted them into my root file. I have also added a mobile stylesheet, with a media query. The screen layout changes with the hamburger menu and we get a pattywhen the screen is small.
Making it mobile friendly with a “hamburger menu”
Small screens are pressed for space and so we need to create a condensed interface. Sometimes the navigation is called a hamburger. I have created a patty. A media query on the style sheet determines when the screen is wide or narrow. When the screen is narrow, then the patty becomes visible. I’ve been experimenting with another option. When the menu is small and the links are only visible on a mobile screen, then the shape of the horizontal navigation changes.
/* =========================
Very small screens
========================= */
@media (max-width: 480px) {
horizontalnav {
min-height: 70px;
padding: 0.85rem 1rem;
}
horizontalnav h1 {
font-size: 1.25rem;
}
horizontalnav label {
font-size: 1.5rem;
}
.patty {
top: 15px;
right: 15px;
width: 64px;
height: 64px;
font-size: 9px;
}
}You can see this in action when you go to codepen and widen or narrow the browser window
Now lets say I want to have a collection of conference images and I want to combine it with an orange coloured gradient overlay. In the code, I’d switch to back ground image (instead of a background colour). Then add the variable called bgimage to my root folder.
:root {
--bg: #E0552D;
--primary: #BD3417;
--secondary:#224A6E;
--dark: #BD3417;
--cream: #DF7B61;
--white: #ffffff;
--shadow: 0 4px 15px rgba(83, 97, 116, 0.5);
--globe: #ccc;
--bgimage: linear-gradient(
110deg,
rgba(224, 85, 45, 0.1) 5%,
rgba(224, 85, 45, 0.4) 20%,
rgba(224, 85, 45, 0.9) 90%
),
url("https://upload.wikimedia.org/wikipedia/commons/0/03/Wikify_Conference_Cover.jpg");
}
A background image that now appears on the front cover and there is a colour gradient. The one side of the hero image is relatively transparent while the other side is strongly orange in colour. heading and turned it into a gradient.
.presentation {
width: 100vw;
height: 100vh;
background: var(--bgimage);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}Replace var(–bgimage) with var(–bg) and you will have a solid color again.
Now after all this work, I’m still wondering if my index page should have three columns. And so I throw in three columns below the white background and text (or the image, depending which one you selected)
3 | Script JS
Confession: I cannot really do javascript from scratch and although I’ve been playing and programming with Javascript components and I know enough about variables, DOM manipulation and dynamically modifying pages. Chat GPT has made me feel far more cleverer than I am. I have used it to create a number of functions that talk to the Wikimedia API. These functions include a
- Username checker
- Contribution checker
- Wiki list tool
- People List Builder
These scripts are in still production and will appear on Github and licensed openly
4| The API
The text and media that I have drawn on is not contained within the page. Some of the text sits on Wikimedia and servers. And other content is being pulled in from my blog or an individual JSON file by means of a call back function.
Broad strokes
“To transform is to execute change that can be reconciled with what pre-existed. To transmogrify is to change in a way that cannot be so squared (Finn, 1999). You can check out the idea at Codepen.io/ Please note that all of these plans are open to change and interpretation.
Credit to: Braisher, Tamsin and Mike Dickison (2026). Wikifying a Conference: a guide for Wikipedians. Christchurch (N.Z.): Rove. Wikidata Q138850793
References
Finn, J.E. Transformation or Transmogrification? Ackerman, Hobbes (as in Calvin and Hobbes), and the Puzzle of Changing Constitutional Identity. Constitutional Political Economy 10, 355–365 (1999). https://doi.org/10.1023/A:1009023000354