Usage

edit

Copy and paste the template below:

{{Linear-gradient text | <!-- Font color 1 --> | <!-- Font color 2 --> | <!-- Font color 3 --> | <!-- Font color 4 --> | <!-- Font color 5 --> | <!-- Font color 6 --> | <!-- Font color 7 --> | <!-- Font color 8 --> | <!-- Font color 9 --> | <!-- Font color 10 --> | <!-- Font color 11 --> | <!-- Font color 12 --> | <!-- Font color 13 --> | <!-- Font color 14 --> | <!-- Font color 15 --> | <!-- Font color 16 --> | <!-- Font color 17 --> | <!-- Font color 18 --> | <!-- Font color 19 --> | <!-- Font color 20 --> | text = | direction = | alt text color = }}
Note: This template can handle a maximum of 20 colors, more than that will cause the template to break.

For better understanding see Examples & TemplateData below.

Examples

edit

Basics

edit
  • Atleast two font colors are required for this template to run properly, otherwise it will show up in the Alternate text color (black by default). For example:
{{Linear-gradient text | red | text = Hello, World! | direction = right | alt text color = green }}
gives: Hello, World!
BUT
{{Linear-gradient text | red | blue | text = Hello, World! | direction = right | alt text color = green }}
gives: Hello, World!
  • {{Linear-gradient text | red | green | #0000ff | text = Hello, World! | direction = top | alt text color = #F0E68C }}
gives: Hello, World!
Notice how the colors appear to be moving towards top direction, in the same order as they appear on the template.
  • {{Linear-gradient text | red | green | #0000ff | text = Hello, World! | direction = right | alt text color = purple }}
gives: Hello, World!
Notice how the colors appear to be moving towards right direction, in the same order as they appear on the template.
  • Alternatively text parameter can substituted by 21, direction parameter by 22 and alt text color parameter by 23. For example:
{{Linear-gradient text | red | green | #0000ff | 21 = Hello, World! | 22 = right | 23 = purple }}
gives: Hello, World!
Notice that this alternative syntax also provides the same result as the previous example.
  • {{big|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | #ffaa00| #008888 | text = Welcome to Wikipedia! | direction = top left | alt text color = purple }}}}
gives: Welcome to Wikipedia!
Notice how the colors appear to be moving towards top left direction, in the same order as they appear on the template. This uses {{big}} for formatting. You can learn more about text formatting with this template at Text formatting section below.
  • The same color can also be repeated
{{Linear-gradient text | red | green | #0000ff | red | green | red | #0000ff | green | red | green | text = Abraham Lincoln was an American lawyer and statesman who served as the 16th president of the United States. | direction = right | alt text color = purple }}
gives: Abraham Lincoln was an American lawyer and statesman who served as the 16th president of the United States.
Notice how the colors appear to be moving towards right direction, first red, then green, then blue, then red again, green again, red again, blue again, green again, red again, and finally green again, in the same order as they appear on the template.
  • If the template does not contain the text parameter in it, it returns a default error message.
{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | direction = right | alt text color = purple }}
gives: Error message when text parameter is missing: No text provided
  • If the template does not contain the direction parameter in it, it defaults to right direction.
{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Welcome to Wikipedia! | alt text color = purple }}
gives: Welcome to Wikipedia!
  • If the template does not contain the alt text color parameter in it, it defaults to black color.
{{Linear-gradient text | red | text = Welcome to Wikipedia! }}
gives: Welcome to Wikipedia!
As mentioned above, atleast two font colors are required for this template to run properly, otherwise it will show up in the Alternate text color.

Text formatting

edit

Note: In most cases, this template should be nested inside any other template and/or tag to avoid breaking. If formatting is carried out within the text parameter, the text may not appear as intended.

  • [[Wikilinks]]: Coloring wikilinks using this template is strongly discouraged, as it may cause the link to appear the same as other body texts. However, it can still be used in Userpages and other fun places.
[[Special:Random|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Click here to read a random article | direction = right | alt text color = purple }}]]
gives: Click here to read a random article
  • Bold:
'''{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}'''
gives: Lorem ipsum dolor sit amet
  • Italic:
''{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}''
gives: Lorem ipsum dolor sit amet
  • Superscript:
<sup>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</sup>
gives: Lorem ipsum dolor sit amet
  • Subscript:
<sub>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</sub>
gives: Lorem ipsum dolor sit amet
  • Underline:
<u>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</u>
gives: Lorem ipsum dolor sit amet
  • Strikethrough:
<s>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</s>
gives: Lorem ipsum dolor sit amet
  • Other text formatting, such as larger/ smaller text size should be done outside this template to avoid breaking at certain times. Here, the template {{big}} is used as an example, but is relevant to most other templates too.
{{big|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Welcome to Wikipedia! | direction = right | alt text color = purple }}}}
gives: Welcome to Wikipedia!

TemplateData

edit

Displays the specified text using multiple colors which gradually phases from one color to another.

Template parameters

ParameterDescriptionTypeStatus
Font color 11

First font color

Suggested values
#000000
Lineoptional
Font color 22

Second font color

Suggested values
#000000
Lineoptional
Font color 33

Third font color

Suggested values
#000000
Lineoptional
Font color 44

Fourth font color

Suggested values
#000000
Lineoptional
Font color 55

Fifth font color

Suggested values
#000000
Lineoptional
Font color 66

Sixth font color

Suggested values
#000000
Lineoptional
Font color 77

Seventh font color

Suggested values
#000000
Lineoptional
Font color 88

Eighth font color

Suggested values
#000000
Lineoptional
Font color 99

Ninth font color

Suggested values
#000000
Lineoptional
Font color 1010

Tenth font color

Suggested values
#000000
Lineoptional
Font color 1111

Eleventh font color

Suggested values
#000000
Lineoptional
Font color 1212

Twelfth font color

Suggested values
#000000
Lineoptional
Font color 1313

Thirteenth font color

Suggested values
#000000
Lineoptional
Font color 1414

Fourteenth font color

Suggested values
#000000
Lineoptional
Font color 1515

Fifteenth font color

Suggested values
#000000
Lineoptional
Font color 1616

Sixteenth font color

Suggested values
#000000
Lineoptional
Font color 1717

Seventeenth font color

Suggested values
#000000
Lineoptional
Font color 1818

Eighteenth font color

Suggested values
#000000
Lineoptional
Font color 1919

Nineteenth font color

Suggested values
#000000
Lineoptional
Font color 2020

Twentieth font color

Suggested values
#000000
Lineoptional
Texttext 21

The text that is to be shown

Default
Error message when text parameter is missing: No text provided
Stringrequired
Directiondirection 22

Direction of font color flow, i.e., the list of colors appear to be moving in that direction, see Examples above

Suggested values
right left top bottom top right top left bottom right bottom left 30deg -60deg
Default
right
Linesuggested
Alternate text coloralt text color 23

Color of text, if browser is unable to render the linear-gradient

Default
black
Linesuggested

See Also

edit