CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-sticky-header-enabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Help:TemplateStyles - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-sticky-header-enabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"d4977640-f56b-4195-bf11-98f9914e95d5","wgCanonicalNamespace":"Help","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":12,"wgPageName":"Help:TemplateStyles","wgTitle":"TemplateStyles","wgCurRevisionId":7065384,"wgRevisionId":7065384,"wgArticleId":696407,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Help"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Help:TemplateStyles","wgRelevantArticleId":696407,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgTranslatePageTranslation":"source","wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q51724369","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"wgSiteNoticeId":"2.8"}; RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.dismissableSiteNotice.styles":"ready"};RLPAGEMODULES=["ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.dismissableSiteNotice"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.discussionTools.init.styles%7Cext.dismissableSiteNotice.styles%7Cext.pygments%2Ctranslate%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.22"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Help:TemplateStyles - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Help:TemplateStyles"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Help:TemplateStyles&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Help:TemplateStyles"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="auth.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-12 ns-subject mw-editable page-Help_TemplateStyles rootpage-Help_TemplateStyles skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" title="Main menu" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn_statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages"><span>Special pages</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D9%88%D9%8A%D9%83%D9%8A%D8%A8%D9%8A%D8%AF%D9%8A%D8%A7:%D8%A3%D9%86%D9%85%D8%A7%D8%B7_%D8%A7%D9%84%D9%82%D9%88%D8%A7%D9%84%D8%A8" title="ويكيبيديا:أنماط القوالب – Arabic" lang="ar" hreflang="ar" data-title="ويكيبيديا:أنماط القوالب" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-azb mw-list-item"><a href="https://azb.wikipedia.org/wiki/%D9%88%DB%8C%DA%A9%DB%8C%E2%80%8C%D9%BE%D8%AF%DB%8C%D8%A7:TemplateStyles" title="ویکی‌پدیا:TemplateStyles – South Azerbaijani" lang="azb" hreflang="azb" data-title="ویکی‌پدیا:TemplateStyles" data-language-autonym="تۆرکجه" data-language-local-name="South Azerbaijani" class="interlanguage-link-target"><span>تۆرکجه</span></a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/Viquip%C3%A8dia:TemplateStyles" title="Viquipèdia:TemplateStyles – Catalan" lang="ca" hreflang="ca" data-title="Viquipèdia:TemplateStyles" data-language-autonym="Català" data-language-local-name="Catalan" class="interlanguage-link-target"><span>Català</span></a></li><li class="interlanguage-link interwiki-da mw-list-item"><a href="https://da.wikipedia.org/wiki/Wikipedia:TemplateStyles" title="Wikipedia:TemplateStyles – Danish" lang="da" hreflang="da" data-title="Wikipedia:TemplateStyles" data-language-autonym="Dansk" data-language-local-name="Danish" class="interlanguage-link-target"><span>Dansk</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Hilfe:CSS/TemplateStyles" title="Hilfe:CSS/TemplateStyles – German" lang="de" hreflang="de" data-title="Hilfe:CSS/TemplateStyles" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-en mw-list-item"><a href="https://en.wikipedia.org/wiki/Wikipedia:TemplateStyles" title="Wikipedia:TemplateStyles – English" lang="en" hreflang="en" data-title="Wikipedia:TemplateStyles" data-language-autonym="English" data-language-local-name="English" class="interlanguage-link-target"><span>English</span></a></li><li class="interlanguage-link interwiki-gag mw-list-item"><a href="https://gag.wikipedia.org/wiki/%C5%9Eablon:TemplateStyles/belge" title="Şablon:TemplateStyles/belge – Gagauz" lang="gag" hreflang="gag" data-title="Şablon:TemplateStyles/belge" data-language-autonym="Gagauz" data-language-local-name="Gagauz" class="interlanguage-link-target"><span>Gagauz</span></a></li><li class="interlanguage-link interwiki-ilo mw-list-item"><a href="https://ilo.wikipedia.org/wiki/Wikipedia:TemplateStyles" title="Wikipedia:TemplateStyles – Iloko" lang="ilo" hreflang="ilo" data-title="Wikipedia:TemplateStyles" data-language-autonym="Ilokano" data-language-local-name="Iloko" class="interlanguage-link-target"><span>Ilokano</span></a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikipedia.org/wiki/Aiuto:TemplateStyles" title="Aiuto:TemplateStyles – Italian" lang="it" hreflang="it" data-title="Aiuto:TemplateStyles" data-language-autonym="Italiano" data-language-local-name="Italian" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%ED%8B%80%EC%8A%A4%ED%83%80%EC%9D%BC" title="위키백과:틀스타일 – Korean" lang="ko" hreflang="ko" data-title="위키백과:틀스타일" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-la mw-list-item"><a href="https://la.wikipedia.org/wiki/Vicipaedia:TemplateStyles" title="Vicipaedia:TemplateStyles – Latin" lang="la" hreflang="la" data-title="Vicipaedia:TemplateStyles" data-language-autonym="Latina" data-language-local-name="Latin" class="interlanguage-link-target"><span>Latina</span></a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Wikip%C3%A9dia:TemplateStyles" title="Wikipédia:TemplateStyles – Portuguese" lang="pt" hreflang="pt" data-title="Wikipédia:TemplateStyles" data-language-autonym="Português" data-language-local-name="Portuguese" class="interlanguage-link-target"><span>Português</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8%D0%BF%D0%B5%D0%B4%D0%B8%D1%8F:%D0%A1%D1%82%D0%B8%D0%BB%D0%B8_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2" title="Википедия:Стили шаблонов – Russian" lang="ru" hreflang="ru" data-title="Википедия:Стили шаблонов" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-si mw-list-item"><a href="https://si.wikipedia.org/wiki/%E0%B7%80%E0%B7%92%E0%B6%9A%E0%B7%92%E0%B6%B4%E0%B7%93%E0%B6%A9%E0%B7%92%E0%B6%BA%E0%B7%8F:TemplateStyles" title="විකිපීඩියා:TemplateStyles – Sinhala" lang="si" hreflang="si" data-title="විකිපීඩියා:TemplateStyles" data-language-autonym="සිංහල" data-language-local-name="Sinhala" class="interlanguage-link-target"><span>සිංහල</span></a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/Wikipedia:TemplateStyles" title="Wikipedia:TemplateStyles – Simple English" lang="en-simple" hreflang="en-simple" data-title="Wikipedia:TemplateStyles" data-language-autonym="Simple English" data-language-local-name="Simple English" class="interlanguage-link-target"><span>Simple English</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/%C5%9Eablon:TemplateStyles/belge" title="Şablon:TemplateStyles/belge – Turkish" lang="tr" hreflang="tr" data-title="Şablon:TemplateStyles/belge" data-language-autonym="Türkçe" data-language-local-name="Turkish" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/Wikipedia:%E6%A8%A1%E6%9D%BF%E6%A8%A3%E5%BC%8F" title="Wikipedia:模板樣式 – Chinese" lang="zh" hreflang="zh" data-title="Wikipedia:模板樣式" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q51724369#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search mediawiki.org" aria-label="Search mediawiki.org" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Help%3ATemplateStyles" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Help%3ATemplateStyles" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Help%3ATemplateStyles" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Help%3ATemplateStyles" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Contents" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"><div id="mw-dismissablenotice-anonplace"></div><script>(function(){var node=document.getElementById("mw-dismissablenotice-anonplace");if(node){node.outerHTML="\u003Cdiv class=\"mw-dismissable-notice\"\u003E\u003Cdiv class=\"mw-dismissable-notice-close\"\u003E[\u003Ca tabindex=\"0\" role=\"button\"\u003Edismiss\u003C/a\u003E]\u003C/div\u003E\u003Cdiv class=\"mw-dismissable-notice-body\"\u003E\u003C!-- CentralNotice --\u003E\u003Cdiv id=\"localNotice\" data-nosnippet=\"\"\u003E\u003Cdiv class=\"sitenotice\" lang=\"en\" dir=\"ltr\"\u003E\u003Ccenter\u003E\n\u003Cdiv style=\"width:100%; padding:15px; border-style:solid; border-width:2px; border-color:var(--color-placeholder, black); font-size:14px; text-align:center;\" class=\"plainlinks\"\u003E\u003Cdiv style=\"vertical-align:middle;margin-top:0.5em\"\u003E\u003Cfigure class=\"mw-halign-left skin-invert\" typeof=\"mw:File\"\u003E\u003Ca href=\"/wiki/MediaWiki_Users_and_Developers_Conference\" title=\"MediaWiki Users and Developers Conference\"\u003E\u003Cimg src=\"//upload.wikimedia.org/wikipedia/commons/thumb/7/71/MediaWikiUsersDevelopersConferenceWordmark.png/120px-MediaWikiUsersDevelopersConferenceWordmark.png\" decoding=\"async\" width=\"100\" height=\"44\" class=\"mw-file-element\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/7/71/MediaWikiUsersDevelopersConferenceWordmark.png/250px-MediaWikiUsersDevelopersConferenceWordmark.png 1.5x\" data-file-width=\"1080\" data-file-height=\"480\" /\u003E\u003C/a\u003E\u003Cfigcaption\u003E\u003C/figcaption\u003E\u003C/figure\u003E\u003C/div\u003E\n\u003Cp\u003EEarly bird tickets for the \u003Ca href=\"/wiki/MediaWiki_Users_and_Developers_Conference_Spring_2025\" title=\"MediaWiki Users and Developers Conference Spring 2025\"\u003EMediaWiki Users and Developers Conference Spring 2025\u003C/a\u003E in \u003Ca href=\"https://en.wikipedia.org/wiki/Sandusky,_Ohio\" class=\"extiw\" title=\"w:Sandusky, Ohio\"\u003ESandusky\u003C/a\u003E, Ohio, USA are now \u003Ca rel=\"nofollow\" class=\"external text\" href=\"https://www.eventbrite.com/e/mediawiki-users-and-developers-conference-spring-2025-tickets-1254864847539\"\u003E\u003Cb\u003Eon sale on Eventbrite\u003C/b\u003E\u003C/a\u003E until April 13! In addition, the \u003Ca href=\"/wiki/MediaWiki_Users_and_Developers_Conference/Scholarships\" title=\"MediaWiki Users and Developers Conference/Scholarships\"\u003Escholarship application\u003C/a\u003E is open now until April 15.\n\u003C/p\u003E\n\u003C/div\u003E\n\u003C/center\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E";}}());</script></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-How_does_it_work?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_does_it_work?"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>How does it work?</span> </div> </a> <ul id="toc-How_does_it_work?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_problems_does_it_solve?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#What_problems_does_it_solve?"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>What problems does it solve?</span> </div> </a> <ul id="toc-What_problems_does_it_solve?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Is_it_safe?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Is_it_safe?"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Is it safe?</span> </div> </a> <ul id="toc-Is_it_safe?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_CSS_rules_are_recognized?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#What_CSS_rules_are_recognized?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>What CSS rules are recognized?</span> </div> </a> <ul id="toc-What_CSS_rules_are_recognized?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_can_I_target_mobile/desktop_resolutions?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_can_I_target_mobile/desktop_resolutions?"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>How can I target mobile/desktop resolutions?</span> </div> </a> <ul id="toc-How_can_I_target_mobile/desktop_resolutions?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_can_I_target_specific_skins?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_can_I_target_specific_skins?"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>How can I target specific skins?</span> </div> </a> <ul id="toc-How_can_I_target_specific_skins?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_do_I_use_styles_in_MediaWiki_messages?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_do_I_use_styles_in_MediaWiki_messages?"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>How do I use styles in MediaWiki messages?</span> </div> </a> <ul id="toc-How_do_I_use_styles_in_MediaWiki_messages?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-In_which_order_do_CSS_styles_override?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#In_which_order_do_CSS_styles_override?"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>In which order do CSS styles override?</span> </div> </a> <ul id="toc-In_which_order_do_CSS_styles_override?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_can_Lua_modules_interact_with_styles?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_can_Lua_modules_interact_with_styles?"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>How can Lua modules interact with styles?</span> </div> </a> <ul id="toc-How_can_Lua_modules_interact_with_styles?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_anti-abuse_features_are_provided?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#What_anti-abuse_features_are_provided?"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span> <span>What anti-abuse features are provided?</span> </div> </a> <ul id="toc-What_anti-abuse_features_are_provided?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_were_the_decisions_around_TemplateStyles_made?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_were_the_decisions_around_TemplateStyles_made?"> <div class="vector-toc-text"> <span class="vector-toc-numb">11</span> <span>How were the decisions around TemplateStyles made?</span> </div> </a> <ul id="toc-How_were_the_decisions_around_TemplateStyles_made?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Who_is_working_on_TemplateStyles?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Who_is_working_on_TemplateStyles?"> <div class="vector-toc-text"> <span class="vector-toc-numb">12</span> <span>Who is working on TemplateStyles?</span> </div> </a> <ul id="toc-Who_is_working_on_TemplateStyles?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Where_do_I_report_errors_/_ask_for_features?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Where_do_I_report_errors_/_ask_for_features?"> <div class="vector-toc-text"> <span class="vector-toc-numb">13</span> <span>Where do I report errors / ask for features?</span> </div> </a> <ul id="toc-Where_do_I_report_errors_/_ask_for_features?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Where_can_I_see_it_in_action?" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Where_can_I_see_it_in_action?"> <div class="vector-toc-text"> <span class="vector-toc-numb">14</span> <span>Where can I see it in action?</span> </div> </a> <ul id="toc-Where_can_I_see_it_in_action?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">15</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" title="Table of Contents" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Help</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">TemplateStyles</span></h1> <div class="mw-indicators"> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-help" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Help:TemplateStyles" title="View the help page [c]" accesskey="c"><span>Help</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Help_talk:TemplateStyles" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Help:TemplateStyles"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Help:TemplateStyles"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Help:TemplateStyles" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Help:TemplateStyles" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&oldid=7065384" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FHelp%3ATemplateStyles"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FHelp%3ATemplateStyles"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Help%3ATemplateStyles"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Help%3ATemplateStyles&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Help:TemplateStyles&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-wikipedia mw-list-item"><a href="https://en.wikipedia.org/wiki/Wikipedia:TemplateStyles" hreflang="en"><span>Wikipedia</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q51724369" title="Link to connected data repository item [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Help%3ATemplateStyles&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/w/index.php?title=Special:Translate&group=page-Help%3ATemplateStyles&language=&task=view" class="new" title="Start translation for this language" lang="" dir="ltr"></a></li> <li><a href="/wiki/Help:TemplateStyles/id" class="mw-pt-progress mw-pt-progress--low" title="Help:TemplateStyles/id (4% translated)" lang="id" dir="ltr">Bahasa Indonesia</a></li> <li><a href="/wiki/Help:TemplateStyles/de" class="mw-pt-progress mw-pt-progress--high" title="Hilfe:TemplateStyles (99% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Help:TemplateStyles/fr" class="mw-pt-progress mw-pt-progress--complete" title="Aide:TemplateStyles (100% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Help:TemplateStyles/pl" class="mw-pt-progress mw-pt-progress--low" title="Help:TemplateStyles/pl (4% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Help:TemplateStyles/pt-br" class="mw-pt-progress mw-pt-progress--med" title="Ajuda:TemplateStyles (15% translated)" lang="pt-BR" dir="ltr">português do Brasil</a></li> <li><a href="/wiki/Help:TemplateStyles/ro" class="mw-pt-progress mw-pt-progress--med" title="Ajutor:TemplateStyles (38% translated)" lang="ro" dir="ltr">română</a></li> <li><a href="/wiki/Help:TemplateStyles/sv" class="mw-pt-progress mw-pt-progress--low" title="Help:TemplateStyles (9% translated)" lang="sv" dir="ltr">svenska</a></li> <li><a href="/wiki/Help:TemplateStyles/cs" class="mw-pt-progress mw-pt-progress--complete" title="Nápověda:TemplateStyles (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/Help:TemplateStyles/ru" class="mw-pt-progress mw-pt-progress--med" title="Help:TemplateStyles/ru (28% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/Help:TemplateStyles/ar" class="mw-pt-progress mw-pt-progress--med" title="مساعدة:أنماط القوالب (26% translated)" lang="ar" dir="rtl">العربية</a></li> <li><a href="/wiki/Help:TemplateStyles/sd" class="mw-pt-progress mw-pt-progress--low" title="مدد:سانچوطرز (3% translated)" lang="sd" dir="rtl">سنڌي</a></li> <li><a href="/wiki/Help:TemplateStyles/th" class="mw-pt-progress mw-pt-progress--low" title="ช่วยเหลือ:TemplateStyles (3% translated)" lang="th" dir="ltr">ไทย</a></li> <li><a href="/wiki/Help:TemplateStyles/zh" class="mw-pt-progress mw-pt-progress--high" title="Help:模板樣式 (99% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Help:TemplateStyles/ja" class="mw-pt-progress mw-pt-progress--high" title="Help:TemplateStyles (97% translated)" lang="ja" dir="ltr">日本語</a></li> <li><a href="/wiki/Help:TemplateStyles/ko" class="mw-pt-progress mw-pt-progress--med" title="도움말:TemplateStyles (41% translated)" lang="ko" dir="ltr">한국어</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r6776268">.mw-parser-output .template-pd-help-page{color:var(--color-emphasized,#101418);border:solid 1px var(--border-color-base,#a2a9b1);padding:0.5em;margin:0.5em 0;background-color:var(--background-color-base,#ffffff);font-size:95%;vertical-align:middle;width:100%;box-sizing:border-box}.mw-parser-output .template-pd-help-page .icon-cell{padding:0 1em;width:30px}</style><table class="template-pd-help-page"><tbody><tr> <td class="icon-cell"><span typeof="mw:File"><span><img alt="PD" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/62/PD-icon.svg/40px-PD-icon.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/62/PD-icon.svg/60px-PD-icon.svg.png 1.5x" data-file-width="196" data-file-height="196" /></span></span></td> <td><b>Note:</b> When you edit this page, you agree to release your contribution under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>. See <a href="/wiki/Special:MyLanguage/Project:PD_help" title="Special:MyLanguage/Project:PD help">Public Domain Help Pages</a> for more info. </td> <td class="icon-cell"><span typeof="mw:File"><span><img alt="PD" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/62/PD-icon.svg/40px-PD-icon.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/62/PD-icon.svg/60px-PD-icon.svg.png 1.5x" data-file-width="196" data-file-height="196" /></span></span></td> </tr></tbody></table> <p><b><a href="/wiki/Special:MyLanguage/Extension:TemplateStyles" title="Special:MyLanguage/Extension:TemplateStyles">TemplateStyles</a><span style="display:none"><a href="/wiki/Extension:TemplateStyles" title="Extension:TemplateStyles"> </a></span></b> is a tool to enable complex styling of <a href="/wiki/Special:MyLanguage/Help:Templates" title="Special:MyLanguage/Help:Templates">templates</a> without <a href="/wiki/Special:MyLanguage/Manual:Interface_administrators" title="Special:MyLanguage/Manual:Interface administrators">interface administrator</a> privileges. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_does_it_work?" data-mw-thread-id="h-How_does_it_work?"><span id="How_does_it_work.3F"></span><span data-mw-comment-start="" id="h-How_does_it_work?"></span>How does it work?<span data-mw-comment-end="h-How_does_it_work?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=1" title="Edit section: How does it work?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Editors can add <code class="mw-highlight"><<span class="nt">templatestyles</span> <span class="na">src</span><span class="o">=</span><span class="s">"<i>[some page]</i>"</span> /></code> to a page and the contents of the referenced page will be parsed as <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" class="extiw" title="w:Cascading Style Sheets">CSS</a>, sanitized and loaded on pages where the <style data-mw-deduplicate="TemplateStyles:r7217505">.mw-parser-output .nowrap,.mw-parser-output .nowrap a:before,.mw-parser-output .nowrap .selflink:before{white-space:nowrap}</style><code class="mw-highlight nowrap"><span class="p">‎<</span><span class="nt">templatestyles</span><span class="p">></span></code> tag is used (directly or by being used in a template that's being used in a page). </p><p><code>[some page]</code> must have the <code>sanitized-css</code> (Sanitized CSS) <a href="/wiki/Special:MyLanguage/Content_handlers" title="Special:MyLanguage/Content handlers">content model</a>, which is the default for subpages in the Template namespace that end with <code>.css</code>. The recommended usage pattern is to store the styles for <code>Template:Foo</code> under a subpage like <code>Template:Foo/styles.css</code>. </p><p>If <code>[some page]</code> lacks a namespace prefix, it defaults to the Template namespace. Thus, for example, <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><span class="p"><</span><span class="nt">templatestyles</span> <span class="na">src</span><span class="o">=</span><span class="s">"Foo/styles.css"</span> <span class="p">/></span></code> will load <code>Template:Foo/styles.css</code>. </p><p>The <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r7217505" /><code class="mw-highlight nowrap"><span class="p">‎<</span><span class="nt">templatestyles</span><span class="p">></span></code> tag should be placed before the content that is styled, e.g. at the top of the template, to avoid a potential <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content" class="extiw" title="w:Flash of unstyled content">flash of unstyled content</a> if the page is partially rendered while being loaded. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="What_problems_does_it_solve?" data-mw-thread-id="h-What_problems_does_it_solve?"><span id="What_problems_does_it_solve.3F"></span><span data-mw-comment-start="" id="h-What_problems_does_it_solve?"></span>What problems does it solve?<span data-mw-comment-end="h-What_problems_does_it_solve?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=2" title="Edit section: What problems does it solve?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Traditionally, there are two ways to style templates (or any other content): by using inline styles (that is, using HTML code and adding attributes like <code>style="margin: 10px"</code> to it) or by using certain special system messages such as <a href="/wiki/Special:MyLanguage/Manual:Interface/Stylesheets" title="Special:MyLanguage/Manual:Interface/Stylesheets">MediaWiki:Common.css</a><span style="display:none"><a href="/wiki/Manual:Interface/Stylesheets" title="Manual:Interface/Stylesheets"> </a></span>. Neither of those approaches work very well. </p><p>For inline styling: </p> <ul><li>There is no separation of content and presentation. In cases where the content does not come from a template (e.g. tables in articles), that will result in article wikitext that's unintelligible for most editors.</li> <li>Since styles are mixed with wikitext, <a href="/wiki/Special:MyLanguage/Extension:CodeMirror" title="Special:MyLanguage/Extension:CodeMirror">syntax highlighting</a><span style="display:none"><a href="/wiki/Extension:CodeMirror" title="Extension:CodeMirror"> </a></span> and other forms of CSS editing support are difficult or impossible.</li> <li>Styles have to be repeated for each HTML element they apply to, which results in lots of copy-pasting and code that is hard to read and maintain.</li> <li>Style attributes are limited to a subset of CSS. Most importantly, <code>@media</code> rules needed for <a href="https://en.wikipedia.org/wiki/Responsive_web_design" class="extiw" title="w:Responsive web design">responsive design</a> do not work so it's impossible to make templates that work well over a wide range of screen sizes. Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.</li></ul> <p>For system <code>MediaWiki:*.css</code> pages: </p> <ul><li>Editing is limited to <a href="/wiki/Special:MyLanguage/MediaWiki_1.32/interface-admin" title="Special:MyLanguage/MediaWiki 1.32/interface-admin">interface administrators</a><span style="display:none"><a href="/wiki/MediaWiki_1.32/interface-admin" title="MediaWiki 1.32/interface-admin"> </a></span>, which is a major barrier to participation.</li> <li>Editing restrictions cannot be lifted as there is no way to limit what CSS rules can be used, and some of them could be abused to track readers' IP addresses or even execute scripts in some older browsers.</li> <li>Changes are impossible to test without saving first (<a href="https://phabricator.wikimedia.org/T112474" class="extiw" title="phabricator:T112474">T112474</a>).</li> <li>All stylesheets must be loaded on all pages (whether they actually use the page or not), which wastes bandwidth and makes debugging style rules harder.</li></ul> <p>TemplateStyles allows editors to associate style rules to specific pages, provides the full power of CSS stylesheets while filtering dangerous constructs, and works with preview/debug tools (such as <a href="/wiki/Special:MyLanguage/Extension:TemplateSandbox" title="Special:MyLanguage/Extension:TemplateSandbox">TemplateSandbox</a><span style="display:none"><a href="/wiki/Extension:TemplateSandbox" title="Extension:TemplateSandbox"> </a></span>) as expected. </p><p>Lowering the access and maintainability barrier will hopefully result in more innovation in the way templates are visually designed, less maintenance overhead, and better adaptability to screen options (especially mobile devices which by now constitute <a class="external text" href="https://diff.wikimedia.org/2016/03/30/unique-devices-dataset/">more than half</a> of Wikipedia pageviews). </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Is_it_safe?" data-mw-thread-id="h-Is_it_safe?"><span id="Is_it_safe.3F"></span><span data-mw-comment-start="" id="h-Is_it_safe?"></span>Is it safe?<span data-mw-comment-end="h-Is_it_safe?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=3" title="Edit section: Is it safe?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Yes! TemplateStyles includes a full-fledged <a href="/wiki/Special:MyLanguage/css-sanitizer" title="Special:MyLanguage/css-sanitizer">CSS parser</a><span style="display:none"><a href="/wiki/Css-sanitizer" title="Css-sanitizer"> </a></span> that reads, re-serializes and escapes all code and removes CSS rules which it does not recognize. The parser is sufficiently fine-grained to reject remote resources (such as background images) but allow local ones. CSS selectors are rewritten so that they cannot refer to elements outside article content. (Visually modifying areas outside article content by displacing parts of the article, e.g. via absolute positioning, is not prevented at this time. This is no change from the status quo, as such a thing was already possible with wikitext and inline styles.) </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="What_CSS_rules_are_recognized?" data-mw-thread-id="h-What_CSS_rules_are_recognized?"><span id="What_CSS_rules_are_recognized.3F"></span><span data-mw-comment-start="" id="h-What_CSS_rules_are_recognized?"></span>What CSS rules are recognized?<span data-mw-comment-end="h-What_CSS_rules_are_recognized?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=4" title="Edit section: What CSS rules are recognized?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Currently, TemplateStyles accepts most CSS3 properties supported by one or more major browser (as of early 2017). Beyond simple rules, <code>@media</code>, <code>@page</code>, <code>@supports</code>, <code>@keyframe</code> and <code>@font-face</code>/<code>@font-feature-values</code> at-rules are also supported (with font-face restricted to fonts whose name starts with <code>TemplateStyles</code>, for security reasons). For a comprehensive list of allowed properties, see the "$props" parts of the <a href="https://gerrit.wikimedia.org/r/plugins/gitiles/css-sanitizer/%2B/master/src/Sanitizer/StylePropertySanitizer.php" class="extiw" title="gerrit:plugins/gitiles/css-sanitizer/+/master/src/Sanitizer/StylePropertySanitizer.php">StylePropertySanitizer</a> code from <a href="/wiki/Special:MyLanguage/css-sanitizer" title="Special:MyLanguage/css-sanitizer">Css-sanitizer</a><span style="display:none"><a href="/wiki/Css-sanitizer" title="Css-sanitizer"> </a></span>. </p><p>Non-standard properties (including vendor prefixes) are not currently supported. See <a href="https://phabricator.wikimedia.org/T162379" class="extiw" title="phabricator:T162379">T162379</a> for plans. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_can_I_target_mobile/desktop_resolutions?" data-mw-thread-id="h-How_can_I_target_mobile/desktop_resolutions?"><span id="How_can_I_target_mobile.2Fdesktop_resolutions.3F"></span><span data-mw-comment-start="" id="h-How_can_I_target_mobile/desktop_resolutions?"></span>How can I target mobile/desktop resolutions?<span data-mw-comment-end="h-How_can_I_target_mobile/desktop_resolutions?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=5" title="Edit section: How can I target mobile/desktop resolutions?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Media queries allow you to target elements at mobile resolution and desktop resolution. Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query. Note, MediaWiki <a href="https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/%2B/master/resources/lib/ooui/wikimedia-ui-base.less" class="extiw" title="gerrit:plugins/gitiles/mediawiki/core/+/master/resources/lib/ooui/wikimedia-ui-base.less">has standardised on 640px and 1120px breakpoints</a> to represent tablet and desktop. </p><p><br /> </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_can_I_target_specific_skins?" data-mw-thread-id="h-How_can_I_target_specific_skins?"><span id="How_can_I_target_specific_skins.3F"></span><span data-mw-comment-start="" id="h-How_can_I_target_specific_skins?"></span>How can I target specific skins?<span data-mw-comment-end="h-How_can_I_target_specific_skins?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=6" title="Edit section: How can I target specific skins?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>MediaWiki provides various classes on the <code>html</code> and <code>body</code> elements, including one that indicates which skin is in use. These can be targeted by including a simple selector for the <code>html</code> or <code>body</code> element including the needed classes, followed by a space (or in CSS terms, the descendant combinator). </p><p>Generally, this technique should be used for design consistency, rather than targeting mobile and desktop as all skins can be used in both mobile and desktop resolutions. See also <a href="#How_can_I_target_mobile/desktop_resolutions?">#How can I target mobile/desktop resolutions?</a>. </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* Elements with class 'foo' will have red text in all skins */</span> <span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="c">/* Override that to green for Vector only */</span> <span class="nt">body</span><span class="p">.</span><span class="nc">skin-vector</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="c">/* Add a red border if the user doesn't have JavaScript enabled */</span> <span class="nt">html</span><span class="p">.</span><span class="nc">client-nojs</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="c">/* Make that border green in Vector */</span> <span class="nt">html</span><span class="p">.</span><span class="nc">client-nojs</span><span class="w"> </span><span class="nt">body</span><span class="p">.</span><span class="nc">skin-vector</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">border-color</span><span class="p">:</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> </pre></div> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* This does not work! The 'body' element must be specified. */</span> <span class="p">.</span><span class="nc">skin-vector</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">orange</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="c">/* These do not work! The descendant combinator must be used */</span> <span class="nt">body</span><span class="p">.</span><span class="nc">skin-vector</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">orange</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="nt">body</span><span class="p">.</span><span class="nc">skin-vector</span><span class="w"> </span><span class="o">~</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">orange</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="nt">html</span><span class="p">.</span><span class="nc">client-nojs</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="nt">body</span><span class="p">.</span><span class="nc">skin-vector</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">orange</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_do_I_use_styles_in_MediaWiki_messages?" data-mw-thread-id="h-How_do_I_use_styles_in_MediaWiki_messages?"><span id="How_do_I_use_styles_in_MediaWiki_messages.3F"></span><span data-mw-comment-start="" id="h-How_do_I_use_styles_in_MediaWiki_messages?"></span>How do I use styles in MediaWiki messages?<span data-mw-comment-end="h-How_do_I_use_styles_in_MediaWiki_messages?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=7" title="Edit section: How do I use styles in MediaWiki messages?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>To prevent a malicious user from messing with the parts of the document outside the main content area, all CSS rules automatically get prefixed by the <code>mw-parser-output</code> CSS class. If you use a TemplateStyles-based template outside of the content area (e.g. in the <a href="/wiki/Special:MyLanguage/Manual:Interface/Sitenotice" title="Special:MyLanguage/Manual:Interface/Sitenotice">sitenotice</a><span style="display:none"><a href="/wiki/Manual:Interface/Sitenotice" title="Manual:Interface/Sitenotice"> </a></span>), you need to provide that class yourself, by wrapping the template in something like <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-parser-output"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span></code>. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="In_which_order_do_CSS_styles_override?" data-mw-thread-id="h-In_which_order_do_CSS_styles_override?"><span id="In_which_order_do_CSS_styles_override.3F"></span><span data-mw-comment-start="" id="h-In_which_order_do_CSS_styles_override?"></span>In which order do CSS styles override?<span data-mw-comment-end="h-In_which_order_do_CSS_styles_override?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=8" title="Edit section: In which order do CSS styles override?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Which CSS rule takes effect is controlled by <a href="https://developer.mozilla.org/docs/Web/CSS/Specificity" class="extiw" title="devmo:Web/CSS/Specificity">specificity</a> (roughly, the complexity of the selector - e.g. <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="nt">div</span><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="w"> </span><span class="p">}</span></code> is more specific than <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="w"> </span><span class="p">}</span></code>). In case of equal specificity, CSS styles that come later in the document override earlier styles. </p><p>MediaWiki:Commons.css, other site scripts, user scripts and gadgets are loaded in the <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r7217505" /><code class="mw-highlight nowrap"><span class="p">‎<</span><span class="nt">head</span><span class="p">></span></code> section of the page. TemplateStyles stylesheets are loaded in the <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r7217505" /><code class="mw-highlight nowrap"><span class="p">‎<</span><span class="nt">body</span><span class="p">></span></code>, so they override site/user script and gadget rules with equal specificity, and in the case of two TemplateStyles rules, the second overrides the first. (Note though that TemplateStyles rules are deduplicated: if the same stylesheet is referenced multiple times on the page, it is only inserted the first time. Note also that "later" has to do with document position, not load order. Gadgets add their CSS after the page has fully loaded, by manipulating the page with JavaScript; some add it on-demand when the user does some action such as clicking a button. Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.) </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_can_Lua_modules_interact_with_styles?" data-mw-thread-id="h-How_can_Lua_modules_interact_with_styles?"><span id="How_can_Lua_modules_interact_with_styles.3F"></span><span data-mw-comment-start="" id="h-How_can_Lua_modules_interact_with_styles?"></span>How can Lua modules interact with styles?<span data-mw-comment-end="h-How_can_Lua_modules_interact_with_styles?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=9" title="Edit section: How can Lua modules interact with styles?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>TemplateStyles can be called from a Lua module using <code><a href="/wiki/Special:MyLanguage/Extension:Scribunto/Lua_reference_manual#frame:extensionTag" title="Special:MyLanguage/Extension:Scribunto/Lua reference manual">frame:extensionTag</a></code>. </p><p>Example code is the following: </p> <div class="mw-highlight mw-highlight-lang-lua mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">local</span> <span class="n">p</span> <span class="o">=</span> <span class="p">{};</span> <span class="kr">function</span> <span class="nc">p</span><span class="p">.</span><span class="nf">templateStyle</span><span class="p">(</span> <span class="n">frame</span><span class="p">,</span> <span class="n">src</span> <span class="p">)</span> <span class="kr">return</span> <span class="n">frame</span><span class="p">:</span><span class="n">extensionTag</span><span class="p">(</span> <span class="s1">'templatestyles'</span><span class="p">,</span> <span class="s1">''</span><span class="p">,</span> <span class="p">{</span> <span class="n">src</span> <span class="o">=</span> <span class="n">src</span> <span class="p">}</span> <span class="p">);</span> <span class="kr">end</span> <span class="kr">return</span> <span class="n">p</span><span class="p">;</span> </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="What_anti-abuse_features_are_provided?" data-mw-thread-id="h-What_anti-abuse_features_are_provided?"><span id="What_anti-abuse_features_are_provided.3F"></span><span data-mw-comment-start="" id="h-What_anti-abuse_features_are_provided?"></span>What anti-abuse features are provided?<span data-mw-comment-end="h-What_anti-abuse_features_are_provided?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=10" title="Edit section: What anti-abuse features are provided?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The design choice to store CSS in separate pages was made in part to make integration with the standard anti-abuse toolset easy. TemplateStyles CSS pages have their own content model (<code>sanitized-css</code>) so changes to them can be tracked or controlled with <a href="/wiki/Special:MyLanguage/Extension:AbuseFilter" title="Special:MyLanguage/Extension:AbuseFilter">Extension:AbuseFilter</a><span style="display:none"><a href="/wiki/Extension:AbuseFilter" title="Extension:AbuseFilter"> </a></span>, using the <code>new_content_model</code> variable. </p><p>CSS inclusion is tracked the same way as template transclusion, so you can see where a stylesheet is used via the "What links here" option, see what stylesheets are used on a page under "Page information" (and possibly on the edit screen, depending on what editor you use), and see what recent changes might be affecting a page using "Related changes". </p><p>TemplateStyles also leaves identifying information in the HTML code; to find out where a specific rule comes from, look at the page source, and the enclosing <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r7217505" /><code class="mw-highlight nowrap"><span class="p">‎<</span><span class="nt">style</span><span class="p">></span></code> tag will have an attribute like <code>data-mw-deduplicate="TemplateStyles:r123456"</code>, where 123456 is the revision ID of the stylesheet (viewable with <a href="/wiki/Special:Diff" title="Special:Diff">Special:Diff</a>, for example). </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_were_the_decisions_around_TemplateStyles_made?" data-mw-thread-id="h-How_were_the_decisions_around_TemplateStyles_made?"><span id="How_were_the_decisions_around_TemplateStyles_made.3F"></span><span data-mw-comment-start="" id="h-How_were_the_decisions_around_TemplateStyles_made?"></span>How were the decisions around TemplateStyles made?<span data-mw-comment-end="h-How_were_the_decisions_around_TemplateStyles_made?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=11" title="Edit section: How were the decisions around TemplateStyles made?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The idea of including CSS with templates was proposed and accepted in a <a href="https://phabricator.wikimedia.org/T483" class="extiw" title="phab:T483">request for comments</a>. Technical details were pinned down in <a href="https://phabricator.wikimedia.org/T155813" class="extiw" title="phab:T155813">a second RfC</a> and workflow details in a <a href="/wiki/Special:MyLanguage/Extension:TemplateStyles/Q%26A" title="Special:MyLanguage/Extension:TemplateStyles/Q&A">user consultation</a>. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Who_is_working_on_TemplateStyles?" data-mw-thread-id="h-Who_is_working_on_TemplateStyles?"><span id="Who_is_working_on_TemplateStyles.3F"></span><span data-mw-comment-start="" id="h-Who_is_working_on_TemplateStyles?"></span>Who is working on TemplateStyles?<span data-mw-comment-end="h-Who_is_working_on_TemplateStyles?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=12" title="Edit section: Who is working on TemplateStyles?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>TemplateStyles was originally a project of the <a href="/wiki/Special:MyLanguage/Wikimedia_Reading_Infrastructure_team" title="Special:MyLanguage/Wikimedia Reading Infrastructure team">Wikimedia Reading Infrastructure team</a><span style="display:none"><a href="/wiki/Wikimedia_Reading_Infrastructure_team" class="mw-redirect" title="Wikimedia Reading Infrastructure team"> </a></span> (preceded by exploratory work <a href="/wiki/User:Coren" title="User:Coren">Coren</a> did as a volunteer), consisting of <a href="/wiki/User:BJorsch_(WMF)" title="User:BJorsch (WMF)">Brad Jorsch</a> (developer), <a href="/wiki/User:BDavis_(WMF)" title="User:BDavis (WMF)">Bryan Davis</a> (manager) and <a href="/wiki/User:Tgr_(WMF)" title="User:Tgr (WMF)">Gergő Tisza</a> (developer) at the time. People and responsibilities have since moved around; see the <a href="/wiki/Developers/Maintainers" title="Developers/Maintainers">maintainers page</a> for current ownership. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Where_do_I_report_errors_/_ask_for_features?" data-mw-thread-id="h-Where_do_I_report_errors_/_ask_for_features?"><span id="Where_do_I_report_errors_.2F_ask_for_features.3F"></span><span data-mw-comment-start="" id="h-Where_do_I_report_errors_/_ask_for_features?"></span>Where do I report errors / ask for features?<span data-mw-comment-end="h-Where_do_I_report_errors_/_ask_for_features?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=13" title="Edit section: Where do I report errors / ask for features?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Please <a class="external text" href="https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?tags=templatestyles">file tasks</a> under the TemplateStyles component in <a href="/wiki/Special:MyLanguage/Phabricator" title="Special:MyLanguage/Phabricator">Phabricator</a>. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Where_can_I_see_it_in_action?" data-mw-thread-id="h-Where_can_I_see_it_in_action?"><span id="Where_can_I_see_it_in_action.3F"></span><span data-mw-comment-start="" id="h-Where_can_I_see_it_in_action?"></span>Where can I see it in action?<span data-mw-comment-end="h-Where_can_I_see_it_in_action?"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=14" title="Edit section: Where can I see it in action?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You can look at some <a href="/wiki/Help:TemplateStyles/examples" title="Help:TemplateStyles/examples">curated examples</a>. </p><p>The feature is enabled on all Wikimedia sites. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="See_also" data-mw-thread-id="h-See_also"><span data-mw-comment-start="" id="h-See_also"></span>See also<span data-mw-comment-end="h-See_also"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:TemplateStyles&action=edit&section=15" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/Special:MyLanguage/Extension:TemplateStyles" title="Special:MyLanguage/Extension:TemplateStyles">Extension:TemplateStyles</a><span style="display:none"><a href="/wiki/Extension:TemplateStyles" title="Extension:TemplateStyles"> </a></span> – especially the <a href="/wiki/Special:MyLanguage/Extension:TemplateStyles#caveats" title="Special:MyLanguage/Extension:TemplateStyles">#Caveats</a> section.</li> <li><a href="https://en.wikipedia.org/wiki/Wikipedia:TemplateStyles" class="extiw" title="w:Wikipedia:TemplateStyles">Wikipedia:TemplateStyles</a> – guideline page on English Wikipedia.</li></ul>    </div><noscript><img src="https://auth.wikimedia.org/loginwiki/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Help:TemplateStyles&oldid=7065384">https://www.mediawiki.org/w/index.php?title=Help:TemplateStyles&oldid=7065384</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:Help" title="Category:Help">Help</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 1 March 2025, at 01:59.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Help:TemplateStyles&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://www.wikimedia.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><picture><source media="(min-width: 500px)" srcset="/static/images/footer/wikimedia-button.svg" width="84" height="29"><img src="/static/images/footer/wikimedia.svg" width="25" height="25" alt="Wikimedia Foundation" lang="en" loading="lazy"></picture></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><picture><source media="(min-width: 500px)" srcset="/w/resources/assets/poweredby_mediawiki.svg" width="88" height="31"><img src="/w/resources/assets/mediawiki_compact.svg" alt="Powered by MediaWiki" lang="en" width="25" height="25" loading="lazy"></picture></a></li> </ul> </footer> </div> </div> </div> <div class="vector-header-container vector-sticky-header-container"> <div id="vector-sticky-header" class="vector-sticky-header"> <div class="vector-sticky-header-start"> <div class="vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right" aria-hidden="true"> <button class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-sticky-header-search-toggle" tabindex="-1" data-event-name="ui.vector-sticky-search-form.icon"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </button> </div> <div role="search" class="vector-search-box-vue vector-search-box-show-thumbnail vector-search-box"> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail"> <form action="/w/index.php" id="vector-sticky-search-form" class="cdx-search-input cdx-search-input--has-end-button"> <div class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search mediawiki.org"> <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <div class="vector-sticky-header-context-bar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-sticky-header-toc" class="vector-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc vector-button-flush-left" > <input type="checkbox" id="vector-sticky-header-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-sticky-header-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-sticky-header-toc-label" for="vector-sticky-header-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-sticky-header-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div class="vector-sticky-header-context-bar-primary" aria-hidden="true" ><span class="mw-page-title-namespace">Help</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">TemplateStyles</span></div> </div> </div> <div class="vector-sticky-header-end" aria-hidden="true"> <div class="vector-sticky-header-icons"> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-talk-sticky-header" tabindex="-1" data-event-name="talk-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbles mw-ui-icon-wikimedia-speechBubbles"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-subject-sticky-header" tabindex="-1" data-event-name="subject-sticky-header"><span class="vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-history-sticky-header" tabindex="-1" data-event-name="history-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-history mw-ui-icon-wikimedia-wikimedia-history"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only mw-watchlink" id="ca-watchstar-sticky-header" tabindex="-1" data-event-name="watch-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-star mw-ui-icon-wikimedia-wikimedia-star"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-edit-sticky-header" tabindex="-1" data-event-name="wikitext-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-wikiText mw-ui-icon-wikimedia-wikimedia-wikiText"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-ve-edit-sticky-header" tabindex="-1" data-event-name="ve-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-edit mw-ui-icon-wikimedia-wikimedia-edit"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-viewsource-sticky-header" tabindex="-1" data-event-name="ve-edit-protected-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-editLock mw-ui-icon-wikimedia-wikimedia-editLock"></span> <span></span> </a> </div> <div class="vector-sticky-header-buttons"> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive" id="ca-addsection-sticky-header" tabindex="-1" data-event-name="addsection-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbleAdd-progressive mw-ui-icon-wikimedia-speechBubbleAdd-progressive"></span> <span>Add topic</span> </a> </div> <div class="vector-sticky-header-icon-end"> <div class="vector-user-links"> </div> </div> </div> </div> </div> <div class="mw-portlet mw-portlet-dock-bottom emptyPortlet" id="p-dock-bottom"> <ul> </ul> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-5c6f46dcf-5fvjk","wgBackendResponseTime":126,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_does_it_work?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-What_problems_does_it_solve?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Is_it_safe?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-What_CSS_rules_are_recognized?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_can_I_target_mobile/desktop_resolutions?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_can_I_target_specific_skins?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_do_I_use_styles_in_MediaWiki_messages?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-In_which_order_do_CSS_styles_override?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_can_Lua_modules_interact_with_styles?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-What_anti-abuse_features_are_provided?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_were_the_decisions_around_TemplateStyles_made?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Who_is_working_on_TemplateStyles?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Where_do_I_report_errors_/_ask_for_features?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Where_can_I_see_it_in_action?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.019"},"limitreport":{"cputime":"0.244","walltime":"0.364","ppvisitednodes":{"value":1803,"limit":1000000},"postexpandincludesize":{"value":10357,"limit":2097152},"templateargumentsize":{"value":2783,"limit":2097152},"expansiondepth":{"value":13,"limit":100},"expensivefunctioncount":{"value":20,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":11720,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 128.434 1 -total"," 49.37% 63.408 11 Template:Ll"," 21.01% 26.990 1 Template:PD_Help_Page"," 17.31% 22.236 22 Template:Translatable"," 11.24% 14.430 11 Template:Pagelang"," 10.79% 13.852 3 Template:TNTN"," 7.70% 9.891 5 Template:Tag"," 6.49% 8.341 1 Template:Tmpl"," 5.44% 6.982 4 Template:Int"," 5.22% 6.702 1 Translations:Css-sanitizer/Page_display_title/en"]},"scribunto":{"limitreport-timeusage":{"value":"0.026","limit":"10.000"},"limitreport-memusage":{"value":1234854,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-585dc88b6-9x8px","timestamp":"20250327000655","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>