Manual:Interface/Stylesheets/nl

MediaWiki:Common.css is een CCS dat geladen wordt na het actieve stylesheet van de Skin. Dit stylesheet wordt met alle skins geladen en een gelijksoortig stylesheet specifiek voor de skin met de naam "MediaWiki:skinname.css" wordt eraan toegevoegd (zie hieronder). Alhoewel alleen Monobook.css op Special:AllMessages wordt getoond, zullen de andere skin specifieke stylesheets ook werken.

Als $wgAllowUserCss de waarde trueheeft, kunnen gebruikers de interface voor zichzelf aanpassen door gebruikerssubpagina's te maken met titels in kleine letters (zie hieronder).

De global stylesheets zullen niet op de speciale beperkte pagina's worden geladen, dit zijn pagina's als Inloggen en Voorkeuren, tenzij u $wgAllowSiteCSSOnRestrictedPages inschakelt.

Ze zullen ook niet laden als de safemode wordt gebruikt.

Lijst van de stylesheets

Globale stylesheets

Dit zijn stylesheets die alle gebruikers van de wiki beïnvloeden, afhankelijk van hun instelling - welke skin ze gebruiken, hun gebruikersgroep, enz.

• MediaWiki:Common.css - (alle skins en alle gebruikers, m.u.v. voor het MobileFrontend)
• MediaWiki:skinname.css - (per skin, skinname is de waarde van die variabele in het PHP-bestand van uw skin. Bijvoorbeeld: MediaWiki:Vector.css, MediaWiki:Monobook.css)
• User group CSS - (per gebruikersgroep, voorbeeld: MediaWiki:Group-sysop.css)
• MediaWiki:Noscript.css - (voor gebruikers die kijken zonder JavaScript; kan vervangen worden door een body.client-nojs selector)
• MediaWiki:Print.css - (voor "afdrukbare versies" van pagina's)
• MediaWiki:Mobile.css - (voor Mobiele thema's,gebruikt met de Extension:MobileFrontend )
• MediaWiki:Filepage.css - specifiek bedoeld om Commons bestandspagina's te hebben (externe repositories) werken op 'lokale' bestandspagina's.
• MediaWiki:Apioutput.css - voor het web (niet JSON) resultaten van API-query's

Persoonlijke stylesheets

Dit zijn stylesheets die u alleen zelf (en gebruikers met het recht editusercss , meestal interfacebeheerders) kunt bewerken.

• User:Example/common.css - (alle skins, vanaf MediaWiki 1.17)
• User:Example/skinname.css - (per skin, bijvoorbeeld User:Example/vector.css en User:Example/monobook.css)
• User:Example/global.css - (per wiki familie, indien Extension:GlobalCssJs daar gebruikt wordt)

In het geval van tegenstrijdige stijlinstellingen voor een deel van de inhoud hangt de resulterende instelling voornamelijk af van de specificiteit. Bij twee regels met dezelfde specificiteit hangt het af van de volgorde tussen en binnen de stylesheets: de laatste is geldig. Zie ook cascading order. De volgorde kan worden gewijzigd met de indicatie !important, maar dit moet over het algemeen worden vermeden.

CSS-selectors

In de skin Monobook zijn de CSS-selectors die relevant zijn voor de stijl van de hoofdtekst van de pagina onder andere de hieronder genoemde. Voor zover mogelijk worden er voorbeelden gegeven, die het resultaat voor de huidige stijlinstellingen tonen:

• :link – niet bezochte link – voorbeeld: help:index ; standaard: help:index
• :visited – bezochte link
• :link#contentTop
• :link.external – http://example ; standaard: http://example
• :link.extiw – interwiki-link in de page body –  ; default: en:example
• :link.image – link van de volledige afbeelding naar de pagina met de beschrijving van de afbeelding
• :link.internal – link naar het bestand zelf (Media:), en links van het miniatuur- en vergrootglas naar de afbeeldingsbeschrijvingspagina (let op dat de voor intern gespecificeerde kleur en lettergrootte alleen in het eerste geval van toepassing zijn) – Media:example.png
• :link.new – doesnotexist ; standaard: doesnotexist
• .allpagesredirect – abc – doorverwijzingen in Special:Allpages en Special:Prefixindex
• body.ns-0, ..., body.ns-15 (namespaces)
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• small – voorbeeld
• table.toc
• :link en :visited – Het is een veel voorkomende fout om a in plaats van :link of :visited te gebruiken om links op te maken (respectievelijk niet bezocht en bezocht). Terwijl later pseudoclasses alleen van toepassing zijn op links, is a van toepassing op zowel links als benoemde ankers (bijv. <a name="bookmark">).

• #p-lang a – voor intertaallinks

De style kan ook afhangen van de waarde van een attribuut, bijvoorbeeld bij de selectors:

• :link[title = "User:username"]}}
• link[title = "pagename"]}}
• link[href = "full url "]}}

