Template:Process box/doc

This is a documentation subpage for Template:Process box.
It may contain usage information, categories and other content that is not part of the original template page.

This template uses Lua:

Module:Process box

A template that aids in displaying the current state of a multi-phase process, like scholarship application.

Parameters

The template uses some parameters that apply for all process phases as well as some that can be specified per-phase.

General parameters:

title – The template header, rendered in bold; common for all phases. Recommended.
content – The template content, used if there's no content associated with the active phase. Optional.
current phase – Number of the current process phase. Optional, by default 1.
image left – Name of the file to be displayed on the left. Optional.
image right – Name of the file to be displayed on the right. Optional.
image size – Size (in pixels) of the images in template. Optional, by default 32.
image left size – Size (in pixels) of the left image in template. Optional, overrides image size if specified.
image right size – Size (in pixels) of the right image in template. Optional, overrides image size if specified.
image left class – CSS class to be applied to the left image. Optional, it's suggested to put here skin-invert-image if the image should be inverted in the dark mode. Multiple classes should be separated by spaces.
image right class – CSS class to be applied to the right image. Optional, recommendations as above.

Phase-specific parameters:

phase # name – The phase name, displayed in a colored bubble at the top. Recommended.
phase # hover – The phase name, displayed on a tooltip after hovering on inactive phase bubble. Recommended.
phase # color – The color used for the active phase bubble. Blue by default. Supported values: blue, green, yellow, red, pink. Phase colors are defined in the template stylesheet. Define more if you need, but remember about specifying dark mode colors as well.
phase # content – The text to be displayed inside the template. Mandatory for active phase.
phase # image left – The file name to override image left for this phase. Optional.
phase # image right – The file name to override image right for this phase. Optional.
phase # image left class – CSS class to be applied to the left image in this phase. Optional, for recommendations see image left class above.
phase # image right class – CSS class to be applied to the right image in this phase. Optional, for recommendations see image left class above.

where # stands for the phase number. The number of phases is not limited, however phases should be numbered consecutively, starting from 1.

Example

A box with four phases defined. Every phase has different image on the left side and a separate content. Switching between pages was done using current phase parameter.

Results announced

Wikimania 2024 Scholarships applications

All applicants have been notified about the outcome of their submission. Please check your e-mail and Spam folder.

{{Process box
 | title = Wikimania 2024 Scholarships applications
 | current phase = 4
 | phase 1 name = In preparation
 | phase 1 hover = Preparation phase
 | phase 1 image left = Hourglass 2.svg
 | phase 1 content = We are now preparing the scholarship application form and going to announce application start later on.
 | phase 1 color = pink
 | phase 2 name = Applications open
 | phase 2 hover = Application phase
 | phase 2 image left = Edit-inprogress.svg
 | phase 2 content = The applications can now be made. Details on the procedure can be found on this page. When in doubt, please contact Lorem Ipsum.
 | phase 2 color = blue
 | phase 3 name = Under review
 | phase 3 hover = Review phase
 | phase 3 image left = System-search-32.svg
 | phase 3 content = We are now reviewing the applications. We will send results to all applicants to let them know if their submission is accepted.
 | phase 3 color = yellow
 | phase 4 name = Results announced
 | phase 4 hover = Announcement phase
 | phase 4 image left = Text-x-generic-apply.svg
 | phase 4 content = All applicants have been notified about the outcome of their submission. Please check your e-mail and Spam folder.
 | phase 4 color = green
 | image right = Wikimania 2024 icon.png
 | image right size = 48
 | image left size = 32
 }}

Parameters

Example

See also