.svg)
10,594
edits
Bharatpedia:TemplateStyles: Difference between revisions
no edit summary
(Created page with "'''TemplateStyles''' allow custom CSS pages to be used to style content without an interface administrator having to edit sitewide CSS. TemplateStyles make it more convenient for editors to style templates; for example, those templates for which the sitewide CSS for the mobile skin or another skin (e.g. Timeless) currently negatively affects the display of the template. == Guidelines == * The style must apply only to the associated template's output. It...") Tags: Mobile edit Mobile web edit Advanced mobile edit |
No edit summary |
||
| Line 1: | Line 1: | ||
'''TemplateStyles''' allow custom [[CSS]] pages to be used to style content without an [[ | {{short description|Wikimedia project guideline for TemplateStyles}} | ||
{{Subcat guideline|editing guideline||BP:TSTYLE|BP:TSTYLES}} | |||
'''TemplateStyles''' allow custom [[CSS]] pages to be used to style content without an [[BP:IADMIN|interface administrator]] having to edit sitewide CSS. TemplateStyles make it more convenient for editors to style templates; for example, those templates for which the sitewide CSS for the mobile skin or another skin (e.g. Timeless) currently negatively affects the display of the template. | |||
TemplateStyles work on all types of pages, not just templates, despite the name. | |||
== Guidelines == | == Guidelines == | ||
* The style must apply only to the associated template's output. It may also apply to highly-relevant nearby wikitext where the template is used. (For example, there are many table templates which should have TemplateStyles which are provided entirely in templates, or which may provide a legend to a wikitext table.) It would otherwise be confusing if adding a template to one part of a page were to completely or partially change the display or styling of an unrelated part of the page. | * The style must apply only to the associated template's output. It may also apply to highly-relevant nearby wikitext where the template is used. (For example, there are many table templates which should have TemplateStyles which are provided entirely in templates, or which may provide a legend to a wikitext table.) It would otherwise be confusing if adding a template to one part of a page were to completely or partially change the display or styling of an unrelated part of the page. | ||
| Line 10: | Line 15: | ||
** Inline styles may be used as the "if substed" case in a substituted template. Example: {{tl|smallcaps}}. | ** Inline styles may be used as the "if substed" case in a substituted template. Example: {{tl|smallcaps}}. | ||
* Images that do not require attribution (i.e. those in the public domain) are the only images that may be used as background images. For normal file usage, attribution is provided on the file description page, accessed by clicking the image. This is not possible if the image is being used as the background. | * Images that do not require attribution (i.e. those in the public domain) are the only images that may be used as background images. For normal file usage, attribution is provided on the file description page, accessed by clicking the image. This is not possible if the image is being used as the background. | ||
* The protection level of style pages should match that of their associated template. If a template is [[ | * The protection level of style pages should match that of their associated template. If a template is [[Bharatpedia:High-risk templates|high-risk]], then its styles are also high-risk, and should have the same protection. If a template is not high-risk, then vandalism to cause chaos could be achieved just by editing the template itself. A higher protection level for the style page would encourage editors to add inline styles to the template, since the template would be editable but the style page would not. Any templates using CSS pages with the wrong protection level will be categorized in {{Cl|Templates using TemplateStyles with a different protection level}}. | ||
* Remember to add <code><nowiki>/* {{pp-template}} */</nowiki></code> to any protected CSS pages to ensure that they display the appropriate lock icon. Protected templates using CSS pages that lack the lock icon will be categorized in {{Cl|Templates using TemplateStyles without padlocks}}. | * Remember to add <code><nowiki>/* {{pp-template}} */</nowiki></code> to any protected CSS pages to ensure that they display the appropriate lock icon. Protected templates using CSS pages that lack the lock icon will be categorized in {{Cl|Templates using TemplateStyles without padlocks}}. | ||
Note that the [[ | Note that the [[Bharatpedia:Manual of Style|Manual of Style]], including the [[Bharatpedia:Manual of Style/Accessibility|Accessibility guidelines]], still applies. | ||
== Workflow for conversion == | == Workflow for conversion == | ||
# In {{mxt|Template:{{var|myTemplate}}}}, identify all of the inline styles that can be moved to a separate stylesheet. | # In {{mxt|Template:{{var|myTemplate}}}}, identify all of the inline styles that can be moved to a separate stylesheet. | ||
| Line 23: | Line 29: | ||
# Request or amend the protection level of {{mxt|Template:{{var|myTemplate}}/styles.css}} to match that of {{mxt|Template:{{var|myTemplate}}}} as necessary. | # Request or amend the protection level of {{mxt|Template:{{var|myTemplate}}/styles.css}} to match that of {{mxt|Template:{{var|myTemplate}}}} as necessary. | ||
# Add {{tlx|Uses TemplateStyles}} to the template's documentation to show which TemplateStyles stylesheets it uses. | # Add {{tlx|Uses TemplateStyles}} to the template's documentation to show which TemplateStyles stylesheets it uses. | ||
== Tips == | == Tips == | ||
* Uses of TemplateStyles stylesheets are recorded just like template transclusion and Scribunto module invocation. [[Special:WhatLinksHere]] and the "Templates used in this preview" section beneath the edit form will work for them in the usual manner. | * Uses of TemplateStyles stylesheets are recorded just like template transclusion and Scribunto module invocation. [[Special:WhatLinksHere]] and the "Templates used in this preview" section beneath the edit form will work for them in the usual manner. | ||
* To search for TemplateStyles stylesheets, you can [[Special:Search/all: contentmodel:sanitized-css|search for {{tt|contentmodel:sanitized-css}}]]. See also [[mw:Help:CirrusSearch#Contentmodel]]. | * To search for TemplateStyles stylesheets, you can [[Special:Search/all: contentmodel:sanitized-css|search for {{tt|contentmodel:sanitized-css}}]]. See also [[mw:Help:CirrusSearch#Contentmodel]]. | ||
* When {{tlx|Uses TemplateStyles}} is placed on a template's documentation, it adds the template to [[:Category:Templates using TemplateStyles]]. If the TemplateStyles stylesheet has a | * When {{tlx|Uses TemplateStyles}} is placed on a template's documentation, it adds the template to [[:Category:Templates using TemplateStyles]]. If the TemplateStyles stylesheet has a lower protection level, the template will be tracked in [[:Category:Templates using TemplateStyles with a different protection level]] ({{PAGESINCAT:Templates using TemplateStyles with a different protection level}} page{{#ifeq:{{PAGESINCAT:Templates using TemplateStyles with a different protection level}}|1||s}}). | ||
* TemplateStyles experiments can be created at [[Template:TemplateStyles sandbox]], e.g. for use in [[Module:Sandbox]] module experiments. | * TemplateStyles experiments can be created at [[Template:TemplateStyles sandbox]], e.g. for use in [[Module:Sandbox]] module experiments. | ||
== Overriding TemplateStyles == | * TemplateStyles pages can be created outside of the template or module namespaces by either first creating them in template namespace and moving them (perhaps at [[Template:TemplateStyles sandbox]]), or by using [[Special:ChangeContentModel]] as an admin and template editor. Regardless of what method is used, creating a .css page in userspace can only be done by the user in question or an interface admin, but once it is created anyone can edit it. | ||
* Moving a sanitized CSS page will not create a redirect. | |||
== Overriding TemplateStyles <span class="anchor" id="Override"></span> == | |||
Because of the way TemplateStyles is implemented, overriding TemplateStyles in your personal CSS requires a little more effort than normal. The rules on a specific TemplateStyles sheet are not the full CSS rules, nor can you match the selectors to override them. | Because of the way TemplateStyles is implemented, overriding TemplateStyles in your personal CSS requires a little more effort than normal. The rules on a specific TemplateStyles sheet are not the full CSS rules, nor can you match the selectors to override them. | ||
# Each selector is 'hoisted' to <code>.mw-parser-output</code>, so to override a rule in a TemplateStyles sheet that looks like <code>.documentation {}</code>, a naive override in your personal CSS file would need to look like <code>.mw-parser-output .documentation {}</code>. | # Each selector is 'hoisted' to <code>.mw-parser-output</code>, so to override a rule in a TemplateStyles sheet that looks like <code>.documentation {}</code>, a naive override in your personal CSS file would need to look like <code>.mw-parser-output .documentation {}</code>. | ||
# However, in the HTML each TemplateStyles style is {{em|always}} placed after your personal CSS file loads. Accordingly, the new rule would need to be more specific. That can come in a couple ways. The easiest is to select the HTML element also as in: <code>.mw-parser-output div.documentation {}</code>. Another way would be to double one of the class selectors, as in <code>.mw-parser-output.mw-parser-output .documentation {}</code> or <code>.mw-parser-output .documentation.documentation {}</code>. This latter way is a little more future-proof but looks a little weirder. | # However, in the HTML each TemplateStyles style is {{em|always}} placed after your personal CSS file loads. Accordingly, the new rule would need to be more [[CSS#Specificity|specific]]. That can come in a couple ways. The easiest is to select the HTML element also as in: <code>.mw-parser-output div.documentation {}</code>. Another way would be to double one of the class selectors, as in <code>.mw-parser-output.mw-parser-output .documentation {}</code> or <code>.mw-parser-output .documentation.documentation {}</code>. This latter way is a little more future-proof but looks a little weirder. | ||
# Lastly, <code>!important</code> can always override styles in your personal CSS. The usual caveats regarding <code>!important</code> apply. Prefer one of the two options in bullet two if possible. (You must do this to override inline styles, regardless of any of the above; some templates cannot move everything to TemplateStyles per the flexibility given to template users. Implementers of templates should consider whether parameters like <code>style</code> and <code>width</code> are actually necessary. See also [[:phab:T200632]].) | # Lastly, <code>!important</code> can always override styles in your personal CSS. The usual caveats regarding <code>!important</code> apply. Prefer one of the two options in bullet two if possible. (You must do this to override inline styles, regardless of any of the above; some templates cannot move everything to TemplateStyles per the flexibility given to template users. Implementers of templates should consider whether parameters like <code>style</code> and <code>width</code> are actually necessary. See also [[:phab:T200632]].) | ||
== Examples == | == Examples == | ||
* [[:mw:Help:TemplateStyles/examples]] | * [[:mw:Help:TemplateStyles/examples]] | ||
| Line 40: | Line 50: | ||
** [[:mw:Template:ResponsiveAmboxExample]] ([[:mw:Template:ResponsiveAmbox/styles.css|CSS]]) | ** [[:mw:Template:ResponsiveAmboxExample]] ([[:mw:Template:ResponsiveAmbox/styles.css|CSS]]) | ||
* [[Template:Thermometer]] and [[Template:Thermometer/styles.css]] give a simple demonstration of how TemplateStyles may be mixed with inline styles (where a parameter is passed to change one or more styles) | * [[Template:Thermometer]] and [[Template:Thermometer/styles.css]] give a simple demonstration of how TemplateStyles may be mixed with inline styles (where a parameter is passed to change one or more styles) | ||
== See also == | == See also == | ||
* [[Bharatpedia:Lua]] | |||
* [[MediaWiki talk:Common.css/to do]], where conversion from Common.css, Mobile.css, and skin.css to TemplateStyles is being tracked | |||
== External links == | == External links == | ||
* [[mw:Extension:TemplateStyles]] | * [[mw:Extension:TemplateStyles]] | ||