Difference between revisions of "Template:Ribbon"
From Geohashing
imported>Relet (replacing var "smalltemplates" with the more speaking name "ribbontheme".) |
(Adding class parameter) |
||
| (18 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
<includeonly>{{#switch:{{#var:ribbontheme|}} | <includeonly>{{#switch:{{#var:ribbontheme|}} | ||
| − | |micro=<table style="border-width: 1px; border-spacing: 0px; border-style: solid solid solid solid; background-color:{{{bgcolor|white}}}; color: {{{fontcolor|black}}}; border-color: lightgray;"><tr><td style="border-width: 5px; border-spacing: 2px; border-style: | + | |micro=<table class="{{{class|}}}" style="border-collapse: separate; border-width: 1px; border-spacing: 0px; border-style: solid solid solid solid; background-color:{{{bgcolor|white}}}; color: {{{fontcolor|black}}}; border-color: lightgray; {{#if:{{#var:ribbonwidth}}|width:{{#var:ribbonwidth}};|}}"><tr><td style="border-width: 0 0 0 5px; border-spacing: 2px; border-style: solid; border-color: {{{color}}};">{{{iconcode|[[Image:{{{icon}}}|22px]]}}}</td><td>'''{{{achievement}}}'''{{#if:{{{expedition|}}}|<nowiki>:</nowiki> {{{expedition}}}|}}</td></tr></table> |
| − | |mini=<table style="border-width: 1px; border-spacing: 0px; border-style: solid solid solid solid; background-color:{{{bgcolor|white}}}; color: {{{fontcolor|black}}}; border-color: lightgray;"><tr><td style="border-width: 5px; border-spacing: 2px; border-style: | + | |mini=<table class="{{{class|}}}" style="border-collapse: separate; border-width: 1px; border-spacing: 0px; border-style: solid solid solid solid; background-color:{{{bgcolor|white}}}; color: {{{fontcolor|black}}}; border-color: lightgray; {{#if:{{#var:ribbonwidth}}|width:{{#var:ribbonwidth}};|}}"><tr><td style="border-width: 0 0 0 5px; border-spacing: 2px; border-style: solid; border-color: {{{color}}};">{{{iconcode|[[Image:{{{icon}}}|22px]]}}}</td><td>'''{{{achievement}}}''' by {{{action}}}.</td></tr></table> |
| − | |#default=<table style="border-width: 1px; border-spacing: 0px; border-style: solid solid solid solid; border-color: lightgray; background-color:{{{bgcolor|white}}}; color: {{{fontcolor|black}}};"> | + | |#default=<table class="{{{class|}}}" style="border-collapse: separate; border-width: 1px; border-spacing: 0px; border-style: solid solid solid solid; border-color: lightgray; background-color:{{{bgcolor|white}}}; color: {{{fontcolor|black}}}; {{#if:{{#var:ribbonwidth}}|width:{{#var:ribbonwidth}};|}}"> |
<tr> | <tr> | ||
| − | <td style="border-width: 5px; border-spacing: 2px; border-style: | + | <td style="border-width: 0 0 0 5px; border-spacing: 2px; border-style: solid; border-color: {{{color}}};" width="44"><div>{{{iconcode|[[Image:{{{icon}}}|44px]]}}}</div></td> |
<td style="padding: 0px 12px 0px 10px;"> '''{{#if:{{{user|}}}|{{{user}}}|This user}} {{{customtitle|earned the}}} {{{achievement}}}''' | <td style="padding: 0px 12px 0px 10px;"> '''{{#if:{{{user|}}}|{{{user}}}|This user}} {{{customtitle|earned the}}} {{{achievement}}}''' | ||
:by {{{action}}}.</td> | :by {{{action}}}.</td> | ||
| − | {{#if:{{{image|}}}|<td><div style="width: 52px;">[[Image:{{{image}}}|44px]]</div></td>|}} | + | {{#if:{{{image|}}}|<td width="52"><div style="width: 52px;">[[Image:{{{image}}}|44px]]</div></td>|}} |
</tr> | </tr> | ||
</table> | </table> | ||
| Line 14: | Line 14: | ||
*icon = ''The icon image to display in the ribbon.'' | *icon = ''The icon image to display in the ribbon.'' | ||
| − | *color = ''The border | + | *color = ''The border color of the ribbon.'' |
| + | *class = ''The CSS class of the ribbon (optional)'' | ||
*achievement = ''Achievement or consolation prize name.'' | *achievement = ''Achievement or consolation prize name.'' | ||
*action = ''A free form description of the achieved feature. "reaching the x,y hash..."'' | *action = ''A free form description of the achieved feature. "reaching the x,y hash..."'' | ||
| − | Optional | + | Optional parameters: |
*user = ''The user name to be displayed in the ribbon.'' (Defaults to "This user". use <nowiki>{{{name|}}}</nowiki> as value to pass through the possibly blank ''name'' parameter as user name) | *user = ''The user name to be displayed in the ribbon.'' (Defaults to "This user". use <nowiki>{{{name|}}}</nowiki> as value to pass through the possibly blank ''name'' parameter as user name) | ||
*category = ''The category name where users having gained this achievement will be put.'' | *category = ''The category name where users having gained this achievement will be put.'' | ||
*image = ''The usual photographic proof'' (Note: you may want to use the value <nowiki>{{{image|}}}</nowiki> to pass through the possibly blank image parameter from your own ribbon template.) | *image = ''The usual photographic proof'' (Note: you may want to use the value <nowiki>{{{image|}}}</nowiki> to pass through the possibly blank image parameter from your own ribbon template.) | ||
| − | *expedition = ''the expedition link, as used by the mini templates'' (e.g. " | + | *expedition = ''the expedition link, as used by the mini templates'' (e.g. "2005-05-26 37 -122") |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Rarely used Parameters: | Rarely used Parameters: | ||
*customtitle = ''replaces the words 'earned the' in the title of the ribbon.'' | *customtitle = ''replaces the words 'earned the' in the title of the ribbon.'' | ||
| Line 32: | Line 28: | ||
*fontcolor = ''replaces the font color of the ribbon.'' | *fontcolor = ''replaces the font color of the ribbon.'' | ||
*iconcode = ''replaces the whole display code for the icon image.'' | *iconcode = ''replaces the whole display code for the icon image.'' | ||
| + | |||
| + | == Themes == | ||
| + | *Use the code | ||
| + | <pre>{{#vardefine:ribbontheme|themename}}</pre> | ||
| + | on any page to make all subsequent ribbons appear in the selected theme. | ||
'''Example''' | '''Example''' | ||
| Line 38: | Line 39: | ||
|color = darkgreen | |color = darkgreen | ||
|user = Mr. Stickman | |user = Mr. Stickman | ||
| − | |achievement = | + | |achievement = Pilgrimage achievement |
| − | |action = | + | |action = reaching the coordinates of the original comic |
| − | |category = | + | |category = Pilgrimage achievement |
| + | |expedition = [[2005-05-26 37 -122]] | ||
}}</nowiki></pre> | }}</nowiki></pre> | ||
| − | will display as: | + | will display, depending on the theme you have selected, as: |
| + | === #default === | ||
{{Ribbon | {{Ribbon | ||
|icon = Landgeohash.png | |icon = Landgeohash.png | ||
|color = darkgreen | |color = darkgreen | ||
|user = Mr. Stickman | |user = Mr. Stickman | ||
| − | |achievement = | + | |achievement = Pilgrimage achievement |
| − | |action = | + | |action = reaching the coordinates of the original comic |
|category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | |category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | ||
}} | }} | ||
| − | + | === mini === | |
{{#vardefine:ribbontheme|mini}} | {{#vardefine:ribbontheme|mini}} | ||
{{Ribbon | {{Ribbon | ||
| Line 57: | Line 60: | ||
|color = darkgreen | |color = darkgreen | ||
|user = Mr. Stickman | |user = Mr. Stickman | ||
| − | |achievement = | + | |achievement = Pilgrimage achievement |
| − | |action = | + | |action = reaching the coordinates of the original comic |
|category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | |category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | ||
}} | }} | ||
| − | + | === micro === | |
{{#vardefine:ribbontheme|micro}} | {{#vardefine:ribbontheme|micro}} | ||
{{Ribbon | {{Ribbon | ||
| Line 67: | Line 70: | ||
|color = darkgreen | |color = darkgreen | ||
|user = Mr. Stickman | |user = Mr. Stickman | ||
| − | |achievement = [[ | + | |achievement = Pilgrimage achievement |
| − | | | + | |action = reaching the coordinates of the original comic |
| − | |expedition = [[ | + | |expedition = [[2005-05-26 37 -122]] |
| + | |category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | ||
| + | }} | ||
| + | |||
| + | == Width == | ||
| + | *By default, the ribbon box will be sized to fit its contents. Use the code | ||
| + | <pre>{{#vardefine:ribbonwidth|width}}</pre> | ||
| + | on any page to make all subsequent ribbons appear with the selected width, to make them line up prettily. Use either a pixel width e.g. "50px" or a percentage such as "100%", as per the CSS width attribute. | ||
| + | |||
| + | '''Example''' | ||
| + | The above ribbon, in the default theme, will display differently depending on the ribbonwidth variable: | ||
| + | |||
| + | {{#vardefine:ribbontheme}} <!-- reset theme --> | ||
| + | === default width === | ||
| + | {{Ribbon | ||
| + | |icon = Landgeohash.png | ||
| + | |color = darkgreen | ||
| + | |user = Mr. Stickman | ||
| + | |achievement = Pilgrimage achievement | ||
| + | |action = reaching the coordinates of the original comic | ||
| + | |category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | ||
| + | }} | ||
| + | === 600px === | ||
| + | {{#vardefine:ribbonwidth|600px}} | ||
| + | {{Ribbon | ||
| + | |icon = Landgeohash.png | ||
| + | |color = darkgreen | ||
| + | |user = Mr. Stickman | ||
| + | |achievement = Pilgrimage achievement | ||
| + | |action = reaching the coordinates of the original comic | ||
| + | |category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | ||
| + | }} | ||
| + | === 100% === | ||
| + | {{#vardefine:ribbonwidth|100%}} | ||
| + | {{Ribbon | ||
| + | |icon = Landgeohash.png | ||
| + | |color = darkgreen | ||
| + | |user = Mr. Stickman | ||
| + | |achievement = Pilgrimage achievement | ||
| + | |action = reaching the coordinates of the original comic | ||
| + | |expedition = [[2005-05-26 37 -122]] | ||
|category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | |category = Templates <!-- you may want to use a more sensible category here. But I'm not going to invent one that will mess up the existing list --> | ||
}} | }} | ||
| + | </noinclude> | ||
Latest revision as of 17:56, 18 November 2024
This template displays a generic ribbon, which can be customized using the following parameters. It can be used to simplify existing ribbon pages, and to create new ribbons more easily. It also helps us to maintain a common layout for all ribbons.
- icon = The icon image to display in the ribbon.
- color = The border color of the ribbon.
- class = The CSS class of the ribbon (optional)
- achievement = Achievement or consolation prize name.
- action = A free form description of the achieved feature. "reaching the x,y hash..."
Optional parameters:
- user = The user name to be displayed in the ribbon. (Defaults to "This user". use {{{name|}}} as value to pass through the possibly blank name parameter as user name)
- category = The category name where users having gained this achievement will be put.
- image = The usual photographic proof (Note: you may want to use the value {{{image|}}} to pass through the possibly blank image parameter from your own ribbon template.)
- expedition = the expedition link, as used by the mini templates (e.g. "2005-05-26 37 -122")
Rarely used Parameters:
- customtitle = replaces the words 'earned the' in the title of the ribbon.
- bgcolor = replaces the background color of the ribbon.
- fontcolor = replaces the font color of the ribbon.
- iconcode = replaces the whole display code for the icon image.
Themes
- Use the code
{{#vardefine:ribbontheme|themename}}
on any page to make all subsequent ribbons appear in the selected theme.
Example
{{Ribbon
|icon = Landgeohash.png
|color = darkgreen
|user = Mr. Stickman
|achievement = Pilgrimage achievement
|action = reaching the coordinates of the original comic
|category = Pilgrimage achievement
|expedition = [[2005-05-26 37 -122]]
}}
will display, depending on the theme you have selected, as:
#default
 |
Mr. Stickman earned the Pilgrimage achievement
|
mini
| Pilgrimage achievement by reaching the coordinates of the original comic. |
micro
| Pilgrimage achievement: 2005-05-26 37 -122 |
Width
- By default, the ribbon box will be sized to fit its contents. Use the code
{{#vardefine:ribbonwidth|width}}
on any page to make all subsequent ribbons appear with the selected width, to make them line up prettily. Use either a pixel width e.g. "50px" or a percentage such as "100%", as per the CSS width attribute.
Example The above ribbon, in the default theme, will display differently depending on the ribbonwidth variable:
default width
|
Mr. Stickman earned the Pilgrimage achievement
|
600px
|
Mr. Stickman earned the Pilgrimage achievement
|
100%
|
Mr. Stickman earned the Pilgrimage achievement
|
