MediaWiki vormgeven: verschil tussen versies
(1e opzet) |
k |
||
| (5 tussenliggende versies door dezelfde gebruiker niet weergegeven) | |||
| Regel 8: | Regel 8: | ||
* Ingebouwde pagina's voor vormgeving | * Ingebouwde pagina's voor vormgeving | ||
* Uitbreidingen of extensies voor vormgeving | * Uitbreidingen of extensies voor vormgeving | ||
| − | * Bootstrap & MediaWiki | + | * [[Bootstrap voor MediaWiki|Bootstrap & MediaWiki]] |
== MediaWiki Skins == | == MediaWiki Skins == | ||
| Regel 18: | Regel 18: | ||
Naast Vector wordt een aantal skins standaard meegeleverd in de officiële MediaWiki-distributies: | Naast Vector wordt een aantal skins standaard meegeleverd in de officiële MediaWiki-distributies: | ||
| − | *CologneBlue | + | *CologneBlue - Deze pagina als [{{fullurl:{{FULLPAGENAME}}}}&useskin=cologneblue Voorbeeld] van CologneBlue |
| − | *Modern | + | *Modern - Deze pagina als [{{fullurl:{{FULLPAGENAME}}}}&useskin=modern Voorbeeld] van Modern |
| − | *MonoBook | + | *MonoBook - - Deze pagina als [{{fullurl:{{FULLPAGENAME}}}}&useskin=monobook Voorbeeld] van MonoBook |
=== Skins door derden === | === Skins door derden === | ||
| Regel 35: | Regel 35: | ||
Skins downloaden kun je doen via de [https://www.mediawiki.org/wiki/Special:SkinDistributor Skin distributor] op de website van MediaWiki. Hou in de gaten dat veel ontwikkelaars van skins de distributie via andere website (bijv. Github) doen. | Skins downloaden kun je doen via de [https://www.mediawiki.org/wiki/Special:SkinDistributor Skin distributor] op de website van MediaWiki. Hou in de gaten dat veel ontwikkelaars van skins de distributie via andere website (bijv. Github) doen. | ||
| + | |||
| + | Zie ook: [[Vergelijk MediaWiki skins]] | ||
| + | |||
| + | == Ingebouwde pagina's voor vormgeving == | ||
| + | |||
| + | Er is een aantal wiki-pagina's beschikbaar, waarmee je de vormgeving van MediaWiki kunt aanpassen. De meest gebruikte zijn: | ||
| + | * [[MediaWiki:Sidebar]] - Standaard gebruikt om het zij-menu (de "sidebar") aan te passen. NB: niet functioneel in de skin die MediaWikiGids gebruikt!!) | ||
| + | * [[MediaWiki:Common.css]] - Een pagina om algemene CSS toe te voegen. Zie ook [https://www.mediawiki.org/wiki/Manual:Interface/Stylesheets handleiding (en)]. | ||
| + | * MediaWiki:skinnaam.css - Bijvoorbeeld [[MediaWiki:Vector.css]] en [[MediaWiki.Monobook.css]] om CSS toe te voegen aan een specifieke skin. Zie ook de [https://www.mediawiki.org/wiki/Manual:Interface/Stylesheets handleiding]. | ||
| + | |||
| + | Deze site gebruikt standaard de skin "Tweeki", waarvoor nog diverse andere wiki-pagina's beschikbaar zijn om de vormgeving aan te passen: | ||
| + | |||
| + | * [[MediaWiki:Tweeki-navbar-brand]] - instellen van navigatie-bar branding | ||
| + | * [[MediaWiki:Tweeki-navbar-right]] | ||
| + | * [[MediaWiki:Tweeki-navbar-left]] | ||
| + | * [[MediaWiki:tweeki-sidebar-right]] | ||
| + | * [[MediaWiki:tweeki-sidebar-left]] | ||
| + | * [[MediaWiki:Tweeki-footer]] - instellen footer | ||
| + | |||
| + | == Uitbreidingen of extensie voor CSS == | ||
| + | Met CSS kan de styling van de gehele wiki worden aangepast, zoals bijvoorbeeld een andere achtergrondkleur, of je kunt "inline" CSS gebruiken om specifieke stukken tekst in je wiki te stylen. Bijvoorbeeld <span style="color: green;">groene tekst</span> kan worden gemaakt met deze code: | ||
| + | |||
| + | <span style="color:green;">groene tekst</span> | ||
| + | |||
| + | Voor structureel en intensief gebruik van CSS, is er een aantal extensies beschikbaar: | ||
| + | * [https://www.mediawiki.org/wiki/Extension:CSS Extension:CSS] of [https://www.mediawiki.org/wiki/Extension:NewPageCSS NewPageCSS] | ||
| + | * [https://www.mediawiki.org/wiki/Extension:CSS_MenuSidebar Extension:CSS_MenuSidebar] | ||
| + | * [https://www.mediawiki.org/wiki/Extension:H1_CSS Extension:H1_CSS] | ||
| + | * [https://www.mediawiki.org/wiki/Extension:TemplateStyles Extension:TemplateStyles] | ||
| + | * [https://www.mediawiki.org/wiki/Extension:GlobalCssJs Extension:GlobalCssJs] | ||
| + | |||
| + | === Snippets === | ||
| + | |||
| + | Handige code-snippets met CSS: | ||
| + | * [https://www.mediawiki.org/wiki/Category:Snippets_with_CSS CSS-snippets] | ||
Huidige versie van 27 sep 2017 om 22:22
Bij MediaWiki denken veel mensen aan een website die eruit ziet als Wikipedia. Dat is logisch, maar er is veel mogelijk voor het vormgeven van een MediaWiki website.
Inhoud
Onderwerpen vormgeving
- Het gebruik van "skins"
- Standaard skins die zijn meegeleverd bij MediaWiki
- Skins door derde partijen zijn ontwikkeld
- Ingebouwde pagina's voor vormgeving
- Uitbreidingen of extensies voor vormgeving
- Bootstrap & MediaWiki
MediaWiki Skins
Standaard skins
De standaard skin voor MediaWiki (Wikipedia) is 'Vector'. Vector heeft een neutrale uitstraling en komt (door het gebruik bij Wikipedia) bij veel mensen als vertrouwd over.
Voor 'Vector' was de standaard skin 'Monobook'. Vector is zowel op particuliere als bedrijfswiki's een van de meest gebruikte skins.
Naast Vector wordt een aantal skins standaard meegeleverd in de officiële MediaWiki-distributies:
- CologneBlue - Deze pagina als Voorbeeld van CologneBlue
- Modern - Deze pagina als Voorbeeld van Modern
- MonoBook - - Deze pagina als Voorbeeld van MonoBook
Skins door derden
In de loop der tijd is er een aantal alternatieve skins ontwikkeld voor MediaWiki. Hoewel het aantal niet zo groot is als voor bijvoorbeeld Wordpress is er wel sprake van een ruime keuze. Wanneer je een alternatief zoekt voor de standaard skins kun je terecht bij:
Op deze site kun je een indruk krijgen van het type en soort websites dat een bepaalde skin gebruikt:
Skins downloaden kun je doen via de Skin distributor op de website van MediaWiki. Hou in de gaten dat veel ontwikkelaars van skins de distributie via andere website (bijv. Github) doen.
Zie ook: Vergelijk MediaWiki skins
Ingebouwde pagina's voor vormgeving
Er is een aantal wiki-pagina's beschikbaar, waarmee je de vormgeving van MediaWiki kunt aanpassen. De meest gebruikte zijn:
- MediaWiki:Sidebar - Standaard gebruikt om het zij-menu (de "sidebar") aan te passen. NB: niet functioneel in de skin die MediaWikiGids gebruikt!!)
- MediaWiki:Common.css - Een pagina om algemene CSS toe te voegen. Zie ook handleiding (en).
- MediaWiki:skinnaam.css - Bijvoorbeeld MediaWiki:Vector.css en MediaWiki.Monobook.css om CSS toe te voegen aan een specifieke skin. Zie ook de handleiding.
Deze site gebruikt standaard de skin "Tweeki", waarvoor nog diverse andere wiki-pagina's beschikbaar zijn om de vormgeving aan te passen:
- MediaWiki:Tweeki-navbar-brand - instellen van navigatie-bar branding
- MediaWiki:Tweeki-navbar-right
- MediaWiki:Tweeki-navbar-left
- MediaWiki:tweeki-sidebar-right
- MediaWiki:tweeki-sidebar-left
- MediaWiki:Tweeki-footer - instellen footer
Uitbreidingen of extensie voor CSS
Met CSS kan de styling van de gehele wiki worden aangepast, zoals bijvoorbeeld een andere achtergrondkleur, of je kunt "inline" CSS gebruiken om specifieke stukken tekst in je wiki te stylen. Bijvoorbeeld groene tekst kan worden gemaakt met deze code:
groene tekst
Voor structureel en intensief gebruik van CSS, is er een aantal extensies beschikbaar:
- Extension:CSS of NewPageCSS
- Extension:CSS_MenuSidebar
- Extension:H1_CSS
- Extension:TemplateStyles
- Extension:GlobalCssJs
Snippets
Handige code-snippets met CSS: