Template:Msgbox: Difference between revisions
No edit summary Tag: 2017 source edit |
No edit summary Tag: 2017 source edit |
||
| Line 1: | Line 1: | ||
<div style="border: 1px solid {{{border|var(--border-color-base, #a2a9b1)}}}; border-left: 10px solid {{{accent|var(--border-color-progressive, #36c)}}}; background-color: {{{bg|var(--background-color-neutral-subtle, #f8f9fa)}}}; color: var(--color-base, #202122); padding: 8px 12px; margin-bottom: 1em; line-height: 1.5; box-sizing: border-box; display: flex; align-items: center; gap: 10px;"> | <div style="border: 1px solid {{{border|var(--border-color-base, #a2a9b1)}}}; border-left: 10px solid {{{accent|var(--border-color-progressive, #36c)}}}; background-color: {{{bg|var(--background-color-neutral-subtle, #f8f9fa)}}}; color: var(--color-base, #202122); padding: 8px 12px; margin-bottom: 1em; line-height: 1.5; box-sizing: border-box; display: flex; align-items: center; gap: 10px;"> | ||
<div style="flex-shrink: 0; font-size: 24px;">{{{icon|}}}</div> | <div style="flex-shrink: 0; font-size: 24px;">{{{icon|}}}</div> | ||
<div>{{{issue|{{{1|}}}}}}{{{fix|{{{2|}}}}}}</div> | <div>{{{issue|{{{1|}}}}}} {{{fix|{{{2|}}}}}}</div> | ||
</div><noinclude> | </div><noinclude> | ||
<div style="border: 1px solid var(--border-color-base, #a2a9b1); background-color: var(--background-color-success-subtle, #ecfcf4); padding: 1em; margin-top: 1em;"> | <div style="border: 1px solid var(--border-color-base, #a2a9b1); background-color: var(--background-color-success-subtle, #ecfcf4); padding: 1em; margin-top: 1em;"> | ||
Revision as of 02:00, 25 March 2026
{{Msgbox}} is the base template for article message boxes. It uses Codex design tokens for automatic light/dark theme support across Vector 2022, Minerva (mobile), MonoBook, and Timeless.
Basic usage
{{Msgbox
|icon=ℹ️
|issue='''Describe the problem.'''
|fix=Describe what the editor should do.
}}
Renders as:
Parameters
| Parameter | Required | Description |
|---|---|---|
issue or 1 |
Yes | Problem statement (add '''bold''' in calling templates)
|
fix or 2 |
Yes | What should be done to fix it |
icon |
No | Emoji or image shown to the left of the text. Default: none |
accent |
No | Left border color (CSS value or Codex token). Default: progressive blue |
bg |
No | Background color. Default: neutral subtle |
border |
No | Outer border color. Default: base |
Types
There are no hardcoded types. Instead, pass Codex tokens to accent and bg to get different styles. The recommended combinations are shown below.
Notice (default)
For general informational messages, stubs, and neutral notices. This is the default when no accent or bg is specified.
{{Msgbox|icon=ℹ️|issue='''This is a notice.''' |fix=No action needed.}}
Warning (content and style issues)
For content quality problems: missing citations, original research, POV, cleanup, tone.
{{Msgbox
|icon=⚠️
|accent=var(--border-color-warning, #edab00)
|bg=var(--background-color-warning-subtle, #fef6e7)
|issue='''This article needs additional citations.'''
|fix=Please help improve it by adding reliable sources.
}}
Error (deletion)
For deletion proposals, speedy deletion, and serious policy violations.
{{Msgbox
|icon=❌
|accent=var(--border-color-error, #d33)
|bg=var(--background-color-error-subtle, #fee7e6)
|issue='''This article has been proposed for deletion.'''
|fix=Discuss on the talk page.
}}
Success (resolved)
For resolved issues, completed reviews, or positive status.
{{Msgbox
|icon=✅
|accent=var(--border-color-success, #14866d)
|bg=var(--background-color-success-subtle, #ecfcf4)
|issue='''This issue has been resolved.'''
|fix=You may remove this notice.
}}
Progressive (merge and move)
For merge proposals, split proposals, and move discussions.
{{Msgbox
|icon=🔀
|accent=var(--border-color-progressive, #36c)
|bg=var(--background-color-progressive-subtle, #eaf3ff)
|issue='''It has been suggested that this article be merged.'''
|fix=Discuss on the talk page.
}}
Neutral (protection and info)
For page protection notices and other low-priority information.
{{Msgbox
|icon=🔒
|accent=var(--border-color-base, #a2a9b1)
|bg=var(--background-color-neutral-subtle, #f8f9fa)
|issue='''This article is semi-protected.'''
|fix=Only autoconfirmed users may edit.
}}
Codex design tokens reference
All tokens adapt automatically to light and dark mode in Vector 2022 and Minerva.
Border colors
| Token | Light value | Use for |
|---|---|---|
var(--border-color-progressive, #36c) |
#36c | Notice, info, merge |
var(--border-color-warning, #edab00) |
#edab00 | Content/style issues |
var(--border-color-error, #d33) |
#d33 | Deletion, speedy |
var(--border-color-success, #14866d) |
#14866d | Resolved, good |
var(--border-color-base, #a2a9b1) |
#a2a9b1 | Neutral, protection |
Background colors
| Token | Light value | Use for |
|---|---|---|
var(--background-color-progressive-subtle, #eaf3ff) |
#eaf3ff | Notice, merge |
var(--background-color-warning-subtle, #fef6e7) |
#fef6e7 | Content/style issues |
var(--background-color-error-subtle, #fee7e6) |
#fee7e6 | Deletion |
var(--background-color-success-subtle, #ecfcf4) |
#ecfcf4 | Resolved |
var(--background-color-neutral-subtle, #f8f9fa) |
#f8f9fa | Default/neutral |
Text colors
| Token | Description |
|---|---|
var(--color-base, #202122) |
Primary text color |
var(--color-subtle, #54595d) |
Secondary/muted text |
var(--color-progressive, #36c) |
Link/action color |
Shortcut templates
These templates wrap {{Msgbox}} with preset styles and icons:
| Template | Icon | Style | Usage |
|---|---|---|---|
{{Stub}} |
📝 | Notice (blue) | Article is too short |
{{Citation needed}} |
📚 | Warning (orange) | Needs sources |
{{Cleanup}} |
🧹 | Warning (orange) | Formatting/quality issues |
{{Original research}} |
⚠️ | Warning (orange) | Unverified claims |
{{Under construction}} |
🚧 | Notice (blue) | Work in progress |
{{Merge}} |
🔀 | Progressive (blue) | Merge proposal |
{{Delete}} |
❌ | Error (red) | Deletion proposal |