om een te kleurcode geven of specifieke gebruikers (inclusief zichzelf) te markeren en/of links naar bepaalde pagina's markeren (zoals het vet tonen van gevolgde pagina's in Recente Wijzigingen).

Zie ook Help:Watching pages#CSS

De Volglijst en Recente Wijzigingen gebruiken twee classes:

• .autocomment
  example
• .new (zie hieronder)

De paginageschiedenis heeft de classes autocomment en:

• .user
• .minor

Het lettertype dat is opgegeven voor user is dus van toepassing in de paginageschiedenis, maar niet in de Volglijst of Recente wijzigingen.

Bewerkingspagina

• Bewerking box: textarea#wpTextbox1

example1

• Bewerkingssamenvatting box: input#wpSummary

example2

Niet weergeven

Een extreme style voor een tekst is display:none;, d.w.z. het niet weergeven ervan, bijv.

p<span style="display:none;">q</span>r → pqr

Om een tekst optioneel deze style te laten hebben, moet u het een class of id geven; een gebruiker die het wil verbergen kan dan een overeenkomstige regel in zijn persoonlijke CSS maken:

.classname {display: none;} or #id {display: none;}

Niet-weergegeven links werken niet, in tegenstelling tot links in een zeer klein lettertype, vergelijk:

p<span style="display:none;">[[q]]</span>r gives pqr

p<small><small><small><small><small>[[q]]</small></small></small></small></small>r gives pqr

Het kan niet worden gebruikt om tekst in expressies te verwijderen voor sjabloonnamen, parameternamen, parameterwaarden, paginanamen in links, enz.

Terwijl display: none; niets teruggeeft, geeft visibility: hidden; lege spaties die de inhoud vervangen; Het tegenovergestelde is visibility: visible;.

Voorbeeld:

p<span style="visibility: hidden;">q</span>r gives pqr

Probeer de pagina te inspecteren met de Webontwikkelaarshulpmiddelen die waarschijnlijk bij uw browser zijn geleverd om het verborgen element te vinden.

Als u de verborgen tekst wilt bekijken, kunt u een add-on voor uw browser gebruiken. De add-on Web Developer is bijvoorbeeld beschikbaar voor Firefox en Chrome. U kunt het aan uw browser toevoegen en vervolgens "Extra" kiezen. -> "Verborgen elementen weergeven" in die werkbalk, om alle verborgen elementen te laten weergeven.

Niet afdrukken

Men kan inhoud overslaan bij het afdrukken (als de browser CSS ondersteunt) door te verklaren dat de inhoud van de class "noprint" is:

<div class="someclass noprint">This will not appear in the print version.</div>

Style afhankelijk van een parameter of variabele

Variabele class of ID

Een class of ID kan afhankelijk zijn van het resultaat van een sjabloon of van een sjabloonparameter, bijvoorbeeld class="abc{{{1|def}}}". Voor één of meer van de mogelijke classnames kan de style van die class worden gedefinieerd. Als de class niet gedefinieerd is, wordt deze genegeerd, dus wordt de standaard style gebruikt. In het eenvoudigste geval hebben we bijvoorbeeld class="abc{{{1}}}" en definieer de class abcdef. If the parameter value is "def", it applies.

Als een pagina voor algemeen gebruik alleen zinvol is wanneer stijlen voor bepaalde classes worden gedefinieerd, moeten deze worden gespecificeerd op pagina MediaWiki:Common.css, die van toepassing is op alle gebruikers en alle skins, voor zover niet later overschreven.

Variabele style parameterwaarde

Wikitext like

<span style="display:{{{3|none}}}">Wed</span>

displays "Wed" if parameter 3 is defined, but its value is not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than none, that style is applied.

Zie ook

• Help:Vormgevingen
• Manual:CSS
• Manual:Gallery of user styles
• Category:Snippets with CSS