Template:Probox/sandbox
 | This is the template sandbox page for Template:Probox (diff). See also the companion subpage for test cases. |
 | This template uses Lua: |
Probox is a configurable infobox framework for project pages, built in Lua. The {{Probox}} template provides a framework for creating infoboxes for project pages, such as grant proposals, research proposals, and IdeaLab ideas. Probox infoboxes work with the FormWizard page creation gadget and the addMe gadget, allowing people to create, endorse and join projects without messing around with template parameters.
See also:
Using the default Probox
[edit]
Endorsements
[edit]- Example code
{{Probox
|project=My test project
|portal=Default
|status=planned
|summary=A great way to while away a lazy afternoon
|image=File:Kleiner_Waldchampignon_Agaricus_silvaticus.jpg
|creator=Jtmorgan
|member=EpochFail
|member3=Ironholds
|member2=Quiddity
|member9=Jeph paul
|more_participants=YES
|timestamp=March 22nd, 2025
}}
Creating custom Proboxes
[edit]You can change the styling, fields, and interface text of probox infoboxes by creating a custom datasheet and content page. For examples of custom proboxes, see Meta:Probox#Deployments.
Sections
[edit]
- outer
- This is a wrapper for the infobox. All other sections are inside it. It contains CSS hooks that define the basic styling of the infobox, such as width, position, etc.
- above
- This is the first content section of the infobox. It displays content above the grey infobox ("Inner box").
- inner
- This is the inner box. It doesn't contain any content directly, but rather contains all content sections except "Above" and "Below". It has a grey background by default, but this can be changed.
- head
- This is the header section of the infobox. It contains basic information such as the title of the project (required) and an image that goes along with the project (optional)
- main
- This is the main content section of the infobox. The primary descriptive information about the project, such as a summary and a project contact (both required) go here.
- participants
- This section can be used to display other information about the project, such as an (optional) list of participants. The default background color is white, to set this section apart from the main section. It also has extra padding by default, so that it is displayed as a sub-section on Main.
- cta
- This section can be used to put calls to action (CTAs), such as buttons to invite users to join the project, or an invitation to give feedback on the project talk page.
- below
- This section can be used for other meta-information about the project, such as the date it was created, or external links.
Styling and formatting
[edit]Each section of the template can be styled individually. Some sections are always displayed by default, others will only be displayed if certain parameters are included when the template is called. The styles dictionary in the datasheet contains all configurable styling and formatting information for the infobox.
- Box style
- The styling of the divs that define the outer and inner boxes (see diagram above) is defined in m.styles.box.outer and m.styles.box.inner.
- Section style
- You can add style information at the section level using the m.styles.sections.sectiontitle dictionary.
- Field style
- You can add style information to individual fields at three points in the m.fields.fieldname dictionary in the infobox datasheet:
- style defines the CSS style for the field div
- style2 defines the CSS style for the field title span (if there is one)
- style3 defines the style for the field value span
Leave any unused style keys as empty strings if you don't need extra styling for that field (for example, m.fields.title.style2 can be blank because the title for the title field is not displayed).
Field style classes You can also set style classes (which can be used by multiple fields) in the m.styles.field dictionary. For example, the default font size m.styles.field.h1 is 1.3em. To make a particular field use that font size, set m.fields.fieldname.style2 = m.styles.field.h1.
Translation
[edit]Probox is fully translatable. The interface text (field titles like "summary" and button titles like "join") are translatable using the translatable content template system. TCT is used instead of other systems like TNT in order to separate content from structure and formatting, making it easier to update non-text parts of the template without working around markup created by the translation extension and User:FuzzyBot.
Translating interface text
[edit]Any Probox can be set up for translation by marking the relevant content subpage translatable. Several already have been.
Proboxes currently in translation:
- IdeaLab (example, config, content)
- IEG (example, config, content)
- Inspire (example, config, content)
- Learning patterns (example, config, content)
Translating content
[edit]You can translate the content of Probox parameters on any content page that has been marked for translation the same way you would any other text on that page: by wrapping the text in translation tags. Here's a good example: Grants:IdeaLab/Reimagining_WMF_grants
Adding categories
[edit]Probox does not automatically add categories to pages. However, if you use a child datasheet you can automatically add categories to pages that use your Probox template with the m.categories dictionary. Just add your categories to m.categories.default, like this:
m.categories.default = "[[Category:My_first_category]] [[Category:My_second_category]]"
Dependencies
[edit]- Module:Probox - the Lua module on which this template is based