Difference between revisions of "Template:Colored box"

From Open Food Facts wiki
Jump to navigation Jump to search
(fork from https://www.wikidata.org/wiki/Template:Colored_box)
 
 
(3 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
{{{content}}}{{clr}}</div>
 
{{{content}}}{{clr}}</div>
 
</div><noinclude>
 
</div><noinclude>
−
{{documentation}}
+
{{Colored gutter}}
 +
DOCUMENTATION
 +
== Usage ==
 +
Allow to insert a modern box.
 +
For the box to continue to the bottom you must use the argument « <code>| flex = 1 1 auto</code> »
 +
 
 +
== Syntax ==
 +
'''Reduced Syntax'''
 +
<pre>{{Colored box
 +
| title =
 +
| title-color = #000
 +
| background-title-color = #eaecf0
 +
| icon =
 +
| content =
 +
| background-content-color = #f8f9fa
 +
| link =
 +
}}</pre>
 +
 
 +
'''Complete syntax'''
 +
<pre>{{Colored box
 +
| title =
 +
| title-color = #000
 +
| background-title-color = #eaecf0
 +
| icon =
 +
| content =
 +
| background-content-color = #f8f9fa
 +
| style =
 +
| link =
 +
}}</pre>
 +
 
 +
== Parameters ==
 +
<templatedata>
 +
{
 +
"params": {
 +
"title": {
 +
"label": "Title",
 +
"description": "Title of the box.",
 +
"example": "Tag water",
 +
"type": "string",
 +
"required": true
 +
},
 +
"content": {
 +
"label": "Content",
 +
"description": "Content of the box.",
 +
"example": "Content text",
 +
"type": "content",
 +
"required": true
 +
},
 +
"link": {
 +
"label": "Link",
 +
"description": "Title of the wiki page to edit the content.",
 +
"example": "Map_Features",
 +
"type": "wiki-page-name",
 +
"suggested": true
 +
},
 +
"icon": {
 +
"label": "Icon",
 +
"description": "Name of the file for icon.",
 +
"example": "Circle-icons-chat.svg",
 +
"type": "wiki-file-name"
 +
},
 +
"title-color": {
 +
"label": "Title color",
 +
"description": "Hexadecimal color code of the title text.",
 +
"example": "#339966",
 +
"type": "string",
 +
"default": "#FFFFFF"
 +
},
 +
"style": {
 +
"label": "Style",
 +
"description": "Additional CSS style for the container.",
 +
"example": "flex: 1 1 20em;",
 +
"type": "string"
 +
},
 +
"link-color": {
 +
"label": "Link color",
 +
"description": "Hexadecimal color code of the Modify link.",
 +
"example": "#339966",
 +
"type": "string",
 +
"default": "#999999"
 +
},
 +
"background-title-color": {
 +
"label": "Title background color",
 +
"description": "Hexadecimal color code of the title bar background.",
 +
"example": "#447FF5",
 +
"type": "string",
 +
"default": "#339966",
 +
"suggested": true
 +
},
 +
"background-content-color": {
 +
"label": "Content background color",
 +
"description": "Hexadecimal color code of the box content background.",
 +
"example": "#339966",
 +
"type": "string",
 +
"default": "#F8F9FA"
 +
},
 +
"view-text": {
 +
"description": "Default title: edit, can be changed",
 +
"default": "edit"
 +
},
 +
"titre-couleur-fond-hover": {
 +
"label": "Title background color on hover",
 +
"description": "When hovering with the mouse, changes the background color of the title.",
 +
"default": "{{{titre-couleur-fond}}}"
 +
},
 +
"flex": {
 +
"label": "Flex",
 +
"description": "Integration in the grid of the dynamic column/line. The first number indicates the proportion to which the box can expand, the second to which it can shrink, the third the minimum width in px/em of the box",
 +
"example": "1 1 25em",
 +
"type": "string",
 +
"default": "0 1 auto"
 +
},
 +
        "center": {
 +
            "label": "Center the title",
 +
            "description": "If filled, allows to center the title."
 +
        }
 +
},
 +
"description": "Colored box for content presentation.",
 +
"paramOrder": [
 +
"title",
 +
"content",
 +
"link",
 +
"background-title-color",
 +
"icon",
 +
"title-color",
 +
"style",
 +
"link-color",
 +
"background-content-color",
 +
"view-text",
 +
"titre-couleur-fond-hover",
 +
"flex",
 +
        "center"
 +
],
 +
"format": "block"
 +
}
 +
</templatedata>
 +
 
 +
== Exemple ==
 +
* <code><nowiki>
 +
{{Colored box
 +
| title = Wikidata Query Builder
 +
| title-color = #000
 +
| background-title-color = #D33F00
 +
| icon =
 +
| content = Lorem Ipsum
 +
| background-content-color = #f8f9fa
 +
| link = Wikidata:Query Builder
 +
}}
 +
</nowiki></code>
 +
 
 +
{{Colored box
 +
| title = Wikidata Query Builder
 +
| title-color = #000
 +
| background-title-color = #D33F00
 +
| icon =
 +
| content = Lorem Ipsum
 +
| background-content-color = #f8f9fa
 +
| link = Wikidata:Query Builder
 +
}}
 +
 
 +
* <code><nowiki>
 +
{{Colored box
 +
| title = Box name
 +
| title-color = #000
 +
| background-title-color = #eaecf0
 +
| icon =
 +
| content =
 +
| background-content-color = #f8f9fa
 +
| link =
 +
}}
 +
</nowiki></code>
 +
 
 +
{{Colored box
 +
| title = Box name
 +
| title-color = #000
 +
| background-title-color = #eaecf0
 +
| icon =
 +
| content =
 +
| background-content-color = #f8f9fa
 +
| link =
 +
}}
 +
 
 +
== See also ==
 +
* [[Template:Colored bar]]
 +
* [[Template:Colored gutter]]
 +
* [[Template:Colored bar]]
 +
* [[Template:Begin colored insert]]
 +
* [[Template:End insert]]
 +
* [[Template:Clickable button]]
 +
* [[Template:Code rendered]]
 
</noinclude>
 
</noinclude>

Latest revision as of 15:32, 11 April 2024

{{{title}}}
{{{content}}}

DOCUMENTATION

Usage

Allow to insert a modern box. For the box to continue to the bottom you must use the argument « | flex = 1 1 auto »

Syntax

Reduced Syntax 

{{Colored box
 | title = 
 | title-color = #000
 | background-title-color = #eaecf0
 | icon = 
 | content = 
 | background-content-color = #f8f9fa
 | link = 
}}

Complete syntax 

{{Colored box
 | title = 
 | title-color = #000
 | background-title-color = #eaecf0
 | icon = 
 | content = 
 | background-content-color = #f8f9fa
 | style = 
 | link = 
}}

Parameters

Colored box for content presentation.

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Titletitle

Title of the box.

Example
Tag water
Stringrequired
Contentcontent

Content of the box.

Example
Content text
Contentrequired
Linklink

Title of the wiki page to edit the content.

Example
Map_Features
Pagesuggested
Title background colorbackground-title-color

Hexadecimal color code of the title bar background.

Default
#339966
Example
#447FF5
Stringsuggested
Iconicon

Name of the file for icon.

Example
Circle-icons-chat.svg
Fileoptional
Title colortitle-color

Hexadecimal color code of the title text.

Default
#FFFFFF
Example
#339966
Stringoptional
Stylestyle

Additional CSS style for the container.

Example
flex: 1 1 20em;
Stringoptional
Link colorlink-color

Hexadecimal color code of the Modify link.

Default
#999999
Example
#339966
Stringoptional
Content background colorbackground-content-color

Hexadecimal color code of the box content background.

Default
#F8F9FA
Example
#339966
Stringoptional
View-textview-text

Default title: edit, can be changed

Default
edit
Unknownoptional
Title background color on hovertitre-couleur-fond-hover

When hovering with the mouse, changes the background color of the title.

Default
{{{titre-couleur-fond}}}
Unknownoptional
Flexflex

Integration in the grid of the dynamic column/line. The first number indicates the proportion to which the box can expand, the second to which it can shrink, the third the minimum width in px/em of the box

Default
0 1 auto
Example
1 1 25em
Stringoptional
Center the titlecenter

If filled, allows to center the title.

Unknownoptional

Exemple

  • {{Colored box | title = Wikidata Query Builder | title-color = #000 | background-title-color = #D33F00 | icon = | content = Lorem Ipsum | background-content-color = #f8f9fa | link = Wikidata:Query Builder }}
Wikidata Query Builder edit
Lorem Ipsum
  • {{Colored box | title = Box name | title-color = #000 | background-title-color = #eaecf0 | icon = | content = | background-content-color = #f8f9fa | link = }}
Box name

See also

Retrieved from "https://wiki.openfoodfacts.org/index.php?title=Template:Colored_box&oldid=20812"