Difference between revisions of "Template:Ribbon"

From Geohashing
imported>Relet
m (marawhat?)
imported>Davidc
(adding ribbonwidth variable)
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: hidden hidden hidden solid; border-color: {{{color}}}; border-collapse: separate;">{{{iconcode|[[Image:{{{icon}}}|22px]]}}}</td><td>'''{{{achievement}}}'''{{#if:{{{expedition|}}}|<nowiki>:</nowiki> {{{expedition}}}|}}</td></tr></table>
+
|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; {{#if:{{#var:ribbonwidth}}|width:{{#var:ribbonwidth}};|}}"><tr><td style="border-width: 5px; border-spacing: 2px; border-style: hidden hidden hidden solid; border-color: {{{color}}}; border-collapse: separate;">{{{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: hidden hidden hidden solid; border-color: {{{color}}}; border-collapse: separate;">{{{iconcode|[[Image:{{{icon}}}|22px]]}}}</td><td>'''{{{achievement}}}''' by {{{action}}}.</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; {{#if:{{#var:ribbonwidth}}|width:{{#var:ribbonwidth}};|}}"><tr><td style="border-width: 5px; border-spacing: 2px; border-style: hidden hidden hidden solid; border-color: {{{color}}}; border-collapse: separate;">{{{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 style="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: hidden hidden hidden solid; border-color: {{{color}}}; border-collapse: separate;"><div>{{{iconcode|[[Image:{{{icon}}}|44px]]}}}</div></td>
 
<td style="border-width: 5px; border-spacing: 2px; border-style: hidden hidden hidden solid; border-color: {{{color}}}; border-collapse: separate;"><div>{{{iconcode|[[Image:{{{icon}}}|44px]]}}}</div></td>
Line 74: Line 74:
 
|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 -->
 
}}
 
}}
 +
 +
== Width ==
 +
*Use the code
 +
<pre>{{#vardefine:ribbonwidth|width}}</pre>
 +
on any page to make all subsequent ribbons appear with the selected width, for making them line up prettily. Use either a pixel width e.g. "50px" or a percentage such as "100%", as per CSS.
 +
 +
'''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 = [[Lost in Thought Achievement]]
 +
|action = hurting himself while concentrating on the display of his GPS
 +
|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 -->
 +
}}
 +
=== 500px ===
 +
{{#vardefine:ribbonwidth|500px}}
 +
{{Ribbon
 +
|icon = Landgeohash.png
 +
|color = darkgreen
 +
|user = Mr. Stickman
 +
|achievement = [[Lost in Thought Achievement]]
 +
|action = hurting himself while concentrating on the display of his GPS
 +
|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 = [[Lost in Thought Achievement]]
 +
|action = hurting himself while concentrating on the display of his GPS
 +
|expedition = [[2008-05-22 33 -44]]
 +
|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>

Revision as of 11:15, 15 March 2010

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 colour of the ribbon.
  • 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. "2008-05-22 33 -44")

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 = [[Lost in Thought Achievement]]
|action = hurting himself while concentrating on the display of his GPS
|category = Lost in Thought Achievement
|expedition = [[2008-05-22 33 -44]]
}}

will display, depending on the theme you have selected, as:

#default

Landgeohash.png
Mr. Stickman earned the Lost in Thought Achievement
by hurting himself while concentrating on the display of his GPS.

mini

Landgeohash.pngLost in Thought Achievement by hurting himself while concentrating on the display of his GPS.

micro

Landgeohash.pngLost in Thought Achievement: 2008-05-22 33 -44

Width

  • Use the code
{{#vardefine:ribbonwidth|width}}

on any page to make all subsequent ribbons appear with the selected width, for making them line up prettily. Use either a pixel width e.g. "50px" or a percentage such as "100%", as per CSS.

Example The above ribbon, in the default theme, will display differently depending on the ribbonwidth variable:


default width

Landgeohash.png
Mr. Stickman earned the Lost in Thought Achievement
by hurting himself while concentrating on the display of his GPS.

500px

Landgeohash.png
Mr. Stickman earned the Lost in Thought Achievement
by hurting himself while concentrating on the display of his GPS.

100%

Landgeohash.png
Mr. Stickman earned the Lost in Thought Achievement
by hurting himself while concentrating on the display of his GPS.