Manuel:CSS
Les règles Cascading Style Sheet (CSS) définissent en grande partie l'apparence et du comportement de MediaWiki : la taille de police, les couleurs, l'espacement, le logo et l'image d'arrière-plan, même si le contenu du site est affiché ou est masqué.
Pour changer l'apparence et le comportement de l'écran d'affichage de votre MediaWiki (présentation dans un navigateur), vous pouvez mettre le CSS dans MediaWiki:Common.css . This file is a page in your wiki, not a file like index.php or load.php, so you cannot find it by looking at the directory structure on your server, nor is it linked to your Main Page or any other page initially. The page initially consists of just a one-line comment. To find it, type MediaWiki:Common.css in the search box on the main page of your wiki. It will appear as a file with an address something like https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css.
Pour changer la façon dont les pages de MediaWiki s'affichent à l'impression, vous pouvez mettre le CSS dans MediaWiki:Print.css sur votre wiki.
Le CSS peut être utilisé pour changer le style de l'ensemble du wiki, par exemple pour modifier la couleur de l'arrière-plan, ou la mise en forme de morceaux de texte spécifiques dans votre wiki en utilisant le CSS en ligne.
Par exemple texte vert peut être fait avec <span style="color:green;">text vert</span>body { font-size: larger; }
S'il est activé sur votre wiki, les utilisateurs individuels peuvent créer des feuilles de style personnalisées pour eux-mêmes à Special:MyPage/<skin_name>.css (par exemple Special:MyPage/vector.css s'ils utilisent l'habillage Vector). "Special:MyPage/common.css" permet la création de feuilles de styles personnalisées pour toutes les apparences.
Vous pouvez également créer des habillages personnalisés pour MediaWiki.
Aide
La syntaxe CSS, les attributs et les valeurs, doivent être corrects sinon cela ne fonctionnera pas comme il le faut. World Wide Web Consortium (W3C) est une excellente référence pour savoir comment écrire du CSS correctement, directement à partir de la norme :
- https://www.w3.org/TR/CSS21/propidx.html - CSS 2.1 Index des propriétés ← utile
- http://www.w3.org/TR/CSS21/indexlist.html - CSS 2.1 Index exhaustif
- http://www.w3.org/TR/CSS21/cover.html#minitoc - CSS 2.1 Table des contenus
Wikipédia donne un bon aperçu du CSS.
Si vous préférez une référence facilement consommable aux côtés de démonstrations de fonctionnalités CSS Mozilla Developer Network CSS Reference vous fournira un guide "à jour" pour la syntaxe et l'utilisation de base des différents éléments.
Mises en garde
Assurez-vous de conserver votre sémantique de balisage HTML. Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).
CSS Normalisé
Beaucoup de code CSS s'appuie aujourd'hui sur un CSS réinitialisé ou normalisé pour que tous les navigateurs fonctionnent de la même manière. MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and MediaWiki:Common.css.
Si vous copiez du code CSS, vérifiez qu'il ne dépende pas de code CSS supplémentaire.
Par exemple, jsFiddle a une case à cocher pour "CSS normalisé".
Ceci fixe les margins à 0 et réinitialise les nombres pour les listes ordonnées.
Since none of this normalization CSS is running on MediaWiki sites, you should not use it when testing MediaWiki-related code.
jsfiddle possède une fonctionnalité d'importation de CSS. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):
- Code CSS commun intégré au noyau (tous les habillages qui utilisent CSS)
- CSS Général et Vector intégrés au noyau
- Site CSS (espace de noms MediaWiki)
- MediaWiki.org contrôle les CSS du site avec l'extension Gadgets, donc MediaWiki:Gadget-site.css est utilisé à la place de MediaWiki:Common.css. Ceci résulte en une URL de chargement un peu différente.
Vous pouvez ajuster le domaine dans l'URL pour d'autres wikis WMF. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.
Les styles ne fonctionnent pas sur Special:UserLogin ou Special:Preferences ?
Par défaut, la personalisation des CSS du site (par exemple MediaWiki:Common.css) ne prend pas effet sur la page de login et des préférences.
Il s'agit de préserver la sécurité du processus de connexion et de permettre aux utilisateurs de supprimer les personnalisations indésirables sans être gênés.
Si vous n'êtes pas préoccupé par les risques de sécurité, vous pouvez utiliser le paramètre de configuration $wgAllowSiteCSSOnRestrictedPages pour permettre aux CSS personnalisés de fonctionner sur ces pages.
Custom fonts versus privacy
On Wikimedia sites, do not load custom fonts from external third-party servers. On Wikimedia wikis, you can load a font family provided by Wikimedia's Universal Language Selector extension (see the list of fonts available on Wikimedia wikis).
Example CSS to load the Gochi Hand font:
@font-face {
font-family: 'GochiHand';
src: local("Gochi Hand"),
url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}