Template:Font color: Difference between revisions
Fixed two problems, see talk page. (1) Misuse of parameter {{{2}}} in two lines, (2) Comments broke the logic when used in signatures |
m 67 revisions imported from wikipedia:Template:Font_color |
||
| (9 intermediate revisions by 6 users not shown) | |||
| Line 1: | Line 1: | ||
{{ | <includeonly>{{ safesubst:#if: {{{text|{{{3|}}}}}} | ||
| {{ | | {{ safesubst:#if: {{{link|}}} | ||
| {{ | | {{ safesubst:#ifeq: {{{link|}}} | yes | ||
| [[{{{3|}}}|<span style="background-color:{{{2|inherit}}}; color:{{{1|inherit}}};">{{{3|}}}</span>]] | | [[ {{ safesubst:#if:trim | {{{text|{{{3|}}}}}} }}|<span style="background-color:{{ safesubst:#if:trim | {{{bg|{{{2|inherit}}}}}} }}; color:{{ safesubst:#if:trim | {{{fg|{{{1|inherit}}}}}} }};">{{ safesubst:#if:trim | {{{text|{{{3|}}}}}} }}</span>]] | ||
| [[{{{link|}}}|<span style="background-color:{{{2|inherit}}}; color:{{{1|inherit}}};">{{{3|}}}</span>]] | | [[{{{link|}}}|<span style="background-color:{{ safesubst:#if:trim | {{{bg|{{{2|inherit}}}}}} }}; color:{{ safesubst:#if:trim | {{{fg|{{{1|inherit}}}}}} }};">{{ safesubst:#if:trim | {{{text|{{{3|}}}}}} }}</span>]] | ||
}} | }} | ||
| <span style="background-color:{{{2|inherit}}}; color:{{{1|inherit}}};">{{{3|}}}</span> | | <span style="background-color:{{ safesubst:#if:trim | {{{bg|{{{2|inherit}}}}}} }}; color:{{ safesubst:#if:trim | {{{fg|{{{1|inherit}}}}}} }};">{{ safesubst:#if:trim | {{{text|{{{3|}}}}}} }}</span> | ||
}} | }} | ||
| {{ | | {{ safesubst:#if: {{{link|}}} | ||
| {{ | | {{ safesubst:#ifeq: {{{link|}}} | yes | ||
| [[{{{2|}}}|<span style="color:{{{1|inherit}}};">{{{2|}}}</span>]] | | [[ {{ safesubst:#if:trim | {{{bg|{{{2|}}}}}} }} |<span style="color:{{ safesubst:#if:trim | {{{fg|{{{1|inherit}}}}}} }};">{{ safesubst:#if:trim | {{{bg|{{{2|}}}}}} }}</span>]] | ||
| [[{{{link|}}}|<span style="color:{{{1|inherit}}};">{{{2|}}}</span>]] | | [[ {{ safesubst:#if:trim | {{{link|}}} }} |<span style="color:{{ safesubst:#if:trim | {{{fg|{{{1|inherit}}}}}} }};">{{ safesubst:#if:trim | {{{bg|{{{2|}}}}}} }}</span>]] | ||
}} | }} | ||
| <span style="color:{{{1|inherit}}};">{{{2|}}}</span> | | <span style="color:{{ safesubst:#if:trim | {{{fg|{{{1|inherit}}}}}} }};">{{ safesubst:#if:trim | {{{bg|{{{2|}}}}}} }}</span> | ||
}} | }} | ||
}}<noinclude> | }}</includeonly><noinclude> | ||
{{documentation}} | {{documentation}} | ||
</noinclude> | </noinclude> | ||
Latest revision as of 20:49, 24 January 2026
File:Test Template Info-Icon - Version (2).svg Template documentation[view] [edit] [history] [purge]
.svg){kind=link}
| Warning | Links should be clearly recognizable as clickable to readers. Avoid using colored links as it may hinder the reader's ability to distinguish links from regular text, particularly coloring links solely for aesthetic purposes. See the Manual of Style accessibility guideline sections on Contrast and Color. |
| Warning | This template is used on approximately 26,000 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them. |
Purpose
{{ Font color }} is how you insert colorized text, such as red, orange, green, blue and indigo, and more at Codex Style Guide for Wikimedia and Color generation guide. You can specify its background color at the same time.
{{ Font color }} is also how you can color wikilinks
to something other than blue for when you need to work within background colors.
Normally [[ wikilink ]] → wikilink,
but here we use a {{ font color }} with |link = to create a black wikilink →
wikilink
You can make any text link to any page using the |link= parameter.
This template will use Wikipedia:HTML5 recommendations,
inserting the span tags
<span style="color:color">...</span> and
<span style="background-color:color">...</span>, so the page increases its readability and usability in both the wikitext and the rendered page.
Usage
{{Font color}} has a one-color and a two-color form:
- {{font color | color | text }}
- {{font color | text color | background color | text }}.
Either form has a |link= option, for colorizing (otherwise blue or red) wikilink text.
- |link=yes →
[[text]] - |link=fullpagename →
[[fullpagename]]
You can also name the other fields.
- {{font color | fg=color | text=text }}
- {{font color | fg=text color | bg=background color | text=text }}
You can name |fg= or |bg=, which is nice, but... if you name either of them, you must also name |text=, which is a compromise. (See Help:Template#Parameters for why.)
Spacing is of no concern.
.{{font color|tan|green|text with four words}}.→.text with four words..{{font color|tan|green|text with four words}}.→.text with four words..{{ font color | tan | green | text with four words }}.→.text with four words.
Parameters
| Use / description | Default value | |
| {{{1}}} | text color | inherited |
| {{{2}}} | text | |
| link | =yes or =fullpagename |
- Or
| Use / description | Default value | |
| {{{1}}} | text color | inherited |
| {{{2}}} | background color | inherited |
| {{{3}}} | text | |
| link | =yes or =fullpagename |
Examples
Using the Codex Design Style Guide for Wikimedia text colors:
{{font color|var(--color-success, #177860)|'''Success'''}}→ Success{{font color|#008560|'''Success green from'''}}→ Success green from (color derived from Template:Talk quote inline){{font color|var(--color-error, #bf3c2c)|'''Error'''}}→ Error{{font color|var(--color-content-added, #006400)|'''Content added'''}}→ Content added{{font color|var(--color-content-removed, #8b0000)|'''Content removed'''}}→ Content removed{{font color|var(--color-progressive, #36c)|Fake wikilink}}→ Fake wikilink{{font color|var(--color-content-link-red, #bf3c2c)|Fake red link}}→ Fake red link
| Markup | Renders as |
|---|---|
{{ font color | green | green text }}
|
green text |
{{ font color | blue | do not style text as a link }}
|
do not style text as a link |
{{ font color || yellow | default text in yellow background }}
|
default text in yellow background |
{{ font color | bg=yellow | text = default text in yellow background }}
|
default text in yellow background |
{{ font color | white | black | white with black background }}
|
white with black background |
{{ font color | #ffffff | #000000 | white with black background }} ([[hexadecimal colors]])
|
white with black background (hexadecimal colors) |
{{ font color | rgb(255,255,255) | rgb(0,0,0) | white with black background }}
|
white with black background |
| Markup | Renders as |
|---|---|
{{ font color | white | blue | Wikipedia:Example | link = yes }}
|
Wikipedia:Example |
{{ font color | white | blue | Wikipedia:Example | link = Wikipedia:Sandbox }}
|
Wikipedia:Example |
{{ font color | text = Wikipedia:Example | link = Wikipedia:Sandbox | bg
= blue | fg = white }}
|
Wikipedia:Example |
The |link= parameter is a good way to colorize wikilinks,
and it is about as much typing as the pipe trick.
Although a wikilink accepts a font color (or other template or markup):
[[Wikipedia:Example|{{font color|white|blue|the Wikipedia:Example page}}]]- → the Wikipedia:Example page (a font-colored link),
a font color does not accept a wikilink, it creates wikilinks itself with |link=.
- Green tick {{ font color | green | violet | Wikipedia:Example | link=yes }} → Wikipedia:Example (a
|link={{ font color }}) - ☒{{ font color | green | violet | the [[Wikipedia:Example]] page}} → the Wikipedia:Example page (Text with [[wikilink brackets]] overrides the designated color)
- ☒{{ font color | green | violet | [[Wikipedia:Exammple]] }} → the Wikipedia:Exammple page (Text with [[wikilink brackets]] overrides the designated color)
For more examples see /testcases. For actual mainspace template usage, here are search links for
- all usage.
- where
|link=is used. - hastemplate: "font color" prefix:F showing its use in articles whose title begins with the letter "F".
See also
- Important Manual of Style information
- Web colors
- HTML color names
- List of colors
- Help: Link color
- {{color}}
- {{background color}}
- {{coltit}} — colored table header cell
- {{color contrast ratio}}
- {{hilite}}
- {{font}}
- {{tq}}
- {{xt}}