Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Banner/doc: Difference between revisions

Template page
update doc for template changes.
Fix typo. Add basic info about design-tokens.
 
(One intermediate revision by the same user not shown)
Line 10: Line 10:
:: {{T|Deletion}}
:: {{T|Deletion}}
:: {{T|Deprecated}}
:: {{T|Deprecated}}
:: {{T|Eunispecific}}
:: {{T|Merge}}
:: {{T|Merge}}
:: {{T|Mission stub}}
:: {{T|Mission stub}}
Line 20: Line 21:


;Syntax
;Syntax
: {{T|Banner|2=color= color|3=border= color|4=text= color|5=icon= link|6=link-both= yes|7=align= align|8=content}}
: {{T|Banner|2= color= color|3= border= color|4= text= color|5= icon= link|6= icon-both= yes|7= align= align|8= content}}
: With the exception of <kbd>content</kbd>, all parameters are optional
: With the exception of <kbd>content</kbd>, all parameters are optional
:: '''color''' - Color of the banner background. If omitted the background color is transparent. Colors can be given either by color name<ref>https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]</ref> (e.g. {{Co|red|red}} or {{Co|green|green}}) or values<ref>https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]</ref> (like {{Co|#0000FF|#0000FF}}).
:: '''color''' - Color of the banner background. If omitted the background color is transparent.
:: Colors can be given either by design-token<ref>Design tokens are the building blocks of UI elements. For colors they are used as CSS custom properties (variables) e.g. var(--background-color-warning-subtle). For wikimedia see: [https://doc.wikimedia.org/codex/latest/design-tokens/overview.html Design tokens]. Warning: Individual wikis can change these base color i.e. in [[MediaWiki:Citizen.css|Citizen.css]]</ref>,  color name<ref>https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]</ref> (e.g. {{Co|red|red}} or {{Co|green|green}}) or values<ref>https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]</ref> (like {{Co|#0000FF|#0000FF}}).
:: '''border''' - Color of the border of the banner. If omitted and "color" is given then the border is the same color as the background. If color is also omitted then the border color is {{Co|red|red}}.
:: '''border''' - Color of the border of the banner. If omitted and "color" is given then the border is the same color as the background. If color is also omitted then the border color is {{Co|red|red}}.
:: '''text''' - Color of the text in the banner. If omitted the text color is inherited from the parent container.the icon is placed on the left side of the banner.
:: '''text''' - Color of the text in the banner. If omitted the text color is inherited from the parent container.the icon is placed on the left side of the banner.