View source for Template:Linear-gradient text/doc

{{Documentation subpage}}
{{Template shortcuts |lgtext}}
<!-- Add categories where indicated at the botftom of this page and interwikis at Wikidata -->

== Usage ==
Copy and paste the template below:
<pre style="overflow: auto;">
{{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 = }}</pre>
: '''Note''': This template can handle a '''maximum of 20 colors''', more than that will cause the template to break.
For better understanding see [[#Examples|Examples]] & [[#TemplateData|TemplateData]] below.

==Examples==

===Basics===

* 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:
: <pre style="overflow: auto;">{{Linear-gradient text | red | text = Hello, World! | direction = right | alt text color = green }}</pre>
:: gives: {{Linear-gradient text | red | text = Hello, World! | direction = right | alt text color = green }}
: '''BUT''' <pre style="overflow: auto;">{{Linear-gradient text | red | blue | text = Hello, World! | direction = right | alt text color = green }}</pre>
:: gives: {{Linear-gradient text | red | blue | text = Hello, World! | direction = right | alt text color = green }}

* <pre style="overflow: auto;">{{Linear-gradient text | red | green | #0000ff | text = Hello, World! | direction = top | alt text color = #F0E68C }}</pre>
:: gives: {{Linear-gradient text | red | green | #0000ff | text = Hello, World! | direction = top | alt text color = #F0E68C }}
::: Notice how the colors appear to be moving towards top direction, in the same order as they appear on the template.

* <pre style="overflow: auto;">{{Linear-gradient text | red | green | #0000ff | text = Hello, World! | direction = right | alt text color = purple }}</pre>
:: gives: {{Linear-gradient text | red | green | #0000ff | text = Hello, World! | direction = right | alt text color = purple }}
::: Notice how the colors appear to be moving towards right direction, in the same order as they appear on the template.

* Alternatively <code><nowiki>text</nowiki></code> parameter can substituted by <code><nowiki>21</nowiki></code>, <code><nowiki>direction</nowiki></code> parameter by <code><nowiki>22</nowiki></code> and <code><nowiki>alt text color</nowiki></code> parameter by <code><nowiki>23</nowiki></code>. For example:
: <pre style="overflow: auto;">{{Linear-gradient text | red | green | #0000ff | 21 = Hello, World! | 22 = right | 23 = purple }}</pre>
:: gives: {{Linear-gradient text | red | green | #0000ff | 21 = Hello, World! | 22 = right | 23 = purple }}
::: Notice that this alternative syntax also provides the same result as the previous example.

* <pre style="overflow: auto;">{{big|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | #ffaa00| #008888 | text = Welcome to Bharatpedia! | direction = top left | alt text color = purple }}}}</pre>
:: gives: {{large|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | #ffaa00| #008888 | text = Welcome to Bharatpedia! | direction = top left | alt text color = purple }}}}
::: Notice how the colors appear to be moving towards top left direction, in the same order as they appear on the template. This uses {{tl|big}} for formatting. You can learn more about text formatting with this template at [[#Text formatting|Text formatting]] section below.

* The same color can also be repeated
: <pre style="overflow: auto;">{{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 }}</pre>
:: gives: {{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 }}
::: 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 <code><nowiki>text</nowiki></code> parameter in it, it returns a default error message.
: <pre style="overflow: auto;">{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | direction = right | alt text color = purple }}</pre>
:: gives: {{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | direction = right | alt text color = purple }}

* If the template does not contain the <code><nowiki>direction</nowiki></code> parameter in it, it defaults to right direction.
: <pre style="overflow: auto;">{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Welcome to Bharatpedia! | alt text color = purple }}</pre>
:: gives: {{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Welcome to Bharatpedia! | alt text color = purple }}

* If the template does not contain the <code><nowiki>alt text color</nowiki></code> parameter in it, it defaults to black color.
: <pre style="overflow: auto;">{{Linear-gradient text | red | text = Welcome to Bharatpedia! }}</pre>
:: gives: {{Linear-gradient text | red | text = Welcome to Bharatpedia! }}
::: 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===

'''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 <code><nowiki>text</nowiki></code> parameter, the text may not appear as intended.

* {{bracket|{{bracket|[[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.
: <pre style="overflow: auto;">[[Special:Random|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Click here to read a random article | direction = right | alt text color = purple }}]]</pre>
:: gives: [[Special:Random|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Click here to read a random article | direction = right | alt text color = purple }}]]

* '''Bold''':
: <pre style="overflow: auto;">'''{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}'''</pre>
:: gives: '''{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}'''

* ''Italic'':
: <pre style="overflow: auto;">''{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}''</pre>
:: gives: ''{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}''

* <sup>Superscript</sup>:
: <pre style="overflow: auto;"><sup>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</sup></pre>
:: gives: <sup>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</sup>

* <sub>Subscript</sub>:
: <pre style="overflow: auto;"><sub>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</sub></pre>
:: gives: <sub>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</sub>

* <u>Underline</u>:
: <pre style="overflow: auto;"><u>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</u></pre>
:: gives: <u>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</u>

* <s>Strikethrough</s>:
: <pre style="overflow: auto;"><s>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</s></pre>
:: gives: <s>{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Lorem ipsum dolor sit amet | direction = right | alt text color = purple }}</s>

* Other text formatting, such as larger/ smaller text size should be done outside this template to avoid breaking at certain times. Here, the template {{tl|big}} is used as an example, but is relevant to most other templates too.
: <pre style="overflow: auto;">{{big|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Welcome to Bharatpedia! | direction = right | alt text color = purple }}}}</pre>
:: gives: {{large|{{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = Welcome to Bharatpedia! | direction = right | alt text color = purple }}}}

==TemplateData==

<templatedata>
{
	"params": {
		"1": {
			"label": "Font color 1",
			"description": "First font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"2": {
			"label": "Font color 2",
			"description": "Second font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"3": {
			"label": "Font color 3",
			"description": "Third font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"4": {
			"label": "Font color 4",
			"description": "Fourth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"5": {
			"label": "Font color 5",
			"description": "Fifth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"6": {
			"label": "Font color 6",
			"description": "Sixth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"7": {
			"label": "Font color 7",
			"description": "Seventh font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"8": {
			"label": "Font color 8",
			"description": "Eighth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"9": {
			"label": "Font color 9",
			"description": "Ninth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"10": {
			"label": "Font color 10",
			"description": "Tenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"11": {
			"label": "Font color 11",
			"description": "Eleventh font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"12": {
			"label": "Font color 12",
			"description": "Twelfth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"13": {
			"label": "Font color 13",
			"description": "Thirteenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"14": {
			"label": "Font color 14",
			"description": "Fourteenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"15": {
			"label": "Font color 15",
			"description": "Fifteenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"16": {
			"label": "Font color 16",
			"description": "Sixteenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"17": {
			"label": "Font color 17",
			"description": "Seventeenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"18": {
			"label": "Font color 18",
			"description": "Eighteenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"19": {
			"label": "Font color 19",
			"description": "Nineteenth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"20": {
			"label": "Font color 20",
			"description": "Twentieth font color",
			"type": "line",
			"suggestedvalues": [
				"#000000"
			]
		},
		"alt text color": {
			"aliases": [
				"23"
			],
			"label": "Alternate text color",
			"description": "Color of text, if browser is unable to render the linear-gradient",
			"type": "line",
			"default": "black",
			"suggested": true
		},
		"direction": {
			"aliases": [
				"22"
			],
			"label": "Direction",
			"description": "Direction of font color flow, i.e., the list of colors appear to be moving in that direction, see Examples above",
			"suggestedvalues": [
				"right",
				"left",
				"top",
				"bottom",
				"top right",
				"top left",
				"bottom right",
				"bottom left",
				"30deg",
				"-60deg"
			],
			"default": "right",
			"suggested": true,
			"type": "line"
		},
		"text": {
			"aliases": [
				"21"
			],
			"label": "Text",
			"description": "The text that is to be shown",
			"type": "string",
			"default": "Error message when text parameter is missing: No text provided",
			"required": true
		}
	},
	"paramOrder": [
		"1",
		"2",
		"3",
		"4",
		"5",
		"6",
		"7",
		"8",
		"9",
		"10",
		"11",
		"12",
		"13",
		"14",
		"15",
		"16",
		"17",
		"18",
		"19",
		"20",
		"text",
		"direction",
		"alt text color"
	],
	"description": "Displays the specified text using multiple colors which gradually phases from one color to another."
}
</templatedata>

== See Also ==
* {{tl|Linear-gradient background}}

<includeonly>{{sandbox other||
<!-- Categories below this line; interwikis at Wikidata -->
[[Category:Cross-browser compatibility templates]]

}}</includeonly>