Anthony: Add for Visual Editor Usage.

2026-03-23T08:27:01Z

Add <templatedata> for Visual Editor Usage.

Anthony: Protected "Template:GuideStep" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

2026-03-16T09:43:47Z

Protected "Template:GuideStep" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

New page

<templatestyles src="GuideStep/styles.css"/><div class="guide-step{{#if:{{{layout|}}}| guide-step--img-{{{layout|}}}|}}"><div class="guide-step-header"><span class="guide-step-number">{{{step|?}}}</span><span class="guide-step-title">{{{title|Step Title}}}</span>{{#if:{{{badge|}}}|<span class="guide-step-badge">{{{badge}}}</span>|}}</div><div class="guide-step-body"><div class="guide-step-content"><div class="guide-step-text">{{{text|}}}</div>{{#if:{{{note|}}}|<div class="guide-step-note">💡 {{{note}}}</div>|}}{{#if:{{{warning|}}}|<div class="guide-step-warning">⚠️ {{{warning}}}</div>|}}</div>{{#if:{{{image|}}}|<div class="guide-step-screenshot">[[File:{{{image}}}|{{{imagesize|600px}}}|alt={{{imagealt|}}}|class=guide-screenshot]]</div>|}}</div></div><noinclude>
== GuideStep ==
Displays a numbered step block used in Quick Start guides and tutorials. Each step has a numbered circle header, body text, optional note/warning callout boxes, and an optional inline screenshot. The screenshot slot is hidden entirely when no image is provided — no placeholder is shown.

Styles are loaded from [[Template:GuideStep/styles.css]]. Tab switching is handled by [[MediaWiki:Gadget-guide.js]].

=== Usage ===
<pre>
{{GuideStep
| step = 1
| title = Go to the project hub
| text = Navigate to the hub page for your category, e.g. [[Projects/Audio]].
| note = Not sure which category fits? You can select multiple.
| image = Quickstart-hub-page.png
| layout = below
}}
</pre>

=== Parameters ===
; <code>step</code> : Step number shown in the orange circle. Can be any value — use numbers or letters.
; <code>title</code> : Short step title shown in the header bar.
; <code>text</code> : Main body text of the step. Supports wikitext formatting.
; <code>note</code> : Optional orange "💡" callout box for tips or helpful context.
; <code>warning</code> : Optional red "⚠️" callout box for warnings or important caveats.
; <code>badge</code> : Optional small badge label shown in the header (e.g. "Optional").
; <code>image</code> : Filename of a screenshot image (e.g. <code>MyScreenshot.png</code>). Upload via [[Special:Upload]] first. If omitted, no image section renders.
; <code>imagesize</code> : Width of the image. Defaults to <code>600px</code>. Use <code>300px</code> for side layouts.
; <code>imagealt</code> : Alt text for the screenshot image for accessibility.
; <code>layout</code> : Image position relative to text. Options: <code>below</code> (default), <code>above</code>, <code>left</code>, <code>right</code>. On mobile, <code>left</code> and <code>right</code> automatically collapse to <code>below</code>.

=== Tab navigation ===
To use GuideStep inside tabbed sections, wrap groups of steps in:
<pre>
<div class="guide-tabs">
<div class="guide-tabs-nav"><span class="guide-tab-nav-item is-active" data-tab="t1">Tab 1</span><span class="guide-tab-nav-item" data-tab="t2">Tab 2</span></div>
<div class="guide-tab-panel is-active" data-panel="t1">
{{GuideStep|step=1|title=...|text=...}}
</div>
<div class="guide-tab-panel" data-panel="t2">
{{GuideStep|step=1|title=...|text=...}}
</div>
</div>
</pre>
Prev/next buttons inside panels should use: <code><span class="guide-tab-nav-item guide-nav-btn guide-nav-btn--next" data-tab="t2">Next →</span></code>

[[Category:Layout Templates]]
</noinclude>

Template:GuideStep - Revision history

Anthony: Add for Visual Editor Usage.

Anthony: Protected "Template:GuideStep" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))