MediaWiki vormgeven: verschil tussen versies

Uit MediaWikiGids
Ga naar: navigatie, zoeken
(Beginnetje aangemaakt)
 
k
 
(6 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 ==
 +
 
 +
=== 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 [{{fullurl:{{FULLPAGENAME}}}}&useskin=cologneblue Voorbeeld] van CologneBlue
 +
*Modern - Deze pagina als [{{fullurl:{{FULLPAGENAME}}}}&useskin=modern Voorbeeld] van Modern
 +
*MonoBook - - Deze pagina als [{{fullurl:{{FULLPAGENAME}}}}&useskin=monobook 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:
 +
 
 +
* [https://www.mediawiki.org/wiki/Category:All_skins MediaWiki.org - alle skins]
 +
* [https://www.mediawiki.org/wiki/Category:Stable_skins Alleen “Stable”]
 +
 
 +
Op deze site kun je een indruk krijgen van het type en soort websites dat een bepaalde skin gebruikt:
 +
 
 +
* [https://wikiapiary.com Wikiapiary.com]
 +
 
 +
 
 +
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 21: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.

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:

Deze site gebruikt standaard de skin "Tweeki", waarvoor nog diverse andere wiki-pagina's beschikbaar zijn om de vormgeving aan te passen:

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:

Snippets

Handige code-snippets met CSS: