Wiki Website Workshop: Difference between revisions

Revision as of 12:03, 3 October 2025

What is this about?

We want to use the mediaWiki api to turn a wiki page into a website.

How are we going to do it?

basics of styling any wiki page using inline css
what is an API?
Set up and Boilerplate

Style your Wiki page

Styling the wiki with CSS is a bit quirky because we are writing a mix of Wiki Markup (also called 'Wiki text') and inline-CSS.

source editing

to style your wiki page, open it with the source editor

this is also a great way to find out how other people applied styles to their wiki pages (just be careful to not make any changes if you inspect other Users pages)

Inline CSS?

we use CSS (Cascading Style Sheets) to apply styling to a websites content (HTML).

CSS can be connected to HTML in 3 different ways:

1. Inline (styles defined directly in an html element <h1 style="color: blue;">)

2. Internal (styles defined in your html document head, <style>)

3. External (link to an external stylesheet in the head of an HTML document <link rel="stylesheet" href="style.css">)

tips and tricks:

most things that you want to style, you can just wrap in a <div></div> HTML element and then apply some styling to the element itself. This will style whatever is contained inside it.

Some elements need a little extra care, such as headlines. The above mentioned <div></div> will not work. Instead they want to be wrapped in a <span> like this:
==<span style="color:red;">Style your Wiki page</span>== You can see that I used the Wiki Markup syntax to define a header (==) and added some inline styling to the span element.

feel free to add your tricks here to the list! ...

example pages

Background with Gradient: User:Aksellr, styled Table of Content: User:Martina, Layout adjustments and colorful headers: User:FLEM/Graduationprojectproposaldraft

feel free to add your examples here to the list! ...

@@ Line 29: / Line 29: @@
 ===<span style="color:dodgerblue;"> tips and tricks:</span> ===
 : most things that you want to style, you can just wrap in a <code style="background:yellow;"><nowiki><div></div></nowiki></code> HTML element and then apply some styling to the element itself. This will style whatever is contained inside it.
-: Some elements need a little extra care, such as headlines. The above mentioned <code><nowiki><div></div></nowiki></code> will not work. Instead they want to be wrapped in a <code><nowiki><span></nowiki></code> like this: <br> <code ><nowiki>==<span style="color:red;">Style your Wiki page</span>==</nowiki></code> ''You can see that I used the Wiki Markup syntax to define a header (<nowiki>==</nowiki>) and added some inline styling to the span element.''
+: Some elements need a little extra care, such as headlines. The above mentioned <code style="background:yellow;><nowiki><div></div></nowiki></code> will not work. Instead they want to be wrapped in a <code><nowiki><span></nowiki></code> like this: <br> <code style="background:yellow;><nowiki>==<span style="color:red;">Style your Wiki page</span>==</nowiki></code> ''You can see that I used the Wiki Markup syntax to define a header (<nowiki>==</nowiki>) and added some inline styling to the span element.''
 : feel free to add your tricks here to the list! ...
 ===<span style="color: blue">example pages</span>===
 Background with Gradient: [[User:Aksellr]], styled Table of Content: [[User:Martina]], Layout adjustments and colorful headers: [[User:FLEM/Graduationprojectproposaldraft]]
 : feel free to add your examples here to the list! ...
 </div>