Wiki Website Workshop: Difference between revisions

From XPUB & Lens-Based wiki
Line 12: Line 12:
<div style="color:olive;">
<div style="color:olive;">
Styling the wiki with CSS is a bit quirky because we are writing a mix of [https://en.wikipedia.org/wiki/Help:Cheatsheet Wiki Markup] (also called 'Wiki text') and inline-CSS.
Styling the wiki with CSS is a bit quirky because we are writing a mix of [https://en.wikipedia.org/wiki/Help:Cheatsheet Wiki Markup] (also called 'Wiki text') and inline-CSS.
=== to style your wiki page, open it with the ''source editor''===
=== 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)
: 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?===
=== Inline CSS?===
: we use CSS ('''C'''ascading '''S'''tyle '''S'''heets) to apply styling to a websites content (HTML).
: we use CSS ('''C'''ascading '''S'''tyle '''S'''heets) to apply styling to a websites content (HTML).

Revision as of 09:14, 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?

  1. basics of styling any wiki page using inline css
  2. what is an API?
  3. 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. External
2. Internal
3. Inline

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.