More actions
m Update dependencies. |
Fix typo. Add basic info about design-tokens. |
||
| Line 21: | Line 21: | ||
;Syntax | ;Syntax | ||
: {{T|Banner|2=color= color|3=border= color|4=text= color|5=icon= link|6= | : {{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. | ||
Latest revision as of 07:22, 28 June 2025
- Description
- This template creates a colored banner with, by default, centered text.
- Known issues: (2025-06-08) Using this template inside a list, created with wiki mark-up will break the code.
- Dependencies
- Uses:
- {{Co}}
- Used by:
- {{Cleanup}}
- {{Deletion}}
- {{Deprecated}}
- {{Eunispecific}}
- {{Merge}}
- {{Mission stub}}
- {{Move}}
- {{NPOV}}
- {{Past content}}
- {{Stub}}
- {{Update}}
- {{Work in progress}}
- Syntax
- {{Banner|<color= color>|<border= color>|<text= color>|<icon= link>|<icon-both= yes>|<align= align>|<content>}}
- With the exception of content, all parameters are optional
- color - Color of the banner background. If omitted the background color is transparent.
- Colors can be given either by design-token[1], color name[2] (e.g. red or green) or values[3] (like #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 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.
- icon - Link or Semantic MediaWiki code for the icon.
- icon-both - To repeat the icon on the right side of the banner.
- align - To align the text content of the banner (CSS values).
- content - The content of the banner
- Sample output
{{Banner|This is a banner!}} gives...
This is a banner!
{{Banner | color= LightSalmon | border= blue | text= #000000 | This is a light salmon banner with a blue border and black text ! }} gives...
This is a light salmon banner with a blue border and black text !
{{Banner | icon= [[File:Icon timer non-capsuleer.png|link=]] | This is a banner with an icon link. }} gives...
This is a banner with an icon link.
{{Banner | icon= {{#show: UniWiki:EVE University Graphics|?Has EVE University emblem#64px}} | align= left | This banner uses Semantic MediaWiki code for the icon and has left aligned text. }} gives...
This banner uses Semantic MediaWiki code code for the icon and has left aligned text.
- References
- ^ 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: Design tokens. Warning: Individual wikis can change these base color i.e. in Citizen.css
- ^ https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]
- ^ https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]