Template:Probox/doc

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 upcoming addMe gadget, allowing people to create, endorse and join projects without messing around with template parameters.

See also:

• m:Meta:Probox
• Module:Probox

Using the default Probox

See m:Meta:Probox#Default

Example code

<syntaxhighlight lang="html5" style="width:60%;">

Endorsements

</syntaxhighlight>

Creating custom Proboxes

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

File:Probox structure diagram.png

The basic template structure. Outer and inner wrapper sections (used for formatting only) have dotted borders. Sections that can contain content have solid borders: black bordered sections are displayed by default; grey bordered sections only display if they contain content.

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

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

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

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

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

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

• Module:Probox - the Lua module on which this template is based