Template:Alternative colored box

Template documentation

Usage and parameters

The Alternative colored box template is designed for portal and project pages. It is inspired by the layout of the French Wikipedia's main page. It can also be used on user pages.

Icons can be found at Commons:OOUI icons, and color choices must comply with accessibility standards, requiring a minimum contrast ratio of 4.5 between text and background.

With Wikitext With VisualEditor

Click on "Edit source" and insert the following syntax:

Minimal syntax =

{{Alternative colored box
 | title = 
 | content = 
 | link = 
 | class = 
}}

Full syntax =

{{Alternative colored box
 | title = 
 | content = 
 | link = 
 | class = 
 | icon = 
 | icon-class = 
}}

Older style and color parameters should be replaced using the class parameter and a dedicated TemplateStyles sheet.

No description yet available.

Usage

Template parameters

Parameter	Description		Default	Status
`Alternative colored box`			empty	optional

Additional information

The template is intended to be used in the following namespaces: no namespace specified

The template is intended to be used by the following user groups: no user group specified

This box template is designed for use in portals and project pages, inspired by Wikipedia’s main page.

Template parameters[Edit template data]
This template has custom formatting.
Parameter		Description	Type	Status
Title	`title`	The title displayed at the top of the box. Example Selection	String	required
Content	`content`	The main content inside the box. Example	Content	required
Edit link	`link` `editonly`	Name of the page to be edited when clicking the edit link. Example	Page name	suggested
CSS classes	`class`	Custom CSS classes defined in TemplateStyles for colors and style. Example portalXYZ-style1 portalXYZ-style2	String	suggested
Icon	`icon`	Optional icon displayed before the title. Example Circle-icons-bar-chart.svg	File	suggested
Icon CSS class	`icon-class`	Optional CSS class for the icon, e.g., skin-invert for dark mode compatibility. Suggested values `skin-invert`	String	optional
Box corner radius	`box-radius`	Pixel value for the box's border-radius. Default 4px Example 4px	Unknown	optional
Border corner radius	`border-radius`	Pixel value for the outer border's border-radius. Default 4px Example 4px	Unknown	optional
Border width	`border-width`	Pixel value for the thickness of the border. Default 2px Example 1px	Unknown	optional
Padding	`padding`	Padding value inside the box. Default 20px Example 20px	Unknown	optional
Custom CSS style	`style`	Additional inline CSS for the container.	String	optional
Flex size	`flex`	Flex CSS value to control responsive sizing. Example 1 1 20em	Content	optional
Title color	`title-color`	Hex code for the text color of the title. Example #DD3333	String	deprecated
Border color	`border-color`	Hex code for the border color. Example #DD3333	String	deprecated
Shadow color	`shadow-color`	Hex code for the box shadow. Example #DD3333	String	deprecated
Title bar color	`title-bar-color`	Hex code for the line under the title. Example #DD3333	String	deprecated
Background color	`background-color`	Hex code for the background color. Example #DD3333	String	deprecated
Link color	`link-color`	Hex code for the edit link color.	String	deprecated

Examples

Colors are defined using a TemplateStyles sheet (a `/styles.css` subpage written in CSS). For the examples below, the CSS classes are defined in Template:Alternative colored box/Documentation/styles.css.

Example 1: Default appearance

{{Alternative colored box
| title   = Example 1 (default look)
| content = Lorem ipsum
| link    = Sample page
}}

Example 1 (default look)

Lorem ipsum

Edit

Example 2: Custom background and border colors

<templatestyles src="Alternative colored box/Documentation/styles.css"/>
{{Alternative colored box
| title   = Example 2
| content = Lorem ipsum
| link    = Sample page
| class   = alt-colored-box-example-2
}}

Example 3: Custom shadow color

<templatestyles src="Alternative colored box/Documentation/styles.css"/>
{{Alternative colored box
| title   = Example 3
| content = Lorem ipsum
| link    = Sample page
| class   = alt-colored-box-example-3
}}

Example 4: Icon and custom link color

<templatestyles src="Alternative colored box/Documentation/styles.css"/>
{{Alternative colored box
| title   = Example 4
| content = Lorem ipsum
| link    = Sample page
| class   = alt-colored-box-example-4
| icon    = OOjs UI icon advanced.svg
| icon-class = skin-invert
}}

Example 4