Wiki Website Workshop: Difference between revisions
| 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. | ||
=== source editing === | |||
===<span style="color:red;"> source editing</span> === | |||
: to style your wiki page, open it with the ''source editor'' | : 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?=== | ===<span style="color:magenta;"> Inline CSS?</span>=== | ||
: 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). | ||
: CSS can be connected to HTML in 3 different ways: | : CSS can be connected to HTML in 3 different ways: | ||
| Line 22: | Line 23: | ||
:: 2. Internal | :: 2. Internal | ||
:: 3. Inline | :: 3. Inline | ||
=== tips and tricks: === | ===<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. | : 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> | : 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> | ||
<br> | <br> | ||
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. | 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. | ||
</div> | </div> | ||
Revision as of 09:17, 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. 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.