Template:Linear-gradient background/doc

Usage

Copy and paste the template below:

{{Linear-gradient background | <!-- Background color 1 --> | <!-- Background color 2 --> | <!-- Background color 3 --> | <!-- Background color 4 --> | <!-- Background color 5 --> | <!-- Background color 6 --> | <!-- Background color 7 --> | <!-- Background color 8 --> | <!-- Background color 9 --> | <!-- Background color 10 --> | <!-- Background color 11 --> | <!-- Background color 12 --> | <!-- Background color 13 --> | <!-- Background color 14 --> | <!-- Background color 15 --> | <!-- Background color 16 --> | <!-- Background color 17 --> | <!-- Background color 18 --> | <!-- Background color 19 --> | <!-- Background color 20 --> | text = | direction = | alt bg 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

• Atleast two background colors are required for this template to run properly, otherwise it will show up in the Alternate background color (black by default). For example:

{{Linear-gradient background | #ff99aa | text = Hello, World! | direction = right | alt bg color = lime }}

gives: Hello, World!

BUT

{{Linear-gradient background | #ff99aa | cyan | text = Hello, World! | direction = right | alt bg color = lime }}

gives: Hello, World!

• {{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | text = Hello, World! | direction = top | alt bg 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 background | #ff99aa | #55ff00 | #bb44ff | text = Hello, World! | direction = right | alt bg color = #777777 }}

gives: Hello, World!

Notice how the colors appear to be moving towards right direction, in the same order as they appear on the template.

• To create large text backgrounds.

{{big|{{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | #ffaa00| #008888 | text = Welcome to Wikipedia! | direction = top left | alt bg color = purple }}}}

gives: Welcome to Wikipedia!

• Font color can be changed using {{color}} template. {{color}} should be nested within text parameter.

{{big|{{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | #ffaa00| #008888 | text = {{color|white|Welcome to Wikipedia!}} | direction = top left | alt bg color = purple }}}}

gives: Welcome to Wikipedia!

• Alternatively text parameter can substituted by 21, direction parameter by 22 and alt bg color parameter by 23. For example:

{{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | 21 = Hello, World! | 22 = right | 23 = purple }}

gives: Hello, World!

Notice that this alternative syntax also provides the same result as the previous example.

• The same color can also be repeated

{{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | #ff99aa | #55ff00 | red | #0000ff | green | #ff99aa | #55ff00 | text = {{color|white|Abraham Lincoln was an American lawyer and statesman who served as the 16th president of the United States.}} | direction = right | alt bg 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 background | #ff99aa | #55ff00 | #bb44ff | direction = right | alt bg 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 background | #ff99aa | #55ff00 | #bb44ff | text = Welcome to Wikipedia! | alt bg 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 background | #ff99aa | text = Welcome to Wikipedia! }}

gives: Welcome to Wikipedia!

As mentioned above, atleast two background colors are required for this template to run properly, otherwise it will show up in the Alternate background color.

• To create background color but without text, use the non-breaking space character   in the text parameter. The use of this feature is strongly discouraged outside of Wikipedia:Department of Fun & Userspace pages. Here, it is used 20 times, you can use it as many times as you wish to create a length as per your choice.

{{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | #ff99aa | #55ff00 | red | #0000ff | green | #ff99aa | #55ff00 | text =                                         | direction = right | alt bg color = purple }}

gives:                                        

• To create hidden text, use {{color}} and use "transparent" as the color. in the text parameter. The text to be hidden must be provided at the end. Here, we have a hidden text for you. The use of this feature is strongly discouraged outside of Wikipedia:Department of Fun & Userspace pages.

{{Linear-gradient background | #ff99aa | #55ff00 | #bb44ff | #ff99aa | #55ff00 | red | #0000ff | green | #ff99aa | #55ff00 | text = {{color|transparent|<!-- You have to decipher the hidden text by yourself. So, this remains blank. XD. -->}} | direction = right | alt bg color = purple }}

gives: Dear editor, you seem to have deciphered the hidden text. Congratulations. Consider treating yourself with some WikiCookies (by clicking here). With love, Team Wikipedia.

Similarly, to create hidden wikilinks, use {{colored link}} instead of {{color}} and again use "transparent" as the color.

TemplateData

Displays a background using multiple colors which gradually phases from one color to another.

Template parameters

Parameter		Description	Type	Status
Background color 1	1	First background color Suggested values #000000	Line	optional
Background color 2	2	Second background color Suggested values #000000	Line	optional
Background color 3	3	Third background color Suggested values #000000	Line	optional
Background color 4	4	Fourth background color Suggested values #000000	Line	optional
Background color 5	5	Fifth background color Suggested values #000000	Line	optional
Background color 6	6	Sixth background color Suggested values #000000	Line	optional
Background color 7	7	Seventh background color Suggested values #000000	Line	optional
Background color 8	8	Eighth background color Suggested values #000000	Line	optional
Background color 9	9	Ninth background color Suggested values #000000	Line	optional
Background color 10	10	Tenth background color Suggested values #000000	Line	optional
Background color 11	11	Eleventh background color Suggested values #000000	Line	optional
Background color 12	12	Twelfth background color Suggested values #000000	Line	optional
Background color 13	13	Thirteenth background color Suggested values #000000	Line	optional
Background color 14	14	Fourteenth background color Suggested values #000000	Line	optional
Background color 15	15	Fifteenth background color Suggested values #000000	Line	optional
Background color 16	16	Sixteenth background color Suggested values #000000	Line	optional
Background color 17	17	Seventeenth background color Suggested values #000000	Line	optional
Background color 18	18	Eighteenth background color Suggested values #000000	Line	optional
Background color 19	19	Nineteenth background color Suggested values #000000	Line	optional
Background color 20	20	Twentieth background color Suggested values #000000	Line	optional
Text	text 21	The text that is to be shown Default Error message when text parameter is missing: No text provided	String	required
Direction	direction 22	Direction of background 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	Line	suggested
Alternate background color	alt bg color 23	Backgound color, if browser is unable to render the linear-gradient Default transparent	Line	suggested

See also

• {{Linear-gradient text}